diff --git a/README.md b/README.md old mode 100644 new mode 100755 index c403366..5ce4a7c --- a/README.md +++ b/README.md @@ -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! diff --git a/app/components.css b/app/components.css new file mode 100755 index 0000000..aa56e31 --- /dev/null +++ b/app/components.css @@ -0,0 +1 @@ +@import "./components/ProgressBar/ProgressBar.css" \ No newline at end of file diff --git a/app/components/ContactIcons.tsx b/app/components/ContactIcons.tsx new file mode 100755 index 0000000..e756a42 --- /dev/null +++ b/app/components/ContactIcons.tsx @@ -0,0 +1,56 @@ +let ContactIcons = () => { + return ( + + ) +} + +export default ContactIcons; \ No newline at end of file diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx new file mode 100755 index 0000000..ec85e3e --- /dev/null +++ b/app/components/Footer.tsx @@ -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 ( +
+
+

Win Pattanaphol 2023

+
+ +
+ wins.dominoes2007@gmail.com +
+
+ ); +} + +export default Footer; \ No newline at end of file diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx new file mode 100755 index 0000000..f9c6b8c --- /dev/null +++ b/app/components/Navbar.tsx @@ -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 ( +
+ +
+ ); +} + +export default Navbar; \ No newline at end of file diff --git a/app/components/Photo.tsx b/app/components/Photo.tsx new file mode 100755 index 0000000..ae5a6a6 --- /dev/null +++ b/app/components/Photo.tsx @@ -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 ( +
+
+
+ {alt} + + {alt} +
+
+
+ ) + } else { + return ( +
+ +
+
+ {alt} + + {alt} +
+
+ +
+ ) + } + + +} + +export default Photo; \ No newline at end of file diff --git a/app/components/ProgressBar/ProgressBar.css b/app/components/ProgressBar/ProgressBar.css new file mode 100755 index 0000000..092ea1b --- /dev/null +++ b/app/components/ProgressBar/ProgressBar.css @@ -0,0 +1,3 @@ +.barCompleted { + background-color: lightblue; +} \ No newline at end of file diff --git a/app/components/ProgressBar/ProgressBar.tsx b/app/components/ProgressBar/ProgressBar.tsx new file mode 100755 index 0000000..ee63335 --- /dev/null +++ b/app/components/ProgressBar/ProgressBar.tsx @@ -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 =
+ + return ( +
+

{ text }

+
+ +
+
+ ) +} + +export default SkillProgress; \ No newline at end of file diff --git a/app/components/Timeline.tsx b/app/components/Timeline.tsx new file mode 100755 index 0000000..f591e78 --- /dev/null +++ b/app/components/Timeline.tsx @@ -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 ( +
+
+ {data.map(({ id, school, period, date }) => ( +
+
+ +
{school}
+
+

+
{period}
+
+ ))} +
+
+ ); +} + +export default Timeline; \ No newline at end of file diff --git a/app/errors/404/page.tsx b/app/errors/404/page.tsx new file mode 100755 index 0000000..e69de29 diff --git a/app/favicon.ico b/app/favicon.ico old mode 100644 new mode 100755 diff --git a/app/globals.css b/app/globals.css old mode 100644 new mode 100755 index fd81e88..1d6a6fb --- a/app/globals.css +++ b/app/globals.css @@ -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; +} \ No newline at end of file diff --git a/app/hobbies/page.tsx b/app/hobbies/page.tsx new file mode 100755 index 0000000..44d3a1d --- /dev/null +++ b/app/hobbies/page.tsx @@ -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 ( +
+
+
+
+

Hobbies

+

+ 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 graphic design, language learning, music, as well as cosplaying. +

+
+
+ +
+
+

Cosplaying

+
+

I started cosplaying in 2021, specifically Marvel and DC characters. + I have been really fascinated by the world of superheroes since I was a little kid and getting to be these characters in real life is like a childhood full-filling dream!

+

I have also participated in many cosplay events, such as: CosNatsu, CosSuki, Thailand Comic Con & Thailand Game Show.

+
+ +
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+

Graphic Design

+

I make various types of work, ranging from infographics to fashion show logos.

+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+

ATTASTE - 5th Generation

+
+

I designed the logo for Attaste's 5th fashion show, organized by the students of RMUTT (Rajamangala University of Technology Thanyaburi). + The event was held on the 5th of November on the 7th floor of Chatuchak's ตึกแดงวินเทจ

+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+

Photos by ATTASTE & FDCI

+
+
+
+
+ +
+
+

Language Learning

+

Languages are very important in my life, as they enable me to communicate with my friends, family, co-workers, in a clear and effective 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

+
+ +
+
+
+

Infographics

+
+

In learning these languages, I have made a couple of infographics, regarding the etymology of words, the meaning of various sentences and more.

+
+
+
+ +
+
+

Thai - Sanskrit - Pali

+

Here are the collection of the Sawasdee posters containing the etymology for each name of the days of the week.

+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+

View the Full Collection

+
+ +
+

I have also made informational posts about etymologies as well as many pieces of humorous Thai poetry on both Facebook and Instagram.

+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+

Want to see more? Check them out in my personal profile or my page!

+ +
+ + + + + + + +
+
+
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx old mode 100644 new mode 100755 index 40e027f..de5ee4f --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 ( - - {children} - - ) + return ( + + + + {children} +