Added more stuff
|
@ -43,7 +43,7 @@ const ContactButton: React.FC<ContactButtonProps> = ({platform, title, descripti
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:max-lg:items-center">
|
||||
<div className="flex flex-col gap-4 sm:max-lg:items-start">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xl font-bold"> { title } </p>
|
||||
<p className="text-base text-slate-600 dark:text-slate-300">
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import * as icons from 'simple-icons';
|
||||
import FediverseIcon from './Extra/Fediverse';
|
||||
import PixelfedIcon from './Extra/Pixelfed';
|
||||
import Image from 'next/image';
|
||||
|
||||
let ContactIcons = () => {
|
||||
return (
|
||||
<ul className="flex space-x-5">
|
||||
<ul className="flex justify-center sm:space-x-5 max-sm:grid max-sm:grid-cols-3 max-sm:gap-4">
|
||||
<li>
|
||||
<a href="https://git.winscloud.net/winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<i
|
||||
|
@ -33,19 +33,8 @@ let ContactIcons = () => {
|
|||
className="w-7 h-7 transition ease-in-out delay-60 opacity-60 hover:opacity-100 hover:scale-105 duration-300"
|
||||
style={
|
||||
{['width']: '35px', ['height']: '35px', ['fill']: 'white', ['display']: 'inline-block'}
|
||||
}
|
||||
dangerouslySetInnerHTML={{ __html: icons.siActivitypub.svg }}>
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://misskey.winscloud.net/@winsdominoes" className="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
|
||||
<i
|
||||
className="w-7 h-7 transition ease-in-out delay-60 opacity-60 hover:opacity-100 hover:scale-105 duration-300"
|
||||
style={
|
||||
{['width']: '35px', ['height']: '35px', ['fill']: 'white', ['display']: 'inline-block'}
|
||||
}
|
||||
dangerouslySetInnerHTML={{ __html: icons.siMisskey.svg }}>
|
||||
}>
|
||||
<FediverseIcon />
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
// Fediverse.tsx
|
||||
import React from "react";
|
||||
|
||||
let FediverseIcon = () => {
|
||||
return (
|
||||
<svg role="img" width="50px" height="50px" viewBox="50 200 1034 1034" xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<path d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336 q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58 t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231 q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863 q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default FediverseIcon;
|
||||
/*
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Pixelfed</title>
|
||||
<path d="M12 24C5.3726 24 0 18.6274 0 12S5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12m-.9526-9.3802h2.2014c2.0738 0 3.7549-1.6366 3.7549-3.6554S15.3226 7.309 13.2488 7.309h-3.1772c-1.1964 0-2.1663.9442-2.1663 2.1089v8.208z" />
|
||||
</svg>
|
||||
*/
|
|
@ -30,7 +30,7 @@ const Navbar = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center h-20 nav lg:-ml-[15px]">
|
||||
<div className="flex justify-center items-center h-20 nav">
|
||||
<ul className="flex">
|
||||
{links.map(({ id, text, link }) => (
|
||||
<li
|
||||
|
|
|
@ -10,7 +10,7 @@ type PhotoGridProps = {
|
|||
|
||||
const PhotoGrid: React.FC<PhotoGridProps> = ({ images }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 max-sm:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-4 max-sm:grid-cols-1 max-md: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) => (
|
||||
|
|
|
@ -19,8 +19,8 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html className={`${inter.className} text-black bg-white dark:text-white dark:bg-slate-900`} lang="en">
|
||||
<body className="antialiased mt-8 mb-8 lg:max-w-screen-xl min-lg:flex min-lg:flex-col 2xl:mx-auto xl:mx-4 lg:mx-4 max-lg:grid max-lg:place-items-center max-sm:place-items-start">
|
||||
<html className={`${inter.className} text-black bg-white dark:text-white dark:bg-[#242424]`} lang="en">
|
||||
<body className="antialiased mt-8 mb-8 mx-2 lg:max-w-screen-xl min-lg:flex min-lg:flex-col xl:lg:mx-4 2xl:mx-auto max-lg:grid place-items-center">
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
|
|
27
app/page.tsx
|
@ -38,8 +38,8 @@ const frontImages = [
|
|||
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="min-w-0 mt-6 flex flex-col gap-8 mx-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<Image
|
||||
src="/images/picture.png"
|
||||
|
@ -50,26 +50,22 @@ export default function Home() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 grid items-center max-lg:place-items-center max-sm:place-items-start max-lg:gap-4 my-6">
|
||||
<div className="col-span-2 grid text-center gap-4 my-6">
|
||||
<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>
|
||||
<p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">hobbyist 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">
|
||||
<div className="col-span-3 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>
|
||||
<div className="text-lg grid grid-cols-3 max-sm:flex max-sm:flex-col align-center">
|
||||
<div className="text-start max-sm:text-left">
|
||||
<span className='font-bold'>Nickname</span>: Win
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>Age</span>: 16
|
||||
<div className='text-center max-sm:text-left'>
|
||||
<span className='font-bold'>Age</span>: 17
|
||||
</div>
|
||||
<div>
|
||||
<div className='text-end max-sm:text-left'>
|
||||
<span className='font-bold'>Nationality</span>: Thai 🇹🇭
|
||||
</div>
|
||||
</div>
|
||||
|
@ -101,8 +97,7 @@ export default function Home() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 max-lg:grid-cols-2 max-sm:flex max-sm:flex-col justify-items-center">
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 max-lg:grid-cols-2 max-sm:flex max-sm:flex-col">
|
||||
<ContactButton
|
||||
platform="git"
|
||||
title="Like my work?"
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from 'next/link';
|
||||
import Video from 'next-video';
|
||||
import Progress from '../components/ProgressBar/ProgressBar';
|
||||
import Photo from '../components/Photo';
|
||||
|
||||
export default function Projects() {
|
||||
|
@ -16,127 +13,17 @@ export default function Projects() {
|
|||
<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.
|
||||
</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>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='mb-4'>
|
||||
<h2 className="text-4xl font-bold my-2">System Administration</h2>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-6 gap-4'>
|
||||
<div className='col-span-6'>
|
||||
<h3 className='text-2xl font-bold my-2'>Hardware</h3>
|
||||
<p className="text-base">
|
||||
The server rack below consists of many components. Ranging from network equipment such as: <span className='font-bold underline decoration-2 decoration-purple-500'>routers and switches</span> to server equipment such as: <span className='font-bold underline decoration-2 decoration-pink-500'>storage servers and security camera servers</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-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/company/main-server-rack/20231221_151039.jpg" alt="Main Server Rack"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_132903.jpg" alt="Router Closeup"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Router"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_132830.jpg" href="https://cloud.winsdominoes.net" alt="Server Maintenance"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='col-span-6'>
|
||||
<div className="grid grid-cols-2 max-lg:flex max-lg:flex-col max-lg:justify-center gap-6">
|
||||
<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>
|
||||
<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>
|
||||
<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>.
|
||||
</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.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className='text-base mt-2'>
|
||||
This project has received <span className='font-bold underline decoration-2 decoration-green-500'>numerous positive feedbacks</span> from machine operators and are still being used in production to this day.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="content-center">
|
||||
<div className='flex flex-col'>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_151027.jpg" href="https://cloud.winsdominoes.net"></Photo>
|
||||
<h4 className='text-xl font-bold'>Networking</h4>
|
||||
<p className='text-base'>
|
||||
Raspberry Pis are also used in networking systems such as: internet speed monitoring and as a DNS server.
|
||||
</p>
|
||||
|
||||
<h5 className='text-lg font-bold mt-2'>Pi-Hole</h5>
|
||||
<p className='text-base'>
|
||||
Seen on the left side of the screen, <Link href="https://pi-hole.net" className='font-bold underline decoration-2 decoration-indigo-500'>Pi-Hole</Link> is used as the main DNS server, in which, the company's network traffic must go through Pi-Hole before entering the Wide Area Network.
|
||||
This also provides additional DNS protection & control to the already installed firewall.
|
||||
</p>
|
||||
|
||||
<h5 className='text-lg font-bold mt-2'>Grafana Monitoring</h5>
|
||||
<p className='text-base'>
|
||||
The <Link href="https://github.com/geerlingguy/internet-pi/" className='font-bold underline decoration-2 decoration-indigo-500'>internet-pi</Link> set of software, consisting of Grafana and Ansible, provides the I.T. department with additional networking monitoring such as:
|
||||
Connection speeds, latency, HTTP duration and much more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-10'>
|
||||
<h2 className="text-3xl font-bold my-2">Homelab</h2>
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold my-2">Homelab System</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>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6 my-4">
|
||||
<h2 className='text-2xl font-bold'>Hardware</h2>
|
||||
<p className='text-base'>
|
||||
My homelab consists of a firewall / router, a multi-purpose server and a Raspberry Pi. The multi-purpose server is used for storage, web servers and a minecraft server.
|
||||
</p>
|
||||
|
@ -144,31 +31,20 @@ export default function Projects() {
|
|||
|
||||
<div className="grid grid-cols-6 gap-4 max-lg:flex max-lg:flex-col ">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-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/iot/raspberrypi.jpg" href="https://pi.winscloud.net" alt="Raspberry Pi"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/pve.jpg" href="https://winscloud.net" alt="Proxmox"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/homelab.jpg" href="https://winscloud.net" alt="Homelab"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/portainer.png" href="https://winscloud.net" alt="Portainer"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/software/opnsense.jpg" href="https://winscloud.net" alt="OPNsense"></Photo>
|
||||
<Photo src="/images/photos/hardware/server_rack.jpg" href="https://winscloud.net" alt="Server Rack"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/hardware/hdd.jpg" href="https://cloud.winsdominoes.net" alt="Storage Server"></Photo>
|
||||
<Photo src="/images/photos/hardware/raspberry_pi.jpg" href="https://cloud.winsdominoes.net" alt="Raspberry Pi"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -185,6 +61,21 @@ export default function Projects() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-grid 2 col-span-6">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/pve.jpg" href="https://winscloud.net" alt="Proxmox"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/opnsense.jpg" href="https://winscloud.net" alt="OPNsense"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Firewalls</h3>
|
||||
<p className='text-base'>
|
||||
|
@ -249,10 +140,10 @@ export default function Projects() {
|
|||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold my-2">Coding</h2>
|
||||
<h2 className="text-4xl font-bold my-2">Coding Projects</h2>
|
||||
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
|
||||
<div className="col-span-6 my-2">
|
||||
<h2 className="text-2xl font-semibold mb-2">Web Development</h2>
|
||||
|
@ -274,6 +165,23 @@ export default function Projects() {
|
|||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<h3 className="text-lg font-bold underline decoration-2 decoration-green-500 text-center">Work In Progress...</h3>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/srt_app.png" href="https://git.winscloud.net/winsdominoes/srt_app" alt="State Railway of Thailand App"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/livyatan.png" href="https://git.winscloud.net/winsdominoes/livyatan" alt="Livyatan - Misskey Client"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<h3 className="text-lg font-bold underline decoration-2 decoration-blue-500 text-center">Past Projects</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
|
@ -298,6 +206,21 @@ export default function Projects() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-grid 2 col-span-6">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/discord_raindar.png" href="https://winscloud.net" alt="Discord Version"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/software/misskey_raindar.png" href="https://misskey.winscloud.net/@bkkraindarbot" alt="Misskey Version"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3">
|
||||
<h3 className='text-lg font-bold'>Embedded Programming</h3>
|
||||
<p className='text-base'>
|
||||
|
@ -314,6 +237,105 @@ export default function Projects() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-6 gap-4'>
|
||||
<div className='col-span-6'>
|
||||
<h3 className='text-2xl font-bold my-2'>Hardware</h3>
|
||||
<p className="text-base">
|
||||
The server rack below consists of many components. Ranging from network equipment such as: <span className='font-bold underline decoration-2 decoration-purple-500'>routers and switches</span> to server equipment such as: <span className='font-bold underline decoration-2 decoration-pink-500'>storage servers and security camera servers</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-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/company/main-server-rack/20231221_151039.jpg" alt="Main Server Rack"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_132903.jpg" alt="Router Closeup"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Router"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_132830.jpg" href="https://cloud.winsdominoes.net" alt="Server Maintenance"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='col-span-6'>
|
||||
<div className="grid grid-cols-2 max-lg:flex max-lg:flex-col max-lg:justify-center gap-6 items-start">
|
||||
<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>
|
||||
<h4 className='text-xl font-bold'>File Transfer</h4>
|
||||
<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>
|
||||
|
||||
<ul className="list-disc mt-2 ml-4">
|
||||
<li>
|
||||
Engineers, sitting in the office, connects to the Pi using the <span className='font-bold'>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, making it easier to transfer files between engineers and on-site engineers.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className='text-base mt-2'>
|
||||
This project has received <span className='font-bold underline decoration-2 decoration-green-500'>numerous positive feedbacks</span> from machine operators. Currently under maintenance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="content-center">
|
||||
<div className='flex flex-col'>
|
||||
<Photo src="/images/photos/company/main-server-rack/20231221_151027.jpg" href="https://cloud.winsdominoes.net"></Photo>
|
||||
<h4 className='text-xl font-bold'>Networking</h4>
|
||||
<h5 className='text-lg font-bold mt-2'>Pi-Hole</h5>
|
||||
<p className='text-base'>
|
||||
Seen on the left side of the screen, <Link href="https://pi-hole.net" className='font-bold underline decoration-2 decoration-indigo-500'>Pi-Hole</Link> is used as the main DNS server, in which, the company's network traffic must go through Pi-Hole before entering the Wide Area Network.
|
||||
This also provides additional DNS protection & control to the already installed firewall.
|
||||
</p>
|
||||
|
||||
<h5 className='text-lg font-bold mt-2'>Grafana Monitoring</h5>
|
||||
<p className='text-base'>
|
||||
The <Link href="https://github.com/geerlingguy/internet-pi/" className='font-bold underline decoration-2 decoration-indigo-500'>internet-pi</Link> set of software, consisting of Grafana and Ansible, provides the I.T. department with additional networking monitoring such as:
|
||||
Connection speeds, latency, HTTP duration and much more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold my-2">Robotics</h2>
|
||||
<p className="text-base my-2">
|
||||
|
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 414 KiB After Width: | Height: | Size: 410 KiB |
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 373 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 340 KiB After Width: | Height: | Size: 337 KiB |
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 231 KiB |
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 197 KiB |
Before Width: | Height: | Size: 293 KiB After Width: | Height: | Size: 285 KiB |
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 238 KiB |
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 246 KiB |
After Width: | Height: | Size: 143 KiB |
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 220 KiB |
Before Width: | Height: | Size: 547 KiB After Width: | Height: | Size: 312 KiB |
Before Width: | Height: | Size: 818 KiB After Width: | Height: | Size: 302 KiB |
Before Width: | Height: | Size: 766 KiB After Width: | Height: | Size: 299 KiB |
Before Width: | Height: | Size: 444 KiB After Width: | Height: | Size: 308 KiB |
Before Width: | Height: | Size: 819 KiB After Width: | Height: | Size: 303 KiB |
Before Width: | Height: | Size: 669 KiB After Width: | Height: | Size: 296 KiB |
Before Width: | Height: | Size: 607 KiB After Width: | Height: | Size: 301 KiB |
Before Width: | Height: | Size: 506 KiB After Width: | Height: | Size: 320 KiB |
Before Width: | Height: | Size: 514 KiB After Width: | Height: | Size: 335 KiB |
Before Width: | Height: | Size: 462 KiB After Width: | Height: | Size: 399 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 294 KiB |
Before Width: | Height: | Size: 461 KiB After Width: | Height: | Size: 317 KiB |
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 275 KiB |
Before Width: | Height: | Size: 497 KiB After Width: | Height: | Size: 342 KiB |
After Width: | Height: | Size: 297 KiB |
After Width: | Height: | Size: 296 KiB |
After Width: | Height: | Size: 265 KiB |
After Width: | Height: | Size: 134 KiB |
After Width: | Height: | Size: 355 KiB |
After Width: | Height: | Size: 545 KiB |