Updated website and photos
|
|
@ -19,11 +19,16 @@ const Navbar = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
text: "Events",
|
||||||
|
link: "events"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
text: "Hobbies",
|
text: "Hobbies",
|
||||||
link: "hobbies"
|
link: "hobbies"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 5,
|
||||||
text: "Donate",
|
text: "Donate",
|
||||||
link: "donate"
|
link: "donate"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
"use client"
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Photo from '../components/Photo';
|
||||||
|
|
||||||
|
export default function Events() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
||||||
|
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
||||||
|
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
||||||
|
<h2 className="text-5xl font-bold mt-2">Events</h2>
|
||||||
|
<p className="text-base mt-4">
|
||||||
|
I've been to several developer / tech-related events during the past couple of years - here are some of them!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl font-bold my-2">FOSSASIA 2024</h2>
|
||||||
|
<p className="text-base">
|
||||||
|
The first time FOSSASIA is held in Siam!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col my-4">
|
||||||
|
<div className="col-span-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/events/fossasia/me-and-p-mishari.jpg" alt="Me and @mishari"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/events/fossasia/crazy-ahh.jpg" alt="Me looking flabbergasted"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/events/fossasia/nbtc.jpg" alt="A.I. submit poster"></Photo>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/events/fossasia/nextcloud-and-debian.png" alt="Nextcloud & Debian poster"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl font-bold my-2">A.I. Innovation & Engineering Summit</h2>
|
||||||
|
<p className="text-base">
|
||||||
|
Thanks to my university's curriculum being around project-based learning, I get to work on my 1st year <span className="font-bold underline decoration-2 decoration-sky-500">Undergraduate Research & Development</span> project called "Med-D" in which, I also had to present it at
|
||||||
|
the 2024 A.I. Innovation & Engineering Summit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col my-4">
|
||||||
|
<div className="col-span-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/ai-engineering-2024/me.jpg" alt="That's me!"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/ai-engineering-2024/poster.jpg" alt="A.I. submit poster"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/ai-engineering-2024/me-and-friend.jpg" alt="Me with P' Ae!"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl font-bold my-2">"A.I. Made Easy" - Dell & AMD</h2>
|
||||||
|
<p className="text-base">
|
||||||
|
On April 25th, Me and my team had the opportunity to present our work at the <span className="font-bold underline decoration-2 decoration-sky-500">A.I. Made Easy</span> event; organized by Dell Technologies & Advaned Micro Devices (AMD) Inc.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-4">
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/dell-event/med-d-team.jpg" alt="My team!"></Photo>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/dell-event/med-d-photo.jpg" alt="Discussion..."></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/dell-event/me.jpg" alt="My photo"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/dell-event/team.jpg" alt="CMKL Team"></Photo>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/cmkl/dell-event/server.jpg" alt="Dell PowerEdge"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -90,6 +90,26 @@ export default function Hobbies() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className='my-2'>
|
||||||
|
<h2 className="text-3xl font-bold my-2">Art</h2>
|
||||||
|
<p className="text-base">I decided to start drawing / sketching stuff.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-4 max-md:flex max-md:flex-col max-md:justify-center gap-6">
|
||||||
|
<div className="grid col-span-2 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/art/architecture/belvedere-righteousness.jpeg" alt="Belvedere of Spreading Righteousness"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid col-span-2 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/art/architecture/hagia-sophia.jpeg" alt="Hagia Sophia"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className='my-2'>
|
<div className='my-2'>
|
||||||
<h2 className="text-3xl font-bold my-2">Graphics Design</h2>
|
<h2 className="text-3xl font-bold my-2">Graphics Design</h2>
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export default function Home() {
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<div className="col-span-1 flex justify-center">
|
<div className="col-span-1 flex justify-center">
|
||||||
<Image
|
<Image
|
||||||
src="/images/picture.png"
|
src="/images/win.jpg"
|
||||||
width={250}
|
width={250}
|
||||||
height={250}
|
height={250}
|
||||||
alt="Win's Logo"
|
alt="Win's Logo"
|
||||||
|
|
@ -66,7 +66,7 @@ export default function Home() {
|
||||||
<span className='font-bold'>Age</span>: 17
|
<span className='font-bold'>Age</span>: 17
|
||||||
</div>
|
</div>
|
||||||
<div className='text-end max-sm:text-left'>
|
<div className='text-end max-sm:text-left'>
|
||||||
<span className='font-bold'>Nationality</span>: Thai 🇹🇭
|
<span className='font-bold'>Nationality</span>: Siamese
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export default function Projects() {
|
||||||
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
<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</h2>
|
<h2 className="text-5xl font-bold mt-2">Projects</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-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 or have done 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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 830 KiB |
|
After Width: | Height: | Size: 760 KiB |
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 334 KiB |
|
After Width: | Height: | Size: 350 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 303 KiB |
|
After Width: | Height: | Size: 788 KiB |
|
After Width: | Height: | Size: 384 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 281 KiB |
|
After Width: | Height: | Size: 462 KiB |
|
After Width: | Height: | Size: 801 KiB |
|
After Width: | Height: | Size: 330 KiB |