site: fixes and mobile updates

src/app/about/page.tsx

@@ -97,21 +97,21 @@ const projects = [
 export default function About() {
     return (
         <div>
-            <div className="text-5xl md:text-6xl inline-block mb-5 font-extrabold rounded-full">About me</div>
-            <div className="text-2xl">
+            <div className="md:text-5xl sm:text-4xl inline-block mb-5 font-extrabold rounded-full">About me</div>
+            <div className="md:text-2xl sm:text-xl">
                 I&apos;ve started experimenting with coding when I was 13 and from that point onwards I&apos;ve decided to follow the path of being a developer. I hope to meet others that are also interested in this field and collaborate with them aswell as seek out new opportunities.
             </div>
 
             <div>
-                <div className="mt-5 mb-3 text-5xl font-extrabold">Tech Stack</div>
+                <div className="mt-5 mb-3 md:text-5xl font-extrabold sm:text-4xl">Tech Stack</div>
                 {
                     Object.entries(tech).map(([name, entries]) => (
                         <div className="flex flex-row items-center gap-2 mb-1" key={name.toLowerCase()}>
-                            <Button span={true} className="bg-primary">{name}</Button>
+                            <Button span={true} className="bg-primary md:text-xl md:px-8 sm:text-base sm:px-5">{name}</Button>
                             <div className="flex flex-row items-center gap-1.5">
                                 {entries.map(({ name, url }) =>
                                     <Link href={{ pathname: url }} key={name.toLowerCase()}>
-                                        <Icon icon={name.toLowerCase()} />
+                                        <Icon icon={name.toLowerCase()} className="sm:w-[32px] sm:h-[32px]" />
                                     </Link>
                                 )}
                             </div>
@@ -121,15 +121,15 @@ export default function About() {
             </div>
 
             <div>
-                <div className="mt-5 mb-3 text-5xl font-extrabold">Projects</div>
-                <div className="grid gap-1 grid-cols-3">
+                <div className="mt-5 mb-3 md:text-5xl sm:text-4xl font-extrabold">Projects</div>
+                <div className="grid gap-1 grid-cols-3 sm:grid-cols-2">
                     {
                         Object.values(projects).map((i) => (
                             <Card
-                                key={i.title}
+                                key={i.title.toLowerCase()}
                                 title={i.title}
                                 description={i.description}
-                                titleUrl={i.url}
+                                cardUrl={i.url}
                                 icon={<Icon icon={i.icon} width={32} height={32} />}
                             />
                         ))

src/app/components/Card.tsx

@@ -1,18 +1,19 @@
-export function Card({ className, button, titleUrl, cardUrl, title, description, icon, children }: { className?: string, button?: React.ReactNode, titleUrl?: string, cardUrl?: string, title: string, description?: string | React.ReactNode, icon?: React.ReactNode, children?: React.ReactNode }): JSX.Element {
-    return (
-        <div className={`${className} px-4 py-4 rounded-lg shadow bg-primary`}>
+import Link from "next/link";
 
-            <a href={titleUrl ?? undefined} target="_blank" className="flex flex-row gap-2 mb-2 shrink">
+export function Card({ className, button, cardUrl, title, description, icon, children }: { className?: string, button?: React.ReactNode, cardUrl?: string, title: string, description?: string | React.ReactNode, icon?: React.ReactNode, children?: React.ReactNode }): JSX.Element {
+    return (
+        <a href={cardUrl ?? undefined} target="_blank" className={`${className} px-4 py-4 rounded-lg shadow bg-primary`}>
+            <div className="flex flex-row items-start gap-2 mb-2 shrink">
                 {icon}
-                <h5 className="text-lg font-semibold place-self-center text-gray-900 dark:text-white">{title}</h5>
-            </a>
-            <div className="flex flex-row justify-between text-gray-500 dark:text-gray-400">
+                <h5 className="md:text-lg sm:text-base font-semibold place-self-center text-pretty text-gray-900 dark:text-white">{title}</h5>
+            </div>
+            <div className="flex flex-row items-start justify-between text-gray-500 dark:text-gray-400">
                 <span className="mr-[5px]">
                     {description}
                     {children}
                 </span>
                 {button}
             </div>
-        </div>
+        </a>
     )
 }

src/app/components/Footer.tsx

@@ -5,15 +5,13 @@ import tailwind from "../../../public/tailwind.png";
 export default function Footer() {
     return (
         //#292e2e - old color
-        <footer className="bottom-0 rounded-2xl shadow m-4 bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d]">
-            <div className="w-full mx-auto max-w-screen-xl pt-2 pb-2 flex">
-                <div className="sm:text-lg md:text-xl mr-auto ml-auto text-center flex items-center">
+        <footer className="rounded-2xl shadow mx-4 mb-4 mt-auto bg-secondary pt-2 pb-2">
+                <div className="sm:text-base md:text-xl mx-auto text-center items-center justify-center flex flex-row">
                     Made with ❤️ using
-                    {<Image src={nextjs} height={32} width={32} alt={"Tailwind CSS"} className="mx-2" />}
+                    {<Image src={nextjs} height={32} width={32} alt={"Tailwind CSS"} className="mx-1" />}
                     and
-                    {<Image src={tailwind} height={32} width={32} alt={"NextJS"} className="mx-2" />}
+                    {<Image src={tailwind} height={32} width={32} alt={"NextJS"} className="mx-1" />}
                 </div>
-            </div>
         </footer>
     )
 }

src/app/components/NavBar.tsx

@@ -11,7 +11,7 @@ const navigation: { id: Route; title: string; }[] = [
     },
     {
         id: "/about",
-        title: "About Me"
+        title: "About"
     },
     {
         id: "/contact",
@@ -25,22 +25,23 @@ export default function Navbar() {
 
     return (
         <div className="w-full ps-10 pe-10 sm:ps-3 sm:pe-3 fixed top-0 z-20 bg-secondary">
-            <nav className='flex justify-between items-center h-16 gap-2'>
-                <div className="flex flex-row items-center gap-2">
+            <nav className='flex justify-between items-center h-16'>
+                <div className="flex flex-row items-center gap-2 inline-block">
                     <button>
                         <Image src="/githubpfp.webp" width={460} height={460} className='w-9 h-9' alt={""} onClick={() => {
                             if (pathname !== "/") router.push("/")
                         }} />
                     </button>
-                    <span className="text-base lg:text-2xl"> Personal Website </span>
+                    <div className="sm:text-sm md:text-xl">Personal Website</div>
                 </div>
-                <div className='inline-flex flex-row gap-5 sm:gap-2'>
+                <div className='inline-flex flex-row gap-3 sm:gap-1'>
                     {navigation.map((nav) => (
-                        <Button key={nav.id}
+                        <Button 
+                            key={nav.id}
                             className={`${pathname === nav.id
                                 ? "text-white"
                                 : "text-zinc-300"
-                                } bg-zinc-800 hover:text-white text-[18px] sm:text-base font-medium pl-5 pr-5 items-center transition ease-in 500ms 
+                                } bg-zinc-800 hover:text-white md:text-base sm:text-sm font-medium md:px-5 sm:px-2 items-center transition ease-in 500ms 
                             `}
                             onClick={() => router.push(nav.id)}
                         >

src/app/contact/page.tsx

@@ -49,6 +49,6 @@ export default function Contact() {
                     </Button>
                 ))}
             </div>
-        </div >
+        </div>
     )
 }

src/app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
       <body className={`${inter.className} mt-16`}>
         <Suspense>
           <Navbar />
-          <div className="px-20 sm:px-5 pt-5">
+          <div className="px-20 sm:px-5 pt-5 min-h-[100dvh]">
             {children}
           </div>
           <Footer />

src/app/page.tsx

@@ -5,24 +5,24 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div>
-      <div className="text-5xl md:text-6xl inline-block mb-5 font-extrabold rounded-full">Hi, I&apos;m <span className=" bg-gradient-to-r from-[#444a4a] via-[#294242] to-[#4c5c61] text-transparent bg-clip-text">Nikos!</span></div>
-          
-        <div className="text-2xl">
-          I am a 18 year old living in Greece who is striving to become an software engineer who is also experimenting in different fields such as web development & Discord bot development.
-          <div>I also love playing games and listening to hip hop, specifically Eminem.</div>
-          
-          
+      <div className="sm:text-5xl md:text-6xl inline-block mb-5 font-extrabold rounded-full">Hi, I&apos;m <span className=" bg-gradient-to-r from-[#444a4a] via-[#294242] to-[#4c5c61] text-transparent bg-clip-text">Nikos!</span></div>
+
+      <div className="md:text-2xl sm:text-xl">
+        I am a 18 year old living in Greece who is striving to become an software engineer who is also experimenting in different fields such as web development & Discord bot development.
+        <div>I also love playing games and listening to hip hop, specifically Eminem.</div>
+
+
         <div className="pt-10 flex items-center">
           You can become a sponsor for me on GitHub if you wish to support me:
-              <Link href={"https://github.com/sponsors/nikosszzz"}>
-                <Button className="ml-3 box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-primary">
-                  <div className="flex flex-row gap-2 items-center">
-                    <Icon icon={"github"} width={32} height={32} className="w-8 h-8 rounded-xl" /> <span className="text-lg font-bold" > GitHub </span>
-                  </div>
-                </Button>
-              </Link>
-          </div>
+          <Link href={"https://github.com/sponsors/nikosszzz"}>
+            <Button className="ml-3 box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-primary">
+              <div className="flex flex-row gap-2 items-center">
+                <Icon icon={"github"} width={32} height={32} className="w-8 h-8 rounded-xl" /> <span className="text-lg font-bold" > GitHub </span>
+              </div>
+            </Button>
+          </Link>
         </div>
+      </div>
     </div>
   )
 }