winsdominoes
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

catchphrase + resposive layout alterations + redesigned text chapters

This commit is contained in:
WinsDominoes 2023-12-22 23:24:29 +07:00
parent d2aaa76bd9
commit 296dc77a5f
7 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Footer.tsx
View File

@ -28,7 +28,7 @@ const Footer = () => {
</div> </div>
<div> <div>
<p className="text-sm px-4 cursor-pointer font-medium text-black dark:text-gray-300">Made with ❤️ and <Link href="https://github.com/WinsDominoes/website" className="font-bold underline decoration-2 decoration-sky-500">open-source</Link></p> <p className="text-sm px-4 cursor-pointer font-medium text-black dark:text-gray-300">Made with ❤️, <Link href="https://github.com/WinsDominoes/website" className="font-bold">open-source</Link> and self-hosted by me!</p>
</div> </div>
</div> </div>
); );

2
app/components/Navbar.tsx
View File

@ -35,7 +35,7 @@ const Navbar = () => {
{links.map(({ id, text, link }) => ( {links.map(({ id, text, link }) => (
<li <li
key={id} key={id}
className="nav-links px-4 cursor-pointer capitalize font-medium text-base text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline" className="nav-links px-4 cursor-pointer capitalize font-medium text-lg text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
> >
<Link href={link}>{text}</Link> <Link href={link}>{text}</Link>
</li> </li>

14
app/education/page.tsx
View File

@ -10,12 +10,12 @@ export default function Education() {
return ( return (
<main> <main>
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4"> <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="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col">
<div className="col-span-3"> <div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
<h2 className="text-5xl font-bold mt-2">Education</h2> <h2 className="text-5xl font-bold mt-2">Education</h2>
<p className="text-base mt-4"> <p className="text-base mt-4">
I have studied in schools located in <span className='font-bold underline decoration-2 decoration-green-500'>Bangkok</span> and <span className='font-bold underline decoration-2 decoration-red-500'>Chonburi</span>. I have studied in schools located in Bangkok and Chonburi.
I have also completed several <span className='font-bold underline decoration-2 decoration-sky-500'>academic proficiency tests</span> as well as the <Link href="https://ged.com"><span className='font-bold underline decoration-2 decoration-sky-500'>General Education Development (GED) Test</span></Link>, a diploma of <span className='font-bold underline decoration-2 decoration-red-500'>high school equivalency</span>. I have also completed several <span className='font-bold underline decoration-2 decoration-sky-500'>academic proficiency tests</span> as well as the <Link href="https://ged.com"><span className='font-bold'>General Education Development (GED) Test</span></Link>, a diploma of <span className='font-bold underline decoration-2 decoration-red-500'>high school equivalency</span>.
</p> </p>
</div> </div>
</div> </div>
@ -27,10 +27,10 @@ export default function Education() {
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-4">
<div className="col-span-6"> <div className="col-span-6">
<div className="grid grid-cols-2 max-lg:flex max-lg:flex-col gap-6"> <div className="grid grid-cols-2 max-sm:flex max-sm:flex-col gap-6">
<div className="col-span-2 flex flex-col gap-2"> <div className="col-span-2 flex flex-col gap-2">
<span className="text-2xl font-bold">GED Results</span> <span className="text-2xl font-bold">GED Results</span>
<div className="col-span-2 grid grid-cols-4 max-lg:flex max-lg:flex-col gap-4"> <div className="col-span-2 grid grid-cols-4 max-sm:flex max-sm:flex-col gap-4">
<span className="text-xl">Mathematics: <span className='font-bold underline decoration-2 decoration-sky-500'>176</span>/200</span> <span className="text-xl">Mathematics: <span className='font-bold underline decoration-2 decoration-sky-500'>176</span>/200</span>
<span className="text-xl">Science: <span className='font-bold underline decoration-2 decoration-green-500'>172</span>/200</span> <span className="text-xl">Science: <span className='font-bold underline decoration-2 decoration-green-500'>172</span>/200</span>
<span className="text-xl">English: <span className='font-bold underline decoration-2 decoration-red-500'>166</span>/200</span> <span className="text-xl">English: <span className='font-bold underline decoration-2 decoration-red-500'>166</span>/200</span>

12
app/hobbies/page.tsx
View File

@ -10,8 +10,8 @@ export default function Hobbies() {
<main> <main>
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4"> <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="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
<div className="col-span-3"> <div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
<h2 className="text-5xl font-bold mt-2">Hobbies</h2> <h2 className="text-5xl font-bold mt-2">Hobbies</h2>
<p className="text-base mt-4"> <p className="text-base mt-4">
Let&apos;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>. Let&apos;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> </p>
@ -23,7 +23,7 @@ export default function Hobbies() {
<h2 className="text-3xl font-bold my-2">Cosplaying</h2> <h2 className="text-3xl font-bold my-2">Cosplaying</h2>
<div className='flex flex-col gap-4'> <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. <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> I have been <span className="font-bold">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">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> <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>
@ -99,9 +99,9 @@ export default function Hobbies() {
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-4">
<div className="col-span-6"> <div className="col-span-6">
<div className="my-2"> <div className="my-2">
<h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2> <h2 className="text-xl font-bold my-2">ATTASTE - 5th Generation</h2>
<div className='flex flex-col gap-4'> <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&apos;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>. <p className="text-base">I designed the logo for <Link href="https://www.facebook.com/attaste.rmutt"><span className="font-bold">Attaste&apos;s 5th fashion show</span></Link>, organized by the students of RMUTT <span className="italic">(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&apos;s ตึกแดงวินเทจ</span></p> 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&apos;s ตึกแดงวินเทจ</span></p>
</div> </div>
</div> </div>
@ -142,7 +142,7 @@ export default function Hobbies() {
<div> <div>
<div className='my-2'> <div className='my-2'>
<h2 className="text-3xl font-bold my-2">Language Learning</h2> <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> <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">clear and effective</span> manner. Learning languages have also made me appreciate the ways that languages can be used, whether it is through literature, formal documents or day-to-day media </p>
</div> </div>
<div className="grid grid-cols-6"> <div className="grid grid-cols-6">

4
app/layout.tsx
View File

@ -10,8 +10,8 @@ import './components.css';
// const inter = Inter({ subsets: ['latin'] }); // const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Win's Personal Website", title: "Thanawin Pattanaphol - ธนาวินทร์ พัฒนผล",
description: "A full-stack developer, high schooler, enjoyer of 60s-80s music, language nerd, an electrician, and a professional terrible-jokes-maker from Thailand.", description: "A hobbyist full-stack developer, high schooler, enjoyer of 60s-80s music, language nerd, a hobbyist electrician from Thailand.",
}; };
export default function RootLayout({ export default function RootLayout({

29
app/page.tsx
View File

@ -1,7 +1,6 @@
"use client" "use client"
import Image from 'next/image'; import Image from 'next/image';
import React, { useState, useEffect } from "react"; import React from "react";
import Timeline from './components/Timeline'
import Photo from './components/Photo' import Photo from './components/Photo'
import ContactIcons from './components/ContactIcons'; import ContactIcons from './components/ContactIcons';
import Link from 'next/link'; import Link from 'next/link';
@ -10,7 +9,7 @@ export default function Home() {
return ( return (
<main> <main>
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4"> <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="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:items-center max-sm:items-start">
<div className="col-span-1"> <div className="col-span-1">
<Image <Image
src="/images/picture.png" src="/images/picture.png"
@ -21,7 +20,7 @@ export default function Home() {
/> />
</div> </div>
<div className="col-span-2 grid gap-4 content-center"> <div className="col-span-2 grid max-lg:gap-4 max-lg:place-items-center max-sm:place-items-start">
<div> <div>
<p className="text-5xl font-bold">Thanawin Pattanaphol</p> <p className="text-5xl font-bold">Thanawin Pattanaphol</p>
<p className="text-sm mt-2">ธนาวินทร์ พัฒนผล</p> <p className="text-sm mt-2">ธนาวินทร์ พัฒนผล</p>
@ -30,29 +29,33 @@ export default function Home() {
<ContactIcons /> <ContactIcons />
</div> </div>
<div className="col-span-3"> <div className='col-span-3 flex flex-col place-items-center max-sm:place-items-start'>
<h2 className="text-4xl font-bold mt-2">About Me</h2> <code className='text-lg font-bold'>"I don't want to make a PDF, I'll code one instead."</code>
</div>
<div className="col-span-3 mt-[-15px]">
<h2 className="text-4xl font-bold">About Me</h2>
<div className='mt-4 text-lg grid grid-cols-4 max-sm:flex max-sm:flex-col'> <div className='mt-4 text-lg grid grid-cols-4 max-sm:flex max-sm:flex-col'>
<div> <div>
<span className='font-bold underline decoration-2 decoration-green-500'>Nickname</span>: Win <span className='font-bold'>Nickname</span>: Win
</div> </div>
<div> <div>
<span className='font-bold underline decoration-2 decoration-indigo-500'>Age</span>: 16 <span className='font-bold'>Age</span>: 16
</div> </div>
<div> <div>
<span className='font-bold underline decoration-2 decoration-red-500'>Nationality</span>: Thai 🇹🇭 <span className='font-bold'>Nationality</span>: Thai 🇹🇭
</div> </div>
<div> <div>
<span className='font-bold underline decoration-2 decoration-yellow-500'>Religion</span>: Buddhist <span className='font-bold'>Religion</span>: Buddhism
</div> </div>
</div> </div>
<p className="text-base mt-4"> <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">Node.js</a> and <a className="font-bold">PHP</a>, as well as working with <a className="font-bold underline decoration-2 decoration-indigo-500">relational databases</a>, My main field of work is creating <a className="font-bold">web applications</a>. I specialize in <a className="font-bold underline decoration-2 decoration-indigo-500">backend development</a> with <a className="font-bold">Node.js</a> and <a className="font-bold">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">MySQL / MariaDB</a>. such as <a className="font-bold">MySQL / MariaDB</a>.
</p> </p>
<p className="text-base mt-4"> <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) My other field of work is 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&apos;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>. at my father&apos;s company as well as running my own server setup, also known as a homelab.
</p> </p>
</div> </div>
</div> </div>

97
app/projects/page.tsx
View File

@ -11,13 +11,13 @@ export default function Projects() {
<main> <main>
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4"> <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="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
<div className="col-span-3"> <div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
<h2 className="text-5xl font-bold mt-2">Projects & Work</h2> <h2 className="text-5xl font-bold mt-2">Projects & Work</h2>
<p className="text-base mt-4"> <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. Here are the projects that I have made over the years. I mostly focus on the <a className="font-bold underline decoration-2 decoration-sky-500">web development</a> and <a className="font-bold underline decoration-2 decoration-sky-500">computer system</a> side of things, however, I have also picked up <span className="italic">embedded programming</span> and <span className="italic">electronics</span> over the past couple of months as well.
</p> </p>
<p className='text-base mt-4'> <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>. I have also been involved with a couple of <a className="font-bold">STEM events</a>, such as <a className="font-bold">competitive coding competitions</a> and <a className="font-bold">science showcase events</a>.
</p> </p>
</div> </div>
</div> </div>
@ -30,8 +30,8 @@ export default function Projects() {
<div className='mb-4'> <div className='mb-4'>
<h2 className="text-3xl font-bold my-2">Enterprise Systems</h2> <h2 className="text-3xl font-bold my-2">Enterprise Systems</h2>
<p className="text-base"> <p className="text-base">
I work as a <span className='font-bold underline decoration-2 decoration-sky-500'>part-time job</span> at my family business company, <span className='font-bold underline decoration-2 decoration-blue-500'>EMPower Engineering Co.,Ltd</span>. I work as a part-time helper at my family business company, <span className='font-bold underline decoration-2 decoration-blue-500'>EMPower Engineering Co.,Ltd</span>.
I work with designing, operating and maintaining the company&apos;s <span className='font-bold underline decoration-2 decoration-indigo-500'>computer infrastructure</span> along with the company&apos;s I.T. department. I work with designing, operating and maintaining the company&apos;s <span className='font-bold'>computer infrastructure</span> along with the company&apos;s I.T. department.
</p> </p>
</div> </div>
@ -57,7 +57,7 @@ export default function Projects() {
</div> </div>
<div className="grid gap-4 content-center"> <div className="grid gap-4 content-center">
<div> <div>
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Cloud Router Switch"></Photo> <Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Router"></Photo>
</div> </div>
</div> </div>
<div className="grid gap-4 content-center"> <div className="grid gap-4 content-center">
@ -71,8 +71,7 @@ export default function Projects() {
<div className='col-span-6'> <div className='col-span-6'>
<h3 className='text-2xl font-bold my-2'>Software</h3> <h3 className='text-2xl font-bold my-2'>Software</h3>
<p className="text-base"> <p className="text-base">
Along with hardware, there must be... Software! These software are used for many purposes, such as <span className='font-bold underline decoration-2 decoration-yellow-500'>server monitoring</span>, Along with hardware, there must be... Software! These software are used for many purposes, such as <span className='font-bold underline decoration-2 decoration-yellow-500'>server monitoring</span>, <span className='font-bold underline decoration-2 decoration-yellow-500'>file storage and transfer</span>, a DNS server and so on.
<span className='font-bold underline decoration-2 decoration-lime-500'>file storage and transfer</span>, a DNS server and so on.
</p> </p>
</div> </div>
@ -81,21 +80,21 @@ export default function Projects() {
<div className="content-center"> <div className="content-center">
<div className='flex flex-col'> <div className='flex flex-col'>
<Photo src="/images/photos/company/raspberry-pi-file/20231221_151414.jpg" href="https://cloud.winsdominoes.net"></Photo> <Photo src="/images/photos/company/raspberry-pi-file/20231221_151414.jpg" href="https://cloud.winsdominoes.net"></Photo>
<h5 className='text-xl font-bold'>File Transfer</h5> <h5 className='text-lg font-bold'>File Transfer</h5>
<p className='text-base'> <p className='text-base'>
This is a touchscreen Raspberry Pi that handles all <span className='font-bold underline decoration-2 decoration-rose-500'>CNC-related file transfers</span>, designed and installed by me and the I.T. department. This is a touchscreen Raspberry Pi that handles all <span className='font-bold underline decoration-2 decoration-rose-500'>CNC-related file transfers</span>, designed and installed by me and the I.T. department.
</p> </p>
<h5 className='text-lg font-bold mt-2'>Usage</h5> <span className='font-bold mt-2'>Usage</span>
<ul className="list-disc ml-4"> <ul className="list-disc ml-4">
<li> <li>
Engineers, sitting in the office, connects to the Pi using the <span className='font-bold underline decoration-2 decoration-rose-500'>SMB (Samba) protocol</span>. Engineers, sitting in the office, connects to the Pi using the <span className='font-bold'>SMB (Samba) protocol</span>.
</li> </li>
<li> <li>
Engineers copy the files over to the Raspberry Pi over the network. Engineers copy the files over to the Raspberry Pi over the network.
</li> </li>
<li> <li>
The <span className='font-bold underline decoration-2 decoration-sky-500'>CNC machine operators</span> copies the files straight to the CNC machine. The <span className='font-bold'>CNC machine operators</span> copies the files straight to the CNC machine.
</li> </li>
</ul> </ul>
@ -133,7 +132,7 @@ export default function Projects() {
<div className='mt-10'> <div className='mt-10'>
<h2 className="text-3xl font-bold my-2">Homelab</h2> <h2 className="text-3xl font-bold my-2">Homelab</h2>
<p className="text-base">In addition to business systems, I also have a homelab! 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. <p className="text-base">In addition to business systems, I also have a homelab! 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> This is where I run most of my <span className="font-bold">self-hosting</span> instances of various <span className="font-bold">open-source software</span> such as file storage servers, music streaming services, network monitors, and so on. </p>
</div> </div>
<div className="col-span-6 my-4"> <div className="col-span-6 my-4">
@ -143,7 +142,7 @@ export default function Projects() {
</p> </p>
</div> </div>
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col ">
<div className="col-span-6"> <div className="col-span-6">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
<div className="grid gap-4 content-center"> <div className="grid gap-4 content-center">
@ -180,41 +179,33 @@ export default function Projects() {
</div> </div>
<div className='col-span-6'> <div className='col-span-6'>
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4"> <h3 className='text-lg font-bold'>Operating Systems</h3>
<div className="col-span-2 flex flex-col"> <p className='text-base'>
<Progress text="Windows" progress="100" /> I am able to work with <span className="font-bold">Windows Server, Linux and BSD operating systems</span>. All of these operating systems are a part of my homelab as well as my enterprise work systems.
</div> </p>
<div className="col-span-2 flex flex-col">
<Progress text="Linux" progress="100" />
</div>
<div className="col-span-2 flex flex-col">
<Progress text="BSD" progress="90" />
</div>
</div>
<p className='text-base'>
I am able to work with Windows Server, Linux and BSD operating systems. All of these operating systems are a part of my homelab as well as my enterprise work systems.
</p>
</div> </div>
<div className="col-span-3"> <div className="col-span-3">
<Progress text="Firewalls" progress="90" /> <h3 className='text-lg font-bold'>Firewalls</h3>
<p className='text-base'> <p className='text-base'>
I have experience in configuring and managing network firewalls such as: <span className='font-bold underline decoration-2 decoration-indigo-500'>pfSense / OPNsense & MikroTik&apos;s RouterOS</span> I have experience in configuring and managing network firewalls such as: <span className='font-bold underline decoration-2 decoration-indigo-500'>pfSense / OPNsense & MikroTik&apos;s RouterOS</span>
</p> </p>
</div> </div>
<div className="col-span-3"> <div className="col-span-3">
<Progress text="Virtualization" progress="90" /> <h3 className='text-lg font-bold'>Virtualization</h3>
<p className='text-base'> <p className='text-base'>
I am able to work with virtualization softwares such as: <span className='font-bold underline decoration-2 decoration-sky-500'>Proxmox, Docker and VMWare</span>. I am able to work with virtualization softwares such as: <span className='font-bold underline decoration-2 decoration-sky-500'>Proxmox, Docker and VMWare</span>.
</p> </p>
</div> </div>
<div className='col-span-6 flex flex-col'> <div className='col-span-6 flex flex-col'>
<h2 className='text-xl font-bold'>Minecraft Server</h2> <h2 className='text-lg font-bold'>Minecraft Server</h2>
<p className='text-base'> <p className='text-base'>
As a fun side project, I also run a Minecraft Server called <span className='font-bold underline decoration-2 decoration-orange-500'>ASEAN SMP</span>, a server available to every Minecraft player in the Southeast Asian Region. As a fun side project, I also run a Minecraft Server called <span className='font-bold underline decoration-2 decoration-orange-500'>ASEAN SMP</span>, a server available to every Minecraft player in the Southeast Asian Region.
It is currently running on my homelab with around 2 - 5 players daily. It is currently running on my homelab with around 2 - 5 players daily. This server also provides the players with a map of the server which gives players more overview of the Minecraft world itself.
</p> </p>
<ul className='list-disc ml-4'> <ul className='list-disc ml-4'>
<li> <li>
IP: <code>mc.winsdominoes.net</code> IP: <code>mc.winsdominoes.net</code>
@ -222,8 +213,12 @@ export default function Projects() {
<li> <li>
Version: 1.20.1 an above! Version: 1.20.1 an above!
</li> </li>
<li>
Map: <Link href="https://map.winsdominoes.net" className='font-bold hover:underline'>https://map.winsdominoes.net</Link>
</li>
</ul> </ul>
<p className='font-bold mt-2'>Here are some screenshots of the Minecraft Server.</p>
<div className="my-4 grid grid-cols-2 max-lg:flex max-lg:flex-col gap-6"> <div className="my-4 grid grid-cols-2 max-lg:flex max-lg:flex-col gap-6">
<div className="grid content-center"> <div className="grid content-center">
<div> <div>
@ -257,19 +252,19 @@ export default function Projects() {
</div> </div>
<div> <div>
<h2 className="text-3xl font-bold my-2">Coding</h2> <h2 className="text-4xl font-bold my-2">Coding</h2>
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
<div className="col-span-6 my-2"> <div className="col-span-6 my-2">
<h2 className="text-lg font-semibold mb-2">Web Development</h2> <h2 className="text-2xl font-semibold mb-2">Web Development</h2>
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4"> <div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
<div className="col-span-3 flex flex-col"> <div className="col-span-3 flex flex-col">
<Progress text="Frontend Development" progress="100" /> <h3 className='text-lg font-bold'>Frontend Development</h3>
<p className='text-base'> <p className='text-base'>
I am fluent in <span className='font-bold underline decoration-2 decoration-orange-500'>HTML, CSS and JavaScript</span>. I am currently learning <span className='font-bold underline decoration-2 decoration-pink-500'>React + Next.js</span> as well as <span className='font-bold underline decoration-2 decoration-sky-500'>TypeScript</span>. I am fluent in <span className='font-bold underline decoration-2 decoration-orange-500'>HTML, CSS and JavaScript</span>. I am currently learning <span className='font-bold'>React + Next.js</span> as well as <span className='font-bold'>TypeScript</span>.
</p> </p>
</div> </div>
<div className="col-span-3 flex flex-col"> <div className="col-span-3 flex flex-col">
<Progress text="Backend Development" progress="90" /> <h3 className='text-lg font-bold'>Backend Development</h3>
<p className='text-base'> <p className='text-base'>
I am able to work with backend frameworks such as <span className='font-bold underline decoration-2 decoration-purple-500'>node.js</span>, as well as backend programming languages, such as <span className='font-bold underline decoration-2 decoration-blue-500'>PHP</span>. I am able to work with backend frameworks such as <span className='font-bold underline decoration-2 decoration-purple-500'>node.js</span>, as well as backend programming languages, such as <span className='font-bold underline decoration-2 decoration-blue-500'>PHP</span>.
</p> </p>
@ -304,22 +299,22 @@ export default function Projects() {
</div> </div>
<div className="col-span-3"> <div className="col-span-3">
<Progress text="Embedded Programming" progress="20" /> <h3 className='text-lg font-bold'>Embedded Programming</h3>
<p className='text-base'> <p className='text-base'>
I am in the process of learning programming languages such as <span className='font-bold underline decoration-2 decoration-pink-500'>C / C++</span> as well as Arduino programming. I am in the process of learning programming languages such as <span className='font-bold underline decoration-2 decoration-pink-500'>C / C++</span> as well as Arduino programming.
</p> </p>
</div> </div>
<div className="col-span-3"> <div className="col-span-3">
<Progress text="Scripting Languages" progress="60" /> <h3 className='text-lg font-bold'>Scripting</h3>
<p className='text-base'> <p className='text-base'>
Scripting languages are also a part of my skill list as it is a great language for automating tasks on Linux and BSD machines. I am experienced in scripting languages such as: <span className='font-bold'>bash</span> - this helps with automation in coding environments as well as managing Linux services / daemons.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<h2 className="text-3xl font-bold my-2">Robotics</h2> <h2 className="text-4xl font-bold my-2">Robotics</h2>
<p className="text-base my-2"> <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. I have also been involved with a couple of coding competitions and preparations at my current high school, Rugby School Thailand.
</p> </p>
@ -349,7 +344,7 @@ export default function Projects() {
muted muted
loop loop
className='rounded' className='rounded'
src="/images/photos/school-work/robotics/lego-league/robot-movement-final.webm"> src="/images/photos/school-work/robotics/lego-league/robot-movement.mp4">
</video> </video>
<span className="text-xs m-2 text-zinc-600 dark:text-zinc-400">First LEGO League Robot Test Run</span> <span className="text-xs m-2 text-zinc-600 dark:text-zinc-400">First LEGO League Robot Test Run</span>
</div> </div>
@ -400,27 +395,27 @@ export default function Projects() {
</div> </div>
</div> </div>
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-2'>
<h2 className="text-3xl font-bold">Science</h2> <h2 className="text-4xl font-bold">Science</h2>
<p className="text-base"> <p className="text-base">
I participated in Rugby School Thailand&apos;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 participated in Rugby School Thailand&apos;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 volunteered to come and help the <a className="font-bold underline decoration-2 decoration-sky-500">Physics department</a> in presenting and explaining <a className="font-bold underline decoration-2 decoration-pink-500">IGCSE and A-Level Physics concepts</a>. I volunteered to come and help the <a className="font-bold">Physics department</a> in presenting and explaining IGCSE and A-Level Physics concepts.
</p> </p>
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 mt-2 gap-4">
<div className="col-span-6"> <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="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 className="col-span-2 grid max-lg:gap-2 content-center">
<div> <div>
<Photo src="/images/photos/school-work/science/2.JPG" href="#" alt="Smile!" dim="false"></Photo> <Photo src="/images/photos/school-work/science/2.JPG" href="#" alt="" dim="false"></Photo>
</div> </div>
</div> </div>
<div className="grid max-lg:gap-2 content-center"> <div className="grid max-lg:gap-2 content-center">
<div> <div>
<Photo src="/images/photos/school-work/science/1.JPG" href="#" alt="Concentrating..." dim="false"></Photo> <Photo src="/images/photos/school-work/science/1.JPG" href="#" alt="Pendulum Demonstration" dim="false"></Photo>
</div> </div>
<div> <div>
<Photo src="/images/photos/school-work/science/3.JPG" href="#" alt="Electrostatic!" dim="false"></Photo> <Photo src="/images/photos/school-work/science/3.JPG" href="#" alt="Electrostatic Charges" dim="false"></Photo>
</div> </div>
</div> </div>
</div> </div>