Added more stuff

This commit is contained in:
Win 2024-12-14 20:52:29 +07:00
parent ec79de7866
commit 32b0e82690
40 changed files with 191 additions and 167 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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>
*/

View File

@ -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

View File

@ -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) => (

View File

@ -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 />

View File

@ -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'>&quot;I don&apos;t want to make a PDF, I&apos;ll code one instead.&quot;</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?"

View File

@ -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&apos;s <span className='font-bold'>computer infrastructure</span> along with the company&apos;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&apos;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>
<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'>
@ -252,7 +143,7 @@ export default function Projects() {
</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&apos;s <span className='font-bold'>computer infrastructure</span> along with the company&apos;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&apos;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">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 414 KiB

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 380 KiB

After

Width:  |  Height:  |  Size: 373 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 340 KiB

After

Width:  |  Height:  |  Size: 337 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 234 KiB

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 293 KiB

After

Width:  |  Height:  |  Size: 285 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 254 KiB

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 KiB

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 KiB

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 818 KiB

After

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 766 KiB

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 444 KiB

After

Width:  |  Height:  |  Size: 308 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 819 KiB

After

Width:  |  Height:  |  Size: 303 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 296 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 607 KiB

After

Width:  |  Height:  |  Size: 301 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 506 KiB

After

Width:  |  Height:  |  Size: 320 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 514 KiB

After

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 462 KiB

After

Width:  |  Height:  |  Size: 399 KiB

BIN
public/images/photos/hardware/homelab.jpg Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 461 KiB

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 275 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 497 KiB

After

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 355 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 KiB