From d48cfe12f2eb0bd53318cecfa0053e82990c4040 Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Fri, 25 Oct 2024 18:35:23 -0400
Subject: [PATCH] [#1] Cleaner homepage

---
 web/src/Routes.tsx                            |  2 +-
 .../ContactCard/ContactCard/ContactCard.tsx   | 30 ++++++++-----------
 .../Social/SocialLinks/SocialLinks.tsx        |  6 ++--
 web/src/components/Title/Titles/Titles.tsx    |  6 ++--
 web/src/layouts/NavbarLayout/NavbarLayout.tsx | 23 +++++++++-----
 web/src/pages/HomePage/HomePage.tsx           | 21 ++++++++-----
 .../AdminResumePage/AdminResumePage.tsx       |  2 +-
 7 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 2725059..8e540d6 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -31,7 +31,7 @@ const Routes = () => {
           <Route path="/admin/titles" page={TitleTitlesPage} name="titles" />
         </Set>
 
-        <Set wrap={ScaffoldLayout} title="Resume" titleTo="adminResume">
+        <Set wrap={ScaffoldLayout} title="Résumé" titleTo="adminResume">
           <Route path="/admin/resume" page={ResumeAdminResumePage} name="adminResume" />
         </Set>
 
diff --git a/web/src/components/ContactCard/ContactCard/ContactCard.tsx b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
index 5cec9ea..459a7ae 100644
--- a/web/src/components/ContactCard/ContactCard/ContactCard.tsx
+++ b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
@@ -10,8 +10,8 @@ interface ContactCardProps {
 }
 
 const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
-  const [width, setWidth] = useState()
-  const [height, setHeight] = useState()
+  const [width, setWidth] = useState<number>(0)
+  const [height, setHeight] = useState<number>(0)
 
   const observedDiv = useRef(null)
 
@@ -53,24 +53,18 @@ const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
         }}
       />
 
-      <div className="flex min-h-[calc(100dvh-6rem)] items-center justify-center">
-        <div className="card bg-base-100 shadow-xl md:card-side">
-          <figure>
-            <img
-              className="contact-me-image aspect-portrait object-cover"
-              src={portraitUrl}
-              alt={`${process.env.FIRST_NAME} ${process.env.LAST_NAME}`}
-            />
-          </figure>
-          <div
-            className="card-body mx-auto h-fit w-fit md:mx-0"
-            ref={observedDiv}
-          >
-            <h2 className="card-title justify-center text-3xl md:justify-start">
+      <div className="flex items-center justify-center">
+        <div className="card card-compact bg-base-100 shadow-xl md:card-side">
+          <img
+            className="contact-me-image rounded-box aspect-portrait p-2 object-cover"
+            src={portraitUrl}
+            alt={`${process.env.FIRST_NAME} ${process.env.LAST_NAME}`}
+          />
+          <div className="card-body mx-auto w-fit md:mx-0" ref={observedDiv}>
+            <h2 className="card-title justify-center text-3xl pb-2 md:justify-start">
               Contact Me
             </h2>
-            <p className="p-2"></p>
-            <div className="card-actions">
+            <div className="card-actions rounded-btn">
               <SocialLinks socials={socials} />
             </div>
           </div>
diff --git a/web/src/components/Social/SocialLinks/SocialLinks.tsx b/web/src/components/Social/SocialLinks/SocialLinks.tsx
index 58d9488..52519f4 100644
--- a/web/src/components/Social/SocialLinks/SocialLinks.tsx
+++ b/web/src/components/Social/SocialLinks/SocialLinks.tsx
@@ -3,11 +3,13 @@ import { ContactCardPortrait } from 'types/graphql'
 import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
 
 const SocialLinks = ({ socials }: ContactCardPortrait) => (
-  <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
+  <div
+    className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2 rounded-btn`}
+  >
     {[...socials]
       .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
       .map((social, i) => (
-        <div key={i} className="tooltip" data-tip={social.name}>
+        <div key={i} className="tooltip rounded-btn" data-tip={social.name}>
           <a
             className="btn btn-square"
             href={`${baseUrls[social.type]}${social.username}`}
diff --git a/web/src/components/Title/Titles/Titles.tsx b/web/src/components/Title/Titles/Titles.tsx
index 610b42c..76ba460 100644
--- a/web/src/components/Title/Titles/Titles.tsx
+++ b/web/src/components/Title/Titles/Titles.tsx
@@ -10,15 +10,15 @@ export const Titles = ({ titles }: TitlesProps) => {
     <>
       {titlesFiltered.length >= 3 && (
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-center items-center">
-          <span className="badge badge-lg badge-ghost">
+          <span className="badge md:badge-lg badge-ghost">
             {titlesFiltered[0]}
           </span>
           <div className="hidden sm:divider sm:divider-horizontal" />
-          <span className="badge badge-lg badge-ghost">
+          <span className="badge md:badge-lg badge-ghost">
             {titlesFiltered[1]}
           </span>
           <div className="hidden sm:divider sm:divider-horizontal" />
-          <span className="badge badge-lg badge-ghost">
+          <span className="badge md:badge-lg badge-ghost">
             {titlesFiltered[2]}
           </span>
         </div>
diff --git a/web/src/layouts/NavbarLayout/NavbarLayout.tsx b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
index 5301911..88adcb8 100644
--- a/web/src/layouts/NavbarLayout/NavbarLayout.tsx
+++ b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -1,7 +1,7 @@
 import { mdiMenu, mdiLogout, mdiCog } from '@mdi/js'
 import Icon from '@mdi/react'
 
-import { Link, routes } from '@redwoodjs/router'
+import { Link, routes, useRoutePath, useRoutePaths } from '@redwoodjs/router'
 
 import { useAuth } from 'src/auth'
 import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
@@ -17,6 +17,9 @@ type NavbarLayoutProps = {
 }
 
 const NavbarLayout = ({ children }: NavbarLayoutProps) => {
+  const routePaths = useRoutePaths()
+  const routePath = useRoutePath()
+
   const { isAuthenticated, logOut } = useAuth()
 
   const navbarRoutes: NavbarRoute[] = [
@@ -25,7 +28,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
       path: routes.projects(),
     },
     {
-      name: 'Resume',
+      name: 'Résumé',
       path: routes.resume(),
     },
     {
@@ -56,7 +59,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
       path: routes.titles(),
     },
     {
-      name: 'Resume',
+      name: 'Résumé',
       path: routes.adminResume(),
     },
   ]
@@ -80,12 +83,14 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
       <ToasterWrapper />
       <div className="sticky top-0 z-50 p-2">
         <div className="navbar rounded-xl bg-base-300 backdrop-blur bg-opacity-90 shadow-xl">
-          <div className="navbar-start space-x-2 lg:first:space-x-0">
+          <div
+            className={`navbar-start space-x-2 ${!isAuthenticated && routePath === routePaths.home ? 'first:space-x-0' : 'lg:first:space-x-0'}`}
+          >
             <div className="dropdown">
               <div
                 tabIndex={0}
                 role="button"
-                className="btn btn-square btn-ghost lg:hidden"
+                className={`btn btn-square btn-ghost ${!isAuthenticated && routePath === routePaths.home ? 'hidden' : 'lg:hidden'}`}
               >
                 <Icon path={mdiMenu} className="text-base-content-100 size-8" />
               </div>
@@ -94,12 +99,12 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
                 tabIndex={0}
                 className="menu dropdown-content -ml-2 mt-4 w-36 gap-2 rounded-box bg-base-200 shadow-xl"
               >
-                {isAuthenticated && (
+                {isAuthenticated && routePath !== routePaths.home && (
                   <p className="btn btn-active no-animation btn-sm btn-block">
                     Public
                   </p>
                 )}
-                {navbarButtons()}
+                {routePath !== routePaths.home && navbarButtons()}
                 {isAuthenticated && (
                   <>
                     <p className="btn btn-active no-animation btn-sm btn-block">
@@ -129,7 +134,9 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
             </Link>
           </div>
           <div className="navbar-center hidden lg:flex">
-            <div className="space-x-2 font-syne">{navbarButtons()}</div>
+            <div className="space-x-2 font-syne">
+              {routePath !== routePaths.home && navbarButtons()}
+            </div>
           </div>
           <div className="navbar-end space-x-2">
             {isAuthenticated && (
diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx
index 016b2c7..5140edf 100644
--- a/web/src/pages/HomePage/HomePage.tsx
+++ b/web/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import { mdiCompass, mdiContacts } from '@mdi/js'
+import { mdiCodeBraces, mdiContacts, mdiFileDocument } from '@mdi/js'
 import Icon from '@mdi/react'
 import type { TCountryCode } from 'countries-list'
 import { getCountryData } from 'countries-list'
@@ -24,7 +24,7 @@ const HomePage = () => (
     <div className="hero min-h-[calc(100dvh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
         <div className="flex flex-col text-center gap-8">
-          <h1 className="text-3xl sm:text-5xl font-bold">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold">
             Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`}
           </h1>
           <TitlesCell />
@@ -39,17 +39,24 @@ const HomePage = () => (
               .join(', ')}
           </h3>
         </div>
-        <div className="flex gap-2">
+        <div className="flex flex-col sm:flex-row gap-2">
           <Link
             to={routes.projects()}
-            className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            className="btn btn-primary btn-outline sm:w-40 sm:btn-lg"
           >
-            <Icon path={mdiCompass} className="size-6" />
-            Explore
+            <Icon path={mdiCodeBraces} className="size-6" />
+            Projects
+          </Link>
+          <Link
+            to={routes.resume()}
+            className="btn btn-primary btn-outline sm:w-40 sm:btn-lg"
+          >
+            <Icon path={mdiFileDocument} className="size-6" />
+            Résumé
           </Link>
           <Link
             to={routes.contact()}
-            className="btn btn-primary btn-outline sm:btn-wide btn-lg"
+            className="btn btn-primary btn-outline sm:w-40 sm:btn-lg"
           >
             <Icon path={mdiContacts} className="size-6" />
             Contact
diff --git a/web/src/pages/Resume/AdminResumePage/AdminResumePage.tsx b/web/src/pages/Resume/AdminResumePage/AdminResumePage.tsx
index 36c289b..a82ae30 100644
--- a/web/src/pages/Resume/AdminResumePage/AdminResumePage.tsx
+++ b/web/src/pages/Resume/AdminResumePage/AdminResumePage.tsx
@@ -5,7 +5,7 @@ import AdminResumeCell from 'src/components/Resume/AdminResumeCell/AdminResumeCe
 const ResumePage = () => {
   return (
     <>
-      <Metadata title="Resume" />
+      <Metadata title="Résumé" />
       <AdminResumeCell />
     </>
   )