Changed font, name and more

app/components/ContactButton.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import Image from "next/image";
 import React from "react";
 import * as icons from 'simple-icons';
 
@@ -17,17 +16,17 @@ const ContactButton: React.FC<ContactButtonProps> = ({platform, title, descripti
     let iconFile;
 
     switch (platform.toLowerCase()) {
-        case 'mastodon':
+        case 'activitypub':
-            buttonColor = "#6364FF";
+            buttonColor = "#F1007E";
-            iconFile = icons.siMastodon.svg;
+            iconFile = icons.siActivitypub.svg;
             break;
-        case 'github':
+        case 'git':
-            buttonColor = "#181717";
+            buttonColor = "#FB923C";
-            iconFile = icons.siGithub.svg;
+            iconFile = icons.siForgejo.svg;
             break;
-        case 'discord':
+        case 'matrix':
-            buttonColor = "#5865F2";
+            buttonColor = "#000";
-            iconFile = icons.siDiscord.svg;
+            iconFile = icons.siMatrix.svg;
             break;    
         case 'facebook':
             buttonColor = "#0866FF";
@@ -56,7 +55,7 @@ const ContactButton: React.FC<ContactButtonProps> = ({platform, title, descripti
                         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">
+                        className="text-white font-bold rounded-xl 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" 

app/components/Navbar.tsx

@@ -14,16 +14,11 @@ const Navbar = () => {
         },
         {
             id: 2,
-            text: "Education",
-            link: "education"
-        },
-        {
-            id: 3,
             text: "Projects",
             link: "projects"
         },
         {
-            id: 4,
+            id: 3,
             text: "Hobbies",
             link: "hobbies"
         }

app/components/Photo.tsx

@@ -12,7 +12,7 @@ const Photo = ({src, href, alt}: any) => {
                 <div className="grid content-center">
                     <div className={classes}>
                         <Image 
-                            className="h-auto max-w-full rounded-lg" 
+                            className="h-auto max-w-full rounded-xl" 
                             src={src}
                             width={0} 
                             height={0} 
@@ -35,7 +35,7 @@ const Photo = ({src, href, alt}: any) => {
                     <div className="grid content-center">
                         <div className={classes}>
                             <Image 
-                                className="h-auto max-w-full rounded-lg" 
+                                className="h-auto max-w-full rounded-xl" 
                                 src={src}
                                 width={0} 
                                 height={0} 

app/components/Timeline.tsx

@@ -50,7 +50,7 @@ const Timeline = () => {
                             <p className="text-sm text-slate-600 dark:text-slate-100">{address}</p>
                             <p className="text-slate-500 dark:text-slate-100">{period}</p>
                             <Image 
-                                className="h-auto max-w-full rounded-lg" 
+                                className="h-auto max-w-full rounded-xl" 
                                 src={image}
                                 width={200} 
                                 height={200}

app/education/page.tsx

@@ -1,91 +0,0 @@
-"use client"
-import Image from 'next/image';
-import React, { useState, useEffect } from "react";
-import Link from 'next/link';
-import Timeline from '../components/Timeline'
-import Progress from '../components/ProgressBar/ProgressBar';
-import Photo from '../components/Photo'
-
-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> 
-                        <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>. 
-                        </p>
-                    </div>
-                </div>
-
-                <div className="flex flex-col gap-y-4">
-                    <div>
-                        <h2 className="text-3xl font-bold my-2">Diplomas & Reports</h2> 
-                    </div>
-
-                    <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="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">
-                                        <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>
-                                        <span className="text-xl">Social Studies: <span className='font-bold underline decoration-2 decoration-orange-500'>180</span>/200</span>
-                                    </div>
-                                </div>
-
-                                <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>
-                                    </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>
-                                    </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">reports</a> by clicking on the images!</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="grid grid-cols-4 max-lg:flex max-lg:flex-col">
-                        <p className="text-3xl font-bold">
-                            Past Schools
-                        </p>
-                        <div className="col-span-4">
-                            <Timeline />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-    );
-}

app/globals.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    html {
+        font-family: Cantarell, system-ui, sans-serif;
+    }
+}
+
 .wrapper {
     border: 3px solid blue;
 }

app/hobbies/page.tsx

@@ -241,7 +241,7 @@ export default function Hobbies() {
 
                                     <div className='flex flex-row gap-4 justify-center'>
                                         <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">
+                                            <button className="bg-[#0866FF] text-white font-bold rounded-xl 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"/>

app/layout.tsx

@@ -3,12 +3,9 @@ import Footer from "./components/Footer"
 import NextNProgress from "nextjs-progressbar"
 
 import type { Metadata } from 'next';
-// import { Inter } from 'next/font/google';
 import './globals.css';
 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.",

app/page.tsx

@@ -1,7 +1,6 @@
 "use client"
 import Image from 'next/image';
 import React from "react";
-import Link from 'next/link';
 import ContactIcons from './components/ContactIcons';
 import PhotoGrid from './components/PhotoGrid';
 import ContactButton from './components/ContactButton';
@@ -41,8 +40,7 @@ export default function Home() {
 
                     <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-5xl font-bold">Win 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>, undergraduate student, enjoyer of 60s-80s music, language nerd, and a hobbyist electrician.</p>
                         <ContactIcons />
@@ -54,7 +52,7 @@ export default function Home() {
 
                     <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 className='text-lg grid grid-cols-3 max-sm:flex max-sm:flex-col'>
                             <div>
                                 <span className='font-bold'>Nickname</span>: Win
                             </div>
@@ -64,17 +62,14 @@ export default function Home() {
                             <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>.
                         </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) 
+                            My other 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&apos;s company as well as running my own server setup, also known as a homelab.
+                            at my father&apos;s company.
                         </p>
                     </div>
                 </div>
@@ -95,27 +90,27 @@ export default function Home() {
                     </div>
 
                     <ContactButton 
-                        platform="github"
+                        platform="git"
                         title="Like my work?"
-                        description="Check them out on my GitHub!"
+                        description="Check them out on my Git instance!"
-                        href="https://github.com/WinsDominoes"
+                        href="https://git.winscloud.net/winsdominoes"
-                        username="@WinsDominoes"
+                        username="@winsdominoes"
                     />
 
                     <ContactButton 
-                        platform="mastodon"
+                        platform="activitypub"
                         title="See more posts?"
-                        description="Check updates on my Mastodon!"
+                        description="Check updates on my Fediverse!"
                         href="https://fedi.winscloud.net/@winsdominoes"
                         username="@winsdominoes"
                     />
 
                     <ContactButton 
-                        platform="discord"
+                        platform="matrix"
                         title="Get in touch?"
-                        description="Send me a message on Discord!"
+                        description="Send me a message on Matrix!"
-                        href="#"
+                        href="https://matrix.to/#/@winsdominoes:matrix.winscloud.net"
-                        username="winsdominoes"
+                        username="@winsdominoes"
                     />
                 </div>
             </div>

app/projects/page.tsx

@@ -239,7 +239,7 @@ export default function Projects() {
                             </div>
 
                             <Link href="https://discord.gg/EJBkV2SUT3" className='place-self-center'>
-                                <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">
+                                <button className="bg-[#5865F2] text-white font-bold rounded-xl 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"/>