Initial Commit
This commit is contained in:
root
parent
46f390d12b
commit
795e6e9b6d
|
|
@ -24,8 +24,8 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
|
|||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import "./components/ProgressBar/ProgressBar.css"
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
let ContactIcons = () => {
|
||||
return (
|
||||
<ul className="flex space-x-5">
|
||||
<li>
|
||||
<a href="https://github.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://social.winscloud.net/@winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Mastodon</title>
|
||||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://matrix.to/#/@winsdominoes:matrix.winscloud.net" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg fill="currentColor" className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Matrix</title>
|
||||
<path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://facebook.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Instagram</title>
|
||||
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/WinsDominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<svg className="w-7 h-7 transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Twitter</title>
|
||||
<path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactIcons;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
"use client"
|
||||
import Link from "next/link"
|
||||
import React, {useState} from "react"
|
||||
|
||||
const Footer = () => {
|
||||
const links = [
|
||||
{
|
||||
id: 1,
|
||||
text: "GitHub",
|
||||
link: "https://github.com/WinsDominoes"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Mastodon",
|
||||
link: "https://social.winscloud.net/WinsDominoes"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "Matrix",
|
||||
link: ""
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 place-items-center mt-8 border-t w-full border-gray-700">
|
||||
<div className="mt-4">
|
||||
<p className="text-xl px-4 cursor-pointer capitalize font-medium text-gray-300">Win Pattanaphol 2023</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<code className="text-sm px-4 cursor-pointer font-medium text-gray-300">wins.dominoes2007@gmail.com</code>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
"use client"
|
||||
import Link from "next/link"
|
||||
import React, {useState} from "react"
|
||||
import { FaBars, FaTimes } from "react-icons/fa"
|
||||
|
||||
const Navbar = () => {
|
||||
const [nav, setNav] = useState(false);
|
||||
|
||||
const links = [
|
||||
{
|
||||
id: 1,
|
||||
text: "Home",
|
||||
link: "/"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Projects",
|
||||
link: "projects"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "Hobbies",
|
||||
link: "hobbies"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center h-20 nav lg:-ml-[15px]">
|
||||
<ul className="flex">
|
||||
{links.map(({ id, text, link }) => (
|
||||
<li
|
||||
key={id}
|
||||
className="nav-links px-4 cursor-pointer capitalize font-medium text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
|
||||
>
|
||||
<Link href={link}>{text}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import React from "react";
|
||||
|
||||
const Photo = ({src, href, alt, dim}: any) => {
|
||||
let classes;
|
||||
|
||||
if(!dim || dim == "true") {
|
||||
classes = "transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300"
|
||||
} else if (dim == "false") {
|
||||
classes = "transition ease-in-out delay-150 hover:scale-105 duration-300"
|
||||
}
|
||||
|
||||
if(!href || href == "#") {
|
||||
return (
|
||||
<div>
|
||||
<div className="grid content-center">
|
||||
<div className={classes}>
|
||||
<Image
|
||||
className="h-auto max-w-full rounded-lg"
|
||||
src={src}
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
alt={alt}
|
||||
/>
|
||||
|
||||
<span className="text-xs m-2 text-zinc-400">{alt}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
href={href}
|
||||
>
|
||||
<div className="grid content-center">
|
||||
<div className={classes}>
|
||||
<Image
|
||||
className="h-auto max-w-full rounded-lg"
|
||||
src={src}
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
alt={alt}
|
||||
/>
|
||||
|
||||
<span className="text-xs m-2 text-zinc-400">{alt}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Photo;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.barCompleted {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
"use client"
|
||||
import ProgressBar from "@ramonak/react-progress-bar";
|
||||
|
||||
const SkillProgress = ({text, progress}: any) => {
|
||||
|
||||
// let css = "h-full animate-pulse rounded-full bg-gradient-to-r from-cyan-500 to-indigo-500"
|
||||
// let bar = <div className={css} style={{width: progress + "%"}}></div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-xl font-bold">{ text }</h1>
|
||||
<div className="relative mb-5 h-2">
|
||||
<ProgressBar
|
||||
completed={progress}
|
||||
animateOnRender
|
||||
isLabelVisible={false}
|
||||
height="0.5rem"
|
||||
bgColor="linear-gradient(to right, #06b6d4, #6366f1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SkillProgress;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
const Timeline = () => {
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
school: "Sarasas Witaed Minburi School",
|
||||
period: "Pre-Kindergarden - 4th Grade",
|
||||
date: "2009 - 2016"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
school: "Sarasas Witaed Romklao International Programme",
|
||||
period: "4th Grade - 6th Grade",
|
||||
date: "2016 - 2019"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
school: "Homeschooling with Wolsey Hall Oxford, England",
|
||||
period: "7th Grade - 9th Grade",
|
||||
date: "2019 - 2022"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
school: "Rugby School Thailand",
|
||||
period: "9th Grade - Present (10th Grade)",
|
||||
date: "Present"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div>
|
||||
{data.map(({ id, school, period, date }) => (
|
||||
<div key={id} className="relative pl-8 sm:pl-32 py-6 group">
|
||||
<div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-indigo-600 after:border-4 after:box-content after:border-slate-50 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
|
||||
<time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-emerald-600 bg-emerald-100 rounded-full">{date}</time>
|
||||
<div className="text-xl font-bold text-slate-900 dark:text-white">{school}</div>
|
||||
</div>
|
||||
<p className="text-sm "></p>
|
||||
<div className="text-slate-500 dark:text-slate-100">{period}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Timeline;
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
|
@ -2,26 +2,20 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
.wrapper {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
|
||||
.barCompleted {
|
||||
background-color: lightblue;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 20px;
|
||||
color: green;
|
||||
}
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from 'next/link';
|
||||
import Progress from '../components/ProgressBar/ProgressBar';
|
||||
import Photo from '../components/Photo'
|
||||
|
||||
export default function Hobbies() {
|
||||
return (
|
||||
<main>
|
||||
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
||||
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-5xl font-bold mt-2">Hobbies</h2>
|
||||
<p className="text-base mt-4">
|
||||
Let's switch from the mathematical (nerdy) side of things and look at some creativity and arts! In my free time, I like to do <span className="font-bold underline decoration-2 decoration-indigo-500">graphic design</span>, language learning, music, as well as <span className="font-bold underline decoration-2 decoration-red-500">cosplaying</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold my-2">Cosplaying</h2>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className="text-base">I started cosplaying in 2021, specifically <span className="font-bold underline decoration-2 decoration-red-500">Marvel</span> and <span className="font-bold underline decoration-2 decoration-blue-500">DC</span> characters.
|
||||
I have been really <span className="font-bold underline decoration-2 decoration-indigo-500">fascinated</span> by the world of <span className="font-bold underline decoration-2 decoration-sky-500">superheroes</span> since I was a little kid and getting to be these characters in real life is like a <span className="font-bold underline decoration-2 decoration-pink-500">childhood full-filling dream</span>!</p>
|
||||
<p className="text-base">I have also participated in many cosplay events, such as: CosNatsu, CosSuki, Thailand Comic Con & Thailand Game Show.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid col-span-3 gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-main.jpg" href="https://www.instagram.com/p/CqvbNxnyCXl" alt="The Amazing Spider-Man 2" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center max-md:hidden">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/win&art.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=3" alt="Spider-Men" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/win-and-art-thinking.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=2" alt="Thinking" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/win-and-art-4.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=1" alt="Spider-Bros" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-3 md:grid-cols-4 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=1" alt="TASM2 Pose" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/hulk-asiatique.jpg" href="https://www.instagram.com/p/CrTS2T9ScLs/?img_index=1" alt="TASM2 Pose" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=4" alt="Symbiote" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-2 gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/spiderverse.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid02aE4Hocw54B8M3g5DcyPKEfRDRZ6Do4xKnbyCsHycrbgt7n5Te7SXvceWwkFbmnNMl" alt="Spider-Verse" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/spiderverse-photo.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid0ahuYTHefP9Mf8eXLeYkpi9iFKGxKpDqxKkUu7yKh78CjyfQSuofG4wsGG5QxuZ8ol" alt="Spider-Man: Into the Spider-Verse" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center max-md:hidden">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/gtoqw.jpg" href="https://www.instagram.com/p/Cs7ZYrdSEaT/?img_index=1" alt="Across the Spider-Verse Fan Meet" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/peter-b-main.jpg" href="https://www.facebook.com/photo.php?fbid=1485878428813697&set=pb.100021746621221.-2207520000&type=3" alt="Peter B. Parker" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/gtoqw2.jpg" href="https://www.facebook.com/photo.php?fbid=1433342307462095&set=t.100021746621221&type=3" alt="Guardians Of The Quantum World" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='my-2'>
|
||||
<h2 className="text-3xl font-bold my-2">Graphic Design</h2>
|
||||
<p className="text-base">I make various types of work, ranging from <span className="font-bold underline decoration-2 decoration-indigo-500">infographics</span> to <span className="font-bold underline decoration-2 decoration-pink-500">fashion show</span> logos. </p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="Adobe Illustrator" progress="60" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="Krita" progress="90" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="paint.net" progress="90" />
|
||||
</div>
|
||||
</div>
|
||||
<div/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<div className="my-2">
|
||||
<h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className="text-base">I designed the logo for <Link href="https://www.facebook.com/attaste.rmutt"><span className="font-bold underline decoration-2 decoration-sky-500">Attaste's 5th fashion show</span></Link>, organized by the students of <span className="font-bold underline decoration-2 decoration-indigo-500">RMUTT (Rajamangala University of Technology Thanyaburi)</span>.
|
||||
The event was held on the 5th of November on the 7th floor of <span className="font-bold underline decoration-2 decoration-red-700">Chatuchak's ตึกแดงวินเทจ</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/attaste/attaste-background-2.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/attaste/attaste-background.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/attaste/attaste-logo.jpg" href="https://www.facebook.com/attaste.rmutt/" alt="Attaste Logo" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/attaste/attaste-full-page.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/attaste/attaste-full.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex col-span-6 justify-center">
|
||||
<p className='text-sm text-slate-400'>Photos by <Link href="https://www.facebook.com/attaste.rmutt"><span className="underline">ATTASTE</span></Link> & <Link href="https://www.facebook.com/Fashionrmutt"><span className="underline">FDCI</span></Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='my-2'>
|
||||
<h2 className="text-3xl font-bold my-2">Language Learning</h2>
|
||||
<p className="text-base">Languages are very important in my life, as they enable me to <span className="font-bold underline decoration-2 decoration-sky-500">communicate</span> with my friends, family, co-workers, in a <span className="font-bold underline decoration-2 decoration-pink-500">clear and effective</span> manner as well as learning them have also made me appreciate the ways that language can be used, whether it is through literature, formal documents or day-to-day media </p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6">
|
||||
<div className="col-span-6">
|
||||
<div className="mb-2">
|
||||
<h2 className="text-2xl font-bold my-2">Infographics</h2>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className="text-base">In learning these languages, I have made a couple of <span className="font-bold underline decoration-2 decoration-pink-500">infographics</span>, regarding the etymology of words, the meaning of various sentences and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<div className='col-span-6 mb-2'>
|
||||
<h3 className="text-xl font-bold my-2">Thai - Sanskrit - Pali</h3>
|
||||
<p className="text-base">Here are the collection of the <span className='italic'>Sawasdee</span> posters containing the etymology for each name of the days of the week. </p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 md:grid-cols-5 gap-6">
|
||||
<div className="grid col-span-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/monday.jpg" href="https://www.facebook.com/photo?fbid=617881087113710&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/tuesday.jpg" href="https://www.facebook.com/photo?fbid=617881563780329&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/wednesday.jpg" href="https://www.facebook.com/photo?fbid=617881700446982&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/thursday.jpg" href="https://www.facebook.com/photo?fbid=617881093780376&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/friday.jpg" href="https://www.facebook.com/photo/?fbid=617881620446990&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/saturday.jpg" href="https://www.facebook.com/photo/?fbid=617881097113709&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/graphic-design/supta/sunday.jpg" href="https://www.facebook.com/photo?fbid=617881310447021&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex col-span-6 justify-center">
|
||||
<p className='text-xl'>View the <Link href="https://www.facebook.com/WinsDominoesOfficial/posts/pfbid02XrTDUFy3JvgBys7bFKAm1ZuCXDFqXLPkQLHKoB6en21hNFwYjx8xEaK3ssbfS4E8l"><span className="font-bold underline decoration-2 decoration-sky-500">Full Collection</span></Link></p>
|
||||
</div>
|
||||
|
||||
<div className='col-span-6 my-2'>
|
||||
<p className="text-base">I have also made informational posts about etymologies as well as many pieces of humorous Thai poetry on both Facebook and Instagram.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 max-md:flex max-md:flex-col max-md:justify-center gap-6">
|
||||
<div className="grid col-span-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/language/etymology/december.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0F5B2pYJpxFn4zTz4gRnRJiyrJk39cyBU12h3UF2CMCZZHuDX3Ucf7w5bkHCuXCLWl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/language/poetry/rain.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0xhGCHH5ripFCLY98k9R2gLvwBVUEQC7cHj2XNAeMjdWWFzg6ytqdbs3pUmVo7sQ4l" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-4 content-center max-md:hidden">
|
||||
<div className="grid grid-cols-4 gap-x-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/language/poetry/megabangna.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02bBs5rRF1HvusMHszwTFoQvX6dRoyMRfvDeJW44UAVG1V2cnTGW1heezpUnn8rXX7l" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/language/poetry/cosplay.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02Rb7QKDbxU2FAttBJZ7UEitWtZ3nd9JXBMyB73eckRwqsnYbxTBvXwWFwU2SVF8BFl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/language/etymology/sukhee.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0Gx4DUbn8Y3xYiv2SctfqZpaXyNbSmosUDmVhHSt45Fk71jjDfNth9n1mpder2Howl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/language/etymology/jaturmitr.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02DQjru8LZvyStPFcvWXWXkTtVRWjAkqSYeST9p5Kw5ZLYb9zMeQyF4mBQrsGMVsTHl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/language/poetry/bus.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02sBVdxeKb2Q7hWnR2hPbbCohPrj4g5CMC2gbXkE9bzKuiZDXS1PewXZpaWz4DKpL2l" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/language/etymology/manusya.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02fw5D5uXxwoKQjuSQe16Pf4eCaaH9fyM6jt3yZDgeeZZdhnSPXg7AiM1tqhtYyYyrl" alt="" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-span-4 grid grid-col-2 gap-4 justify-center'>
|
||||
<h2 className='text-base'>Want to see more? Check them out in my personal profile or my page!</h2>
|
||||
|
||||
<div className='flex flex-row gap-4 justify-center'>
|
||||
<Link href="https://facebook.com/WinsDominoes" className="">
|
||||
<button className="bg-[#0866FF] font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
|
||||
</svg>
|
||||
<p className='flex flex-col justify-center'>Win Pattanaphol</p>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/WinsDominoesOfficial" className="">
|
||||
<button className="bg-[#0866FF] font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
|
||||
</svg>
|
||||
<p className='flex flex-col justify-center'>อะไรก็ได้กับวิน</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,22 +1,30 @@
|
|||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import Navbar from "./components/Navbar"
|
||||
import Footer from "./components/Footer"
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
import type { Metadata } from 'next';
|
||||
// import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import './components.css';
|
||||
|
||||
// const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
title: "Win's Personal Website",
|
||||
description: 'Powered by Next.js',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
return (
|
||||
<html className="text-black bg-white dark:text-white dark:bg-slate-900" lang="en">
|
||||
<body className="antialiased mt-8 mb-8 lg:max-w-4xl min-lg:flex min-lg:flex-col lg:mx-auto max-lg:grid max-lg:place-items-center max-sm:place-items-start">
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import Link from 'next/link';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<>
|
||||
<div className='w-4/5 mx-auto mt-20 flex flex-col justify-center items-center space-y-4'>
|
||||
<h1 className='text-5xl font-semibold'>404 - Page Not Found</h1>
|
||||
<h4 className='py-5 text-lg text-red-500 font-semibold capitalize'>
|
||||
Whoopsie!
|
||||
</h4>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,113 +1,167 @@
|
|||
import Image from 'next/image'
|
||||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Timeline from './components/Timeline'
|
||||
import Photo from './components/Photo'
|
||||
import ContactIcons from './components/ContactIcons';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
||||
Get started by editing
|
||||
<code className="font-mono font-bold">app/page.tsx</code>
|
||||
</p>
|
||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
||||
<a
|
||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className="dark:invert"
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<main>
|
||||
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
||||
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
||||
<div className="col-span-1 max-lg:collapse">
|
||||
<Image
|
||||
src="/images/picture.png"
|
||||
width={200}
|
||||
height={200}
|
||||
alt="Win's Mastodon Profile"
|
||||
className="rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
|
||||
<Image
|
||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 grid gap-4 content-center">
|
||||
<p className="text-5xl font-bold">Win Pattanaphol</p>
|
||||
<p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">full-stack developer</a>, high schooler, enjoyer of 60s-80s music, language nerd, an electrician, and a professional terrible-jokes-maker from Thailand 🇹🇭</p>
|
||||
<ContactIcons />
|
||||
</div>
|
||||
|
||||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Docs{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-3xl font-bold mt-2">About</h2>
|
||||
<p className="text-base mt-4">
|
||||
My main field of work is creating <a className="font-bold underline decoration-2 decoration-sky-500">web applications</a>. I specialize in <a className="font-bold underline decoration-2 decoration-indigo-500">backend development</a> with <a className="font-bold underline decoration-2 decoration-pink-500">Node.js</a> and <a className="font-bold underline decoration-2 decoration-indigo-500">PHP</a>, as well as working with <a className="font-bold underline decoration-2 decoration-indigo-500">relational databases</a>,
|
||||
such as <a className="font-bold underline decoration-2 decoration-pink-500">MySQL / MariaDB</a>.
|
||||
</p>
|
||||
<p className="text-base mt-4">
|
||||
I also have experience working with <a className="font-bold underline decoration-2 decoration-sky-500">server infrastructure</a>. I am currently administering the IT infrastructure (servers, networking, firewalls)
|
||||
at my father's company as well as running <a className="font-bold underline decoration-2 decoration-indigo-500">my own server setup</a>, also known as a <a className="font-bold underline decoration-2 decoration-pink-500">homelab</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Learn{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2-2.jpg" href="/hobbies" alt="Spider-Man 2 PS5 Event"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/homelab.jpg" href="/projects" alt="Homelab"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="/hobbies" alt="The Amazing Spider-Man 2"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/hdd.jpg" href="/projects" alt="Storage Server"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Templates{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Explore starter templates for Next.js.
|
||||
</p>
|
||||
</a>
|
||||
<div className="flex justify-center my-4">
|
||||
<p className="text-lg font-bold">View my <a className="font-bold underline decoration-2 decoration-sky-500">projects</a> and <a className="font-bold underline decoration-2 decoration-pink-500">hobbies</a> by clicking on the images!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Deploy{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
<div className="grid grid-cols-4 max-lg:flex max-lg:flex-col">
|
||||
<div className="col-span-4">
|
||||
<p className="text-3xl font-bold">
|
||||
Education
|
||||
</p>
|
||||
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 max-md:flex max-md:flex-col justify-items-center">
|
||||
<div className="col-span-3 justify-self-start">
|
||||
<p className="text-3xl font-bold">
|
||||
Contact
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 lg:place-items-center">
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-xl font-bold">
|
||||
Like my work?
|
||||
</p>
|
||||
<p className="text-base text-slate-300">
|
||||
Check them out on my GitHub!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-col-3'>
|
||||
<Link href="https://github.com/WinsDominoes" className="">
|
||||
<button className="bg-[#24292E] font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>GitHub</title>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||||
</svg>
|
||||
<p className='flex flex-col justify-center'>@WinsDominoes</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-xl font-bold">
|
||||
See more posts?
|
||||
</p>
|
||||
<p className="text-base text-slate-300">
|
||||
Check updates on my Mastodon!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-col-3'>
|
||||
<Link href="https://social.winscloud.net/@winsdominoes" className="">
|
||||
<button className="bg-[#563ACC] font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" className="w-7 h-7" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Mastodon</title>
|
||||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
||||
</svg>
|
||||
<p className='flex flex-col justify-center'>@winsdominoes</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-xl font-bold">
|
||||
Get in touch?
|
||||
</p>
|
||||
<p className="text-base text-slate-300">
|
||||
Send me a message on Discord!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-col-3'>
|
||||
<Link href="https://github.com/WinsDominoes" className="">
|
||||
<button className="bg-[#5865F2] font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>Discord</title>
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
|
||||
</svg>
|
||||
<p className='flex flex-col justify-center'>winsdominoes</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from 'next/link';
|
||||
import Video from 'next-video';
|
||||
import Progress from '../components/ProgressBar/ProgressBar';
|
||||
import Photo from '../components/Photo';
|
||||
|
||||
export default function Projects() {
|
||||
return (
|
||||
<main>
|
||||
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
||||
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-5xl font-bold mt-2">Projects & Work</h2>
|
||||
<p className="text-base mt-4">
|
||||
Here are the projects that I have made over the years. I mostly focus on the <a className="font-bold underline decoration-2 decoration-indigo-500">web development</a> and <a className="font-bold underline decoration-2 decoration-sky-500">computer system</a> side of things, however, I have picked up some <a className="font-bold underline decoration-2 decoration-pink-500">embedded programming</a> and <a className="font-bold underline decoration-2 decoration-indigo-500">electronics</a> over the past couple of months as well.
|
||||
</p>
|
||||
<p className='text-base mt-4'>
|
||||
I have also been involved with a couple of <a className="font-bold underline decoration-2 decoration-sky-500">STEM events</a>, such as <a className="font-bold underline decoration-2 decoration-indigo-500">competitive coding competitions</a> and <a className="font-bold underline decoration-2 decoration-pink-500">science events</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='mb-4'>
|
||||
<h2 className="text-3xl font-bold my-2">System Administration</h2>
|
||||
<p className="text-base">All of my homelab equipment are inter-connected under the <Link href="https://winscloud.net"><span className="font-bold underline decoration-2 decoration-green-500">WinsCloud</span></Link> ecosystem.
|
||||
This is where I run most of my <span className="font-bold underline decoration-2 decoration-sky-500">self-hosting</span> instances of various <span className="font-bold underline decoration-2 decoration-indigo-500">open-source software</span> such as file storage servers, music streaming services, network monitors, and so on. </p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<h2 className="text-lg font-semibold mb-2">Operating Systems</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="Windows" progress="100" />
|
||||
<Progress text="Windows Server" progress="100" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="Debian-based Linux Distros" progress="100" />
|
||||
<Progress text="RHEL-based Linux Distros" progress="90" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="FreeBSD" progress="80" />
|
||||
<Progress text="OpenBSD" progress="80" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/iot/raspberrypi.jpg" href="https://pi.winscloud.net" alt="Raspberry Pi"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/pve.jpg" href="https://winscloud.net" alt="Proxmox"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/homelab.jpg" href="https://winscloud.net" alt="Homelab"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/portainer.png" href="https://winscloud.net" alt="Portainer"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/software/opnsense.jpg" href="https://winscloud.net" alt="OPNsense"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/hdd.jpg" href="https://cloud.winsdominoes.net" alt="Storage Server"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<h2 className="text-lg font-semibold mb-2">Firewalls</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 flex flex-col">
|
||||
<Progress text="pfSense / OPNsense" progress="90" />
|
||||
<Progress text="RouterOS - MikroTik" progress="85" />
|
||||
<Progress text="UniFiOS" progress="40" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h2 className="text-lg font-semibold mb-2">Virtualization</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 flex flex-col">
|
||||
<Progress text="Proxmox" progress="85" />
|
||||
<Progress text="Docker" progress="70" />
|
||||
<Progress text="VMWare" progress="60" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h2 className="text-lg font-semibold mb-2">Other</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 flex flex-col">
|
||||
<Progress text="CloudFlare Zero Trust" progress="90" />
|
||||
<Progress text="SMB Samba" progress="85" />
|
||||
<Progress text="Git Version Control" progress="75" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold my-2">Coding</h2>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<h2 className="text-lg font-semibold mb-2">Web Development</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="HTML" progress="100" />
|
||||
<Progress text="CSS" progress="75" />
|
||||
<Progress text="JavaScript" progress="85" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="PHP" progress="90" />
|
||||
<Progress text="Node.js" progress="60" />
|
||||
<Progress text="Next.js" progress="30" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="MySQL" progress="50" />
|
||||
<Progress text="MariaDB" progress="40" />
|
||||
<Progress text="MongoDB" progress="10" />
|
||||
</div>
|
||||
</div>
|
||||
<div/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/tts-sanskrit.jpg" href="https://sanskrit.winsdominoes.net" alt="Sanskrit Text-To-Speech"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/comic-downloader.jpg" href="https://github.com/WinsDominoes/comic-downloader" alt="Comic Downloader"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/photosphere.jpg" href="https://map.moomoo.me" alt="PhotoSphereStudio"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/thai-oil-prices.png" href="https://github.com/WinsDominoes/thai-oil-prices" alt="Thailand's Oil Price Tracker"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-lg font-semibold mb-2">Multi-Purpose Programming</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 flex flex-col">
|
||||
<Progress text="C" progress="20" />
|
||||
<Progress text="C++" progress="5" />
|
||||
<Progress text="Python" progress="30" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-lg font-semibold mb-2">Scripting / Configuration</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 flex flex-col">
|
||||
<Progress text="YAML" progress="60" />
|
||||
<Progress text="Markdown" progress="80" />
|
||||
<Progress text="Bash" progress="60" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold my-2">Robotics</h2>
|
||||
<p className="text-base my-2">
|
||||
I have also been involved with a couple of coding competitions and preparations at my current high school, Rugby School Thailand.
|
||||
</p>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="LEGO Mindstorms NXT" progress="90" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="LEGO Mindstorms EV3" progress="90" />
|
||||
</div>
|
||||
<div className="col-span-2 flex flex-col">
|
||||
<Progress text="VEX IQ" progress="50" />
|
||||
</div>
|
||||
</div>
|
||||
<div/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<h2 className="text-xl font-bold">First LEGO League</h2>
|
||||
<p className="text-base my-2">
|
||||
Currently a part of the First LEGO League Team
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-5 gap-6 max-lg:flex max-lg:flex-col">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/robotics/lego-league/1.jpg" href="#" alt="Coding Process" dim="false"></Photo>
|
||||
</div>
|
||||
<div className='max-lg:hidden'>
|
||||
<Photo src="/images/photos/school-work/robotics/lego-league/2.jpg" href="#" alt="Model" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid col-span-3 gap-4 content-center">
|
||||
<div className="transition ease-in-out delay-150 hover:scale-105 duration-300">
|
||||
<video
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
className='rounded'
|
||||
src="/images/photos/school-work/robotics/lego-league/robot-movement.mp4">
|
||||
</video>
|
||||
<span className="text-xs m-2 text-zinc-400">First LEGO League Robot Test Run</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div className='max-lg:hidden'>
|
||||
<Photo src="/images/photos/school-work/robotics/lego-league/4.png" href="#" alt="Model" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/robotics/lego-league/3.jpg" href="#" alt="Planning Process" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-6 flex justify-center">
|
||||
<p className="text-sm text-zinc-400">
|
||||
Photos by <Link href="https://www.facebook.com/rugbyschoolthailand" className="underline hover:text-zinc-500">Rugby School Thailand</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<h2 className="text-xl font-bold">VEX Robotics Competition</h2>
|
||||
<p className="text-base my-2">
|
||||
I participated in the VEX Robot Building Competition, organized by the VEX Robotics Team and Rugby School Thailand's Computer Science department.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 gap-6 max-lg:flex max-lg:flex-col">
|
||||
<div className="grid content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/robotics/vex-challenge/back.jpg" href="#" alt="I'm at the back!" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/robotics/vex-challenge/corner.jpg" href="#" alt="I'm in the corner!" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-6 flex justify-center">
|
||||
<p className="text-sm text-zinc-400">
|
||||
Photos by <Link href="https://www.facebook.com/rugbyschoolthailand" className="underline hover:text-zinc-500">Rugby School Thailand</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-4'>
|
||||
<h2 className="text-3xl font-bold">Science</h2>
|
||||
<p className="text-base">
|
||||
I participated in Rugby School Thailand's <a className="font-bold underline decoration-2 decoration-indigo-500">Senior Open Day</a>, where all academic departments get to present their syllabus and curriculum to visitors that are looking into joining the school.
|
||||
I voluntarily came to help the <a className="font-bold underline decoration-2 decoration-sky-500">Physics department</a> in presenting <a className="font-bold underline decoration-2 decoration-pink-500">IGCSE and A-Level Physics concepts</a>.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-3 gap-6 max-lg:gap-2 max-lg:flex max-lg:flex-col">
|
||||
<div className="col-span-2 grid max-lg:gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/science/2.JPG" href="#" alt="Smile!" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid max-lg:gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/science/1.JPG" href="#" alt="Concentrating..." dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/school-work/science/3.JPG" href="#" alt="Electrostatic!" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6 flex justify-center">
|
||||
<p className="text-sm text-zinc-400">
|
||||
Photos by <Link href="https://www.facebook.com/rugbyschoolthailand" className="underline hover:text-zinc-500">Rugby School Thailand</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,13 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
const nextConfig = {
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "**",
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,27 +1,33 @@
|
|||
{
|
||||
"name": "website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "14.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.3.0",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.0.3"
|
||||
}
|
||||
"name": "website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ramonak/react-progress-bar": "^5.1.1",
|
||||
"framer-motion": "^10.16.9",
|
||||
"next": "14.0.3",
|
||||
"next-page-transitions": "^1.0.0-beta.2",
|
||||
"next-video": "^0.9.1",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^4.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.0.3",
|
||||
"postcss": "^8",
|
||||
"postcss-import": "^15.1.0",
|
||||
"tailwindcss": "^3.3.0",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1014 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 818 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 766 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 444 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 819 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 932 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 706 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 968 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 977 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 856 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue