117 lines
5.8 KiB
TypeScript
Executable File
117 lines
5.8 KiB
TypeScript
Executable File
"use client"
|
|
import Image from 'next/image';
|
|
import React from "react";
|
|
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'}
|
|
]
|
|
|
|
];
|
|
|
|
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">
|
|
<Image
|
|
src="/images/picture.png"
|
|
width={200}
|
|
height={200}
|
|
alt="Win's Logo"
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2 grid max-lg:place-items-center max-sm:place-items-start mt-5">
|
|
<p className="text-5xl font-bold">Win Pattanaphol</p>
|
|
<p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">hobbyist full-stack developer</a>, undergraduate student, enjoyer of 60s-80s music, language nerd, and a hobbyist electrician.</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-3 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>
|
|
<p>
|
|
My main field of work is <a className="font-bold underline decoration-2 decoration-sky-500">server administration</a>. I am running my own self-hosted ecosystem as well as currently administering the IT infrastructure (servers, networking, firewalls)
|
|
at my father's company.
|
|
</p>
|
|
<p>
|
|
My other 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>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<PhotoGrid images={frontImages} />
|
|
|
|
<div className="flex justify-center my-4">
|
|
<p className="text-lg font-bold">View my <a className="font-bold underline decoration-2 decoration-sky-500">projects</a> and <a className="font-bold underline decoration-2 decoration-pink-500">hobbies</a> by clicking on the images!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 max-md:flex max-md:flex-col justify-items-center">
|
|
<div className="col-span-3 justify-self-start">
|
|
<p className="text-4xl font-bold">
|
|
Contact
|
|
</p>
|
|
</div>
|
|
|
|
<ContactButton
|
|
platform="git"
|
|
title="Like my work?"
|
|
description="Check them out on my Git instance!"
|
|
href="https://git.winscloud.net/winsdominoes"
|
|
username="@winsdominoes"
|
|
/>
|
|
|
|
<ContactButton
|
|
platform="activitypub"
|
|
title="See more posts?"
|
|
description="Check updates on my Fediverse!"
|
|
href="https://fedi.winscloud.net/@winsdominoes"
|
|
username="@winsdominoes"
|
|
/>
|
|
|
|
<ContactButton
|
|
platform="matrix"
|
|
title="Get in touch?"
|
|
description="Send me a message on Matrix!"
|
|
href="https://matrix.to/#/@winsdominoes:matrix.winscloud.net"
|
|
username="@winsdominoes"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |