Compare commits
No commits in common. "e9cf5d7481e8d6639f541c2a33bf8b10b866d4dc" and "a050b626d1769296d09e6ee12b8c88865359f1a0" have entirely different histories.
e9cf5d7481
...
a050b626d1
|
|
@ -44,4 +44,4 @@ next-env.d.ts
|
|||
.*
|
||||
|
||||
# diploma
|
||||
public/images/photos/diplomas/*
|
||||
public/images/photos/diplomas/
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import * as icons from 'simple-icons';
|
||||
|
||||
interface ContactButtonProps {
|
||||
platform: string;
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
const ContactButton: React.FC<ContactButtonProps> = ({platform, title, description, href, username}) => {
|
||||
|
||||
let buttonColor;
|
||||
let iconFile;
|
||||
|
||||
switch (platform.toLowerCase()) {
|
||||
case 'mastodon':
|
||||
buttonColor = "#6364FF";
|
||||
iconFile = icons.siMastodon.svg;
|
||||
break;
|
||||
case 'github':
|
||||
buttonColor = "#181717";
|
||||
iconFile = icons.siGithub.svg;
|
||||
break;
|
||||
case 'discord':
|
||||
buttonColor = "#5865F2";
|
||||
iconFile = icons.siDiscord.svg;
|
||||
break;
|
||||
case 'facebook':
|
||||
buttonColor = "#0866FF";
|
||||
iconFile = icons.siFacebook.svg;
|
||||
break;
|
||||
default:
|
||||
buttonColor = "";
|
||||
iconFile = "";
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xl font-bold"> { title } </p>
|
||||
<p className="text-base text-slate-600 dark:text-slate-300">
|
||||
{ description }
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-col-3">
|
||||
<Link
|
||||
href={ href }
|
||||
>
|
||||
<button
|
||||
style={
|
||||
{ ['backgroundColor' as any] : buttonColor}
|
||||
}
|
||||
className="text-white 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">
|
||||
|
||||
<i
|
||||
className="text-white"
|
||||
style={
|
||||
{['width']: '24px', ['height']: '24px', ['fill']: 'white'}
|
||||
}
|
||||
dangerouslySetInnerHTML={{ __html: iconFile }}>
|
||||
</i>
|
||||
|
||||
<p className="flex flex-col justify-center text-white">
|
||||
{ username }
|
||||
</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactButton;
|
||||
|
|
@ -28,7 +28,7 @@ const Footer = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const Navbar = () => {
|
|||
{links.map(({ id, text, link }) => (
|
||||
<li
|
||||
key={id}
|
||||
className="nav-links px-4 cursor-pointer capitalize font-medium text-lg max-sm: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-base text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
|
||||
>
|
||||
<Link href={link}>{text}</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import Image from 'next/image';
|
|||
import Link from 'next/link';
|
||||
import React from "react";
|
||||
|
||||
const Photo = ({src, href, alt}: any) => {
|
||||
const Photo = ({src, href, alt, dim}: any) => {
|
||||
let classes = "transition ease-in-out delay-150 hover:scale-105 duration-300";
|
||||
|
||||
/** 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>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
// components/SmallImageGrid.tsx
|
||||
|
||||
import React from 'react';
|
||||
import Photo from './Photo';
|
||||
import { ImageItem } from '../types';
|
||||
|
||||
type PhotoGridProps = {
|
||||
images: ImageItem[][];
|
||||
};
|
||||
|
||||
const PhotoGrid: React.FC<PhotoGridProps> = ({ images }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 max-sm:grid-cols-2 gap-6">
|
||||
{images.map((item: ImageItem[], index: number) => (
|
||||
<div className="grid gap-4 content-center" key={index}>
|
||||
{item.map((image: ImageItem, idx: number) => (
|
||||
<div key={idx}>
|
||||
<Photo src={image.src} href={image.href} alt={image.alt} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhotoGrid;
|
||||
|
|
@ -15,7 +15,7 @@ const Timeline = () => {
|
|||
school: "Sarasas Witaed Romklao International Programme",
|
||||
period: "4th Grade - 6th Grade",
|
||||
address: "124 Rom Klao Rd, Khlong Sam Prawet, Lat Krabang, Bangkok, Thailand 10520",
|
||||
image: "/images/photos/school-logo/swr.jpg",
|
||||
image: "/images/photos/school-logo/swr-iep.jpg",
|
||||
date: "2016 - 2019"
|
||||
},
|
||||
{
|
||||
|
|
@ -29,10 +29,10 @@ const Timeline = () => {
|
|||
{
|
||||
id: 4,
|
||||
school: "Rugby School Thailand",
|
||||
period: "9th Grade - 10th Grade",
|
||||
period: "9th Grade - Present (10th Grade)",
|
||||
address: "7, 2, Khao Mai Kaew, Bang Lamung District, Chon Buri, Thailand 20150",
|
||||
image: "/images/photos/school-logo/rst.png",
|
||||
date: "2023 - 2024"
|
||||
date: "Present"
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ export default function Education() {
|
|||
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">
|
||||
<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>
|
||||
<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">Education</h2>
|
||||
<p className="text-base mt-4">
|
||||
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'>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 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 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>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,10 +27,10 @@ export default function Education() {
|
|||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 max-sm:flex max-sm:flex-col gap-6">
|
||||
<div className="grid grid-cols-2 max-lg:flex max-lg:flex-col gap-6">
|
||||
<div className="col-span-2 flex flex-col gap-2">
|
||||
<span className="text-2xl font-bold">GED Results</span>
|
||||
<div className="col-span-2 grid grid-cols-4 max-sm:flex max-sm:flex-col gap-4">
|
||||
<div className="col-span-2 grid grid-cols-4 max-lg:flex max-lg: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">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>
|
||||
|
|
@ -40,32 +40,12 @@ export default function Education() {
|
|||
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ged.png" href="https://cloud.winsdominoes.net/s/xSJPxR9oxE5Gtgx" alt="Test of General Development Education - GED Diploma" dim="false"></Photo>
|
||||
<Photo src="/images/photos/diplomas/ged.png" href="https://cloud.winsdominoes.net/s/3H3ZqDHDc3mNWBe" alt="Test of General Development Education - GED Diploma" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ged-transcript.png" href="#" alt="Certain information has been censored for privacy - GED Transcript" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-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">
|
||||
<span className='text-2xl font-bold'>English Proficiency Tests</span>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ielts_english_test.png" href="" alt="International English Language Testing System - IELTS" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/graphical-ielts.png" href="#" alt="Graphical View - IELTS" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/kmitl-tep.png" href="https://cloud.winsdominoes.net/s/ZtWxcEZj56bFXCZ" alt="KMITL Test of English Proficiency (KMITL-TEP)" dim="false"></Photo>
|
||||
<Photo src="/images/photos/diplomas/kmitl-tep.png" href="https://cloud.winsdominoes.net/s/3MbnmwHqXkX4axe" alt="KMITL Test of English Proficiency (KMITL-TEP)" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default function Hobbies() {
|
|||
<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 flex flex-col max-lg:items-center max-sm:items-start">
|
||||
<h2 className="text-5xl font-bold mt-2">Hobbies</h2>
|
||||
<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>
|
||||
|
|
@ -23,7 +23,7 @@ export default function Hobbies() {
|
|||
<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 <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>
|
||||
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>
|
||||
|
||||
|
|
@ -99,9 +99,9 @@ export default function Hobbies() {
|
|||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="my-2">
|
||||
<h2 className="text-xl font-bold my-2">ATTASTE - 5th Generation</h2>
|
||||
<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">Attaste's 5th fashion show</span></Link>, organized by the students of RMUTT <span className="italic">(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 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>
|
||||
|
|
@ -142,7 +142,7 @@ export default function Hobbies() {
|
|||
<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">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>
|
||||
<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">
|
||||
|
|
@ -237,9 +237,19 @@ export default function Hobbies() {
|
|||
</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 Facebook Page </h2>
|
||||
<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] text-white 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 text-white'>Win Pattanaphol</p>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/WinsDominoesOfficial" className="">
|
||||
<button className="bg-[#0866FF] text-white 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'>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import './components.css';
|
|||
// const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Thanawin Pattanaphol - ธนาวินทร์ พัฒนผล",
|
||||
description: "A hobbyist full-stack developer, high schooler, enjoyer of 60s-80s music, language nerd, a hobbyist electrician from Thailand.",
|
||||
title: "Win's Personal Website",
|
||||
description: "A full-stack developer, high schooler, enjoyer of 60s-80s music, language nerd, an electrician, and a professional terrible-jokes-maker from Thailand.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
|
|||
227
app/page.tsx
227
app/page.tsx
|
|
@ -1,86 +1,110 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React from "react";
|
||||
import Link from 'next/link';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Timeline from './components/Timeline'
|
||||
import Photo from './components/Photo'
|
||||
import ContactIcons from './components/ContactIcons';
|
||||
import PhotoGrid from './components/PhotoGrid';
|
||||
import ContactButton from './components/ContactButton';
|
||||
|
||||
const frontImages = [
|
||||
[
|
||||
{ src: '/images/photos/iot/raspberrypi.jpg', href: '/projects', alt: 'Raspberry Pi' },
|
||||
],
|
||||
[
|
||||
{ src: '/images/photos/company/main-server-rack/20231221_151039.jpg', href: '/projects', alt: 'Office Main Rack' },
|
||||
{ src: '/images/photos/hardware/homelab.jpg', href: '/projects', alt: 'Homelab' },
|
||||
],
|
||||
[
|
||||
{ src: '/images/photos/robotics/robot.jpg', href: '/projects', alt: 'LEGO League'},
|
||||
{ src: '/images/photos/cosplay/tasm-2-spider-man-2.jpg', href: '/hobbies', alt: 'Spider-Man 2 PS5 Event'}
|
||||
],
|
||||
[
|
||||
{ src: '/images/photos/hardware/hdd.jpg', href: '/projects', alt: 'Storage Server'}
|
||||
]
|
||||
|
||||
];
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
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:items-center max-sm:items-start">
|
||||
<div className="col-span-1">
|
||||
<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:hidden">
|
||||
<Image
|
||||
src="/images/picture.png"
|
||||
width={200}
|
||||
height={200}
|
||||
alt="Win's Logo"
|
||||
alt="Win's Mastodon Profile"
|
||||
className="rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 grid max-lg:gap-4 max-lg:place-items-center max-sm:place-items-start">
|
||||
<div>
|
||||
<p className="text-5xl font-bold">Thanawin Pattanaphol</p>
|
||||
<p className="text-sm mt-2">ธนาวินทร์ พัฒนผล</p>
|
||||
</div>
|
||||
<p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">hobbyist full-stack developer</a>, high schooler, enjoyer of 60s-80s music, language nerd, and a hobbyist electrician.</p>
|
||||
<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 hobbyist 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='col-span-3 flex flex-col place-items-center max-sm:place-items-start'>
|
||||
<code className='text-lg max-sm:text-base font-bold'>"I don't want to make a PDF, I'll code one instead."</code>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 mt-[-15px] flex flex-col gap-4">
|
||||
<h2 className="text-4xl font-bold">About Me</h2>
|
||||
<div className='text-lg grid grid-cols-4 max-sm:flex max-sm:flex-col'>
|
||||
<div>
|
||||
<span className='font-bold'>Nickname</span>: Win
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>Age</span>: 16
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>Nationality</span>: Thai 🇹🇭
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>Religion</span>: Buddhism
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
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>.
|
||||
<div className="col-span-3">
|
||||
<h2 className="text-4xl font-bold mt-2">About Me</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>
|
||||
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's company as well as running my own server setup, also known as a homelab.
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<PhotoGrid images={frontImages} />
|
||||
<div className="grid grid-cols-4 max-sm:hidden 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/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/homelab.jpg" href="/projects" alt="Homelab"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div className="mt-12">
|
||||
<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="Spider-Man 2 PS5 Event"></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>
|
||||
|
||||
<div className="hidden max-sm:grid max-sm:grid-cols-2 max-sm: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>
|
||||
<Photo src="/images/photos/hardware/homelab.jpg" href="/projects" alt="Homelab"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/hdd.jpg" href="/projects" alt="Storage Server"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="/hobbies" alt="Spider-Man 2 PS5 Event"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Photo src="/images/photos/software/tts.jpg" href="/projects" alt="Storage Server"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -94,29 +118,74 @@ export default function Home() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<ContactButton
|
||||
platform="github"
|
||||
title="Like my work?"
|
||||
description="Check them out on my GitHub!"
|
||||
href="https://github.com/WinsDominoes"
|
||||
username="@WinsDominoes"
|
||||
/>
|
||||
<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-600 dark:text-slate-300">
|
||||
Check them out on my GitHub!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ContactButton
|
||||
platform="mastodon"
|
||||
title="See more posts?"
|
||||
description="Check updates on my Mastodon!"
|
||||
href="https://social.winscloud.net/@winsdominoes"
|
||||
username="@winsdominoes"
|
||||
/>
|
||||
<div className='grid grid-col-3'>
|
||||
<Link href="https://github.com/WinsDominoes" className="">
|
||||
<button className="bg-[#24292E] text-white 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 text-white'>@WinsDominoes</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactButton
|
||||
platform="discord"
|
||||
title="Get in touch?"
|
||||
description="Send me a message on Discord!"
|
||||
href="#"
|
||||
username="winsdominoes"
|
||||
/>
|
||||
<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-600 dark: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] text-white 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 text-white'>@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-600 dark:text-slate-300">
|
||||
Send me a message on Discord!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-col-3'>
|
||||
<Link href="#">
|
||||
<button className="bg-[#5865F2] text-white 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 text-white'>winsdominoes</p>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ export default function Projects() {
|
|||
<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 flex flex-col max-lg:items-center max-sm:items-start">
|
||||
<h2 className="text-5xl font-bold mt-2">Projects & Work</h2>
|
||||
<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-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.
|
||||
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">STEM events</a>, such as <a className="font-bold">competitive coding competitions</a> and <a className="font-bold">science showcase events</a>.
|
||||
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>
|
||||
|
|
@ -30,8 +30,8 @@ export default function Projects() {
|
|||
<div className='mb-4'>
|
||||
<h2 className="text-3xl font-bold my-2">Enterprise Systems</h2>
|
||||
<p className="text-base">
|
||||
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's <span className='font-bold'>computer infrastructure</span> along with the company's I.T. department.
|
||||
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 with designing, operating and maintaining the company's <span className='font-bold underline decoration-2 decoration-indigo-500'>computer infrastructure</span> along with the company's I.T. department.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ export default function Projects() {
|
|||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Router"></Photo>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Cloud Router Switch"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
|
|
@ -71,7 +71,8 @@ export default function Projects() {
|
|||
<div className='col-span-6'>
|
||||
<h3 className='text-2xl font-bold my-2'>Software</h3>
|
||||
<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>, <span className='font-bold underline decoration-2 decoration-yellow-500'>file storage and transfer</span>, a DNS server and so on.
|
||||
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-lime-500'>file storage and transfer</span>, a DNS server and so on.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -80,21 +81,21 @@ export default function Projects() {
|
|||
<div className="content-center">
|
||||
<div className='flex flex-col'>
|
||||
<Photo src="/images/photos/company/raspberry-pi-file/20231221_151414.jpg" href="https://cloud.winsdominoes.net"></Photo>
|
||||
<h5 className='text-lg font-bold'>File Transfer</h5>
|
||||
<h5 className='text-xl font-bold'>File Transfer</h5>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<span className='font-bold mt-2'>Usage</span>
|
||||
<h5 className='text-lg font-bold mt-2'>Usage</h5>
|
||||
<ul className="list-disc ml-4">
|
||||
<li>
|
||||
Engineers, sitting in the office, connects to the Pi using the <span className='font-bold'>SMB (Samba) protocol</span>.
|
||||
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>.
|
||||
</li>
|
||||
<li>
|
||||
Engineers copy the files over to the Raspberry Pi over the network.
|
||||
</li>
|
||||
<li>
|
||||
The <span className='font-bold'>CNC machine operators</span> copies the files straight to the CNC machine.
|
||||
The <span className='font-bold underline decoration-2 decoration-sky-500'>CNC machine operators</span> copies the files straight to the CNC machine.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -132,7 +133,7 @@ export default function Projects() {
|
|||
<div className='mt-10'>
|
||||
<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.
|
||||
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>
|
||||
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="col-span-6 my-4">
|
||||
|
|
@ -142,7 +143,7 @@ export default function Projects() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col ">
|
||||
<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 gap-4 content-center">
|
||||
|
|
@ -179,33 +180,41 @@ export default function Projects() {
|
|||
</div>
|
||||
|
||||
<div className='col-span-6'>
|
||||
<h3 className='text-lg font-bold'>Operating Systems</h3>
|
||||
<p className='text-base'>
|
||||
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.
|
||||
</p>
|
||||
<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" />
|
||||
</div>
|
||||
<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 className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Firewalls</h3>
|
||||
<Progress text="Firewalls" progress="90" />
|
||||
<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's RouterOS</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Virtualization</h3>
|
||||
<Progress text="Virtualization" progress="90" />
|
||||
<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>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='col-span-6 flex flex-col'>
|
||||
<h2 className='text-lg font-bold'>Minecraft Server</h2>
|
||||
<h2 className='text-xl font-bold'>Minecraft Server</h2>
|
||||
<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.
|
||||
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.
|
||||
It is currently running on my homelab with around 2 - 5 players daily.
|
||||
</p>
|
||||
|
||||
<ul className='list-disc ml-4'>
|
||||
<li>
|
||||
IP: <code>mc.winsdominoes.net</code>
|
||||
|
|
@ -213,12 +222,8 @@ export default function Projects() {
|
|||
<li>
|
||||
Version: 1.20.1 an above!
|
||||
</li>
|
||||
<li>
|
||||
Map: <Link href="https://map.winsdominoes.net" className='font-bold hover:underline'>https://map.winsdominoes.net</Link>
|
||||
</li>
|
||||
</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="grid content-center">
|
||||
<div>
|
||||
|
|
@ -252,19 +257,19 @@ export default function Projects() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold my-2">Coding</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<h2 className="text-3xl font-bold my-2">Coding</h2>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6 my-2">
|
||||
<h2 className="text-2xl font-semibold mb-2">Web Development</h2>
|
||||
<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-3 flex flex-col">
|
||||
<h3 className='text-lg font-bold'>Frontend Development</h3>
|
||||
<Progress text="Frontend Development" progress="100" />
|
||||
<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'>React + Next.js</span> as well as <span className='font-bold'>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 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>.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-3 flex flex-col">
|
||||
<h3 className='text-lg font-bold'>Backend Development</h3>
|
||||
<Progress text="Backend Development" progress="90" />
|
||||
<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>.
|
||||
</p>
|
||||
|
|
@ -274,12 +279,17 @@ export default function Projects() {
|
|||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-1 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>
|
||||
<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://maps.moomoo.me" alt="PhotoSphereStudio"></Photo>
|
||||
|
|
@ -287,41 +297,39 @@ export default function Projects() {
|
|||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/winsvideo.png" href="https://videos.winscloud.net" alt="WinsVideo - Video Sharing Site"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/datecalc.jpeg" href="https://github.com/WinsDominoes/dateapp" alt="Date Calculator w/ AmyIsCoolz"></Photo>
|
||||
<Photo src="/images/photos/software/winsvideo.png" href="https://github.com/WinsVideo/winsvideo-4.0" alt="WinsVideo - Video Sharing Site"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Embedded Programming</h3>
|
||||
<Progress text="Embedded Programming" progress="20" />
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Scripting</h3>
|
||||
<Progress text="Scripting Languages" progress="60" />
|
||||
<p className='text-base'>
|
||||
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.
|
||||
Scripting languages are also a part of my skill list as it is a great language for automating tasks on Linux and BSD machines.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold my-2">Robotics</h2>
|
||||
<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 former 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>
|
||||
|
||||
<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 at Rugby School Thailand!
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-5 gap-6 max-lg:flex max-lg:flex-col">
|
||||
|
|
@ -341,7 +349,7 @@ export default function Projects() {
|
|||
muted
|
||||
loop
|
||||
className='rounded'
|
||||
src="/images/photos/school-work/robotics/lego-league/robot-movement.mp4">
|
||||
src="/images/photos/school-work/robotics/lego-league/robot-movement-final.webm">
|
||||
</video>
|
||||
<span className="text-xs m-2 text-zinc-600 dark:text-zinc-400">First LEGO League Robot Test Run</span>
|
||||
</div>
|
||||
|
|
@ -392,27 +400,27 @@ export default function Projects() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-2'>
|
||||
<h2 className="text-4xl font-bold">Science</h2>
|
||||
<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 volunteered to come and help the <a className="font-bold">Physics department</a> in presenting and explaining IGCSE and A-Level Physics concepts.
|
||||
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>.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-6 mt-2 gap-4">
|
||||
<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="" dim="false"></Photo>
|
||||
<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="Pendulum Demonstration" dim="false"></Photo>
|
||||
<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 Charges" dim="false"></Photo>
|
||||
<Photo src="/images/photos/school-work/science/3.JPG" href="#" alt="Electrostatic!" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
export type ImageItem = {
|
||||
src: string;
|
||||
href: string;
|
||||
alt: string;
|
||||
};
|
||||
|
||||
export type ContactButtonsItem = {
|
||||
platform: string;
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
username: string;
|
||||
}
|
||||
|
|
@ -17,8 +17,7 @@
|
|||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-odometerjs": "^3.1.0",
|
||||
"simple-icons": "^10.3.0"
|
||||
"react-odometerjs": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
|
|
@ -5776,18 +5775,6 @@
|
|||
"simple-concat": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-icons": {
|
||||
"version": "10.3.0",
|
||||
"resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-10.3.0.tgz",
|
||||
"integrity": "sha512-MpqALzcKXPNfVKiNkESkahmXIt0tTVnTOZAhD6q4MmL3XUroaKwy8stPwXZOfK1WoT6jqpjUfc0nopPePZvY7w==",
|
||||
"engines": {
|
||||
"node": ">=0.12.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/simple-icons"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-odometerjs": "^3.1.0",
|
||||
"simple-icons": "^10.3.0"
|
||||
"react-odometerjs": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
|
||||
|
Before Width: | Height: | Size: 542 B |
|
|
@ -1 +0,0 @@
|
|||
<svg 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>
|
||||
|
Before Width: | Height: | Size: 822 B |
|
|
@ -1 +0,0 @@
|
|||
<svg 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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 3.0 MiB After Width: | Height: | Size: 3.0 MiB |
|
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
0
public/images/photos/school-work/robotics/lego-league/robot-movement-final.webm
Executable file → Normal file
0
public/images/photos/school-work/robotics/lego-league/robot-movement-final.webm
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Loading…
Reference in New Issue