added education page

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+    "extends": "next/core-web-vitals"
 }

.gitignore

@@ -34,3 +34,14 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# history
+.history/
+
+# mac
+._*
+._.DS_Store
+.*
+
+# diploma
+public/images/photos/diplomas/

app/components/Navbar.tsx

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

app/education/page.tsx

@@ -0,0 +1,67 @@
+"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 max-lg:justify-center">
+                    <div className="col-span-3">
+                    <h2 className="text-5xl font-bold mt-2">Education</h2> 
+                        <p className="text-base mt-4">
+                            I have studied in schools located in <span className='font-bold underline decoration-2 decoration-green-500'>Bangkok</span> and <span className='font-bold underline decoration-2 decoration-red-500'>Chonburi</span>. 
+                            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 underline decoration-2 decoration-sky-500'>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-lg:flex max-lg: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-lg:flex max-lg: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/3H3ZqDHDc3mNWBe" 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/kmitl-tep.png" href="https://cloud.winsdominoes.net/s/3MbnmwHqXkX4axe" alt="KMITL Test of English Proficiency (KMITL-TEP)" dim="false"></Photo>
+                                    </div>
+                                </div>
+                            </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/hobbies/page.tsx

@@ -108,8 +108,7 @@ export default function Hobbies() {
                                     <div className="col-span-2 flex flex-col">
                                         <Progress text="paint.net" progress="90" />
                                     </div>
-                                </div>    
+                                </div>
-                            <div/>
                         </div>
 
                         <div className="col-span-6">

app/page.tsx

@@ -23,7 +23,7 @@ export default function Home() {
 
                     <div className="col-span-2 grid gap-4 content-center">
                         <p className="text-5xl font-bold">Win Pattanaphol</p>
-                        <p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">full-stack developer</a>, high schooler, enjoyer of 60s-80s music, language nerd, an electrician, and a professional terrible-jokes-maker from Thailand 🇹🇭</p>
+                        <p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">full-stack hobbyist developer</a>, high schooler, enjoyer of 60s-80s music, language nerd, an electrician, and a professional terrible-jokes-maker from Thailand 🇹🇭</p>
                         <ContactIcons />
                     </div>
 
@@ -75,16 +75,6 @@ export default function Home() {
                     </div>
                 </div>
 
-                <div className="grid grid-cols-4 max-lg:flex max-lg:flex-col">
-                    <div className="col-span-4">
-                        <p className="text-3xl font-bold">
-                            Education
-                        </p>
-
-                        <Timeline />
-                    </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-3xl font-bold">

package-lock.json

@@ -15,7 +15,8 @@
                 "next-video": "^0.9.1",
                 "react": "^18",
                 "react-dom": "^18",
-                "react-icons": "^4.12.0"
+                "react-icons": "^4.12.0",
+                "react-odometerjs": "^3.1.0"
             },
             "devDependencies": {
                 "@types/node": "^20",
@@ -4766,6 +4767,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/odometer": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/odometer/-/odometer-0.4.8.tgz",
+            "integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg=="
+        },
         "node_modules/once": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -5300,6 +5306,18 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
+        "node_modules/react-odometerjs": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/react-odometerjs/-/react-odometerjs-3.1.0.tgz",
+            "integrity": "sha512-jHG1wyNgg3J7OYaJugixkQTPpUHK5ddfa13XSQlxs5YR5qIWIPwVtjlxSp8xD3UuXjUXjjGAyCyYZ9k3ar8aCg==",
+            "dependencies": {
+                "odometer": "^0.4.8"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8.0",
+                "react-dom": ">= 16.8.0"
+            }
+        },
         "node_modules/react-transition-group": {
             "version": "2.9.0",
             "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",

package.json

@@ -16,7 +16,8 @@
         "next-video": "^0.9.1",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^4.12.0"
+        "react-icons": "^4.12.0",
+        "react-odometerjs": "^3.1.0"
     },
     "devDependencies": {
         "@types/node": "^20",