[#1] Cleaner homepage

2024-10-25 18:35:23 -04:00
parent 3a9cc20f86
commit d48cfe12f2
7 changed files with 50 additions and 40 deletions
--- 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>

--- 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>
--- 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}`}
--- 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>
--- 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 && (
--- 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
--- 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 />
    </>
  )