From a050b626d1769296d09e6ee12b8c88865359f1a0 Mon Sep 17 00:00:00 2001
From: WinsDominoes <winsdominoes2018@gmail.com>
Date: Fri, 22 Dec 2023 00:15:59 +0700
Subject: [PATCH] fixed frontpage responsive + minor changes on hobbies

---
 app/components/Navbar.tsx |  2 +-
 app/hobbies/page.tsx      | 16 +--------------
 app/page.tsx              | 42 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index bd3355e..9ace3b5 100755
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -35,7 +35,7 @@ const Navbar = () => {
                 {links.map(({ id, text, link }) => (
                     <li
                         key={id}
-                        className="nav-links px-4 cursor-pointer capitalize font-medium text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
+                        className="nav-links px-4 cursor-pointer capitalize font-medium text-base text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
                     >
                         <Link href={link}>{text}</Link>
                     </li>
diff --git a/app/hobbies/page.tsx b/app/hobbies/page.tsx
index 9ce3830..4e773d2 100755
--- a/app/hobbies/page.tsx
+++ b/app/hobbies/page.tsx
@@ -92,25 +92,11 @@ export default function Hobbies() {
 
                 <div>
                     <div className='my-2'>
-                        <h2 className="text-3xl font-bold my-2">Graphic Design</h2>       
+                        <h2 className="text-3xl font-bold my-2">Graphics Design</h2>       
                         <p className="text-base">I make various types of work, ranging from <span className="font-bold underline decoration-2 decoration-indigo-500">infographics</span> to <span className="font-bold underline decoration-2 decoration-pink-500">fashion show</span> logos. </p> 
                     </div>
                          
                     <div className="grid grid-cols-6 gap-4">
-                        <div className="col-span-6">
-                                <div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
-                                    <div className="col-span-2 flex flex-col">
-                                        <Progress text="Adobe Illustrator" progress="60" />
-                                    </div>
-                                    <div className="col-span-2 flex flex-col">
-                                        <Progress text="Krita" progress="90" />
-                                    </div>
-                                    <div className="col-span-2 flex flex-col">
-                                        <Progress text="paint.net" progress="90" />
-                                    </div>
-                                </div>
-                        </div>
-
                         <div className="col-span-6">
                             <div className="my-2">
                                 <h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2> 
diff --git a/app/page.tsx b/app/page.tsx
index 1c9d46c..bc7202c 100755
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -41,7 +41,7 @@ export default function Home() {
                 </div>
 
                 <div>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                    <div className="grid grid-cols-4 max-sm:hidden gap-6">
                         <div className="grid gap-4 content-center">
                             <div>
                                 <Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
@@ -56,7 +56,7 @@ export default function Home() {
                             </div>
                         </div>
                         <div className="grid gap-4">
-                            <div>
+                            <div className="mt-12">
                                 <Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
                             </div>
                             <div>
@@ -70,6 +70,42 @@ export default function Home() {
                         </div>
                     </div>
 
+                    <div className="hidden max-sm:grid max-sm:grid-cols-2 max-sm:gap-6">
+                        <div className="grid gap-4 content-center">
+                            <div>
+                                <Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
+                            </div>
+                            <div>
+                                <Photo src="/images/photos/hardware/homelab.jpg" href="/projects" alt="Homelab"></Photo>
+                            </div>
+                        </div>
+                        <div className="grid gap-4">
+                            <div>
+                                <Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
+                            </div>
+                            <div>
+                                <Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
+                            </div>
+                        </div>
+                        <div className="grid gap-4">
+                            <div>
+                                <Photo src="/images/photos/hardware/hdd.jpg" href="/projects" alt="Storage Server"></Photo>
+                            </div>
+                            <div>
+                                <Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="/hobbies" alt="Spider-Man 2 PS5 Event"></Photo>
+                            </div>
+                        </div>
+                        <div className="grid gap-4 content-center">
+                            <div>
+                                <Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
+                            </div>
+                            
+                            <div>
+                                <Photo src="/images/photos/software/tts.jpg" href="/projects" alt="Storage Server"></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">projects</a> and <a className="font-bold underline decoration-2 decoration-pink-500">hobbies</a> by clicking on the images!</p>
                     </div>
@@ -77,7 +113,7 @@ export default function Home() {
 
                 <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">
+                        <p className="text-4xl font-bold">
                             Contact
                         </p>
                     </div>