Merge pull request #8 from SamuelMTeixeira/feature/icons

Improved performance
SamuelMTeixeira · Oct 13, 2024 · 7e201ee · 7e201ee
2 parents 26f9543 + e8b6d5b
commit 7e201ee
Show file tree

Hide file tree

Showing 30 changed files with 250 additions and 299 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "clsx": "^2.1.1",
     "devicons-react": "1.3.0-beta.0.1.4",
     "framer-motion": "^10.18.0",
-    "lucide-react": "^0.395.0",
+    "hugeicons-react": "^0.3.0",
     "next": "14.2.14",
     "next-intl": "^3.20.0",
     "next-themes": "^0.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/logo-128x128.png b/public/logo-128x128.png
diff --git a/public/logo-128x128.webp b/public/logo-128x128.webp
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo.webp b/public/logo.webp
diff --git a/public/profile.webp b/public/profile.webp
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -37,9 +37,9 @@ export const metadata: Metadata = {
   },
   openGraph: {
     images: {
-      url: '/logo.png',
+      url: '/logo.webp',
       alt: 'Orange letter S, used as the representative logo of the website',
-      type: 'image/png',
+      type: 'image/webp',
     },
     title: 'Samuel Molendolff Teixeira',
     type: 'website',
@@ -79,7 +79,6 @@ export default async function RootLayout({
             </Suspense>
           </ReactQueryProvider>
         </Providers>
-
         <Toaster />
       </body>
     </html>

diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import Image from 'next/image'
 import anime from 'animejs'
 
@@ -63,7 +63,7 @@ export default function Loading() {
     <div className="flex h-screen items-center justify-center">
       <Image
         id="logo"
-        src="/logo-128x128.png"
+        src="/logo-128x128.webp"
         alt="Website logo, an orange letter S"
         className="h-20 w-20"
         width={128}

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import AboutMe from '@/components/sections/aboutme'
 import Contact from '@/components/sections/contact'
 import Footer from '@/components/sections/footer'
@@ -8,30 +6,25 @@ import Hero from '@/components/sections/hero'
 import ProjectPreview from '@/components/sections/project-preview'
 import Projects from '@/components/sections/projects'
 import Skills from '@/components/sections/skills'
-import useProject from '@/hooks/useProject'
-import { Suspense } from 'react'
-import Loading from './loading'
 
 export default function Page() {
-  const { projects } = useProject()
-
   return (
-    <Suspense fallback={<Loading />}>
+    <>
       <Header />
 
       <Hero />
 
-      <ProjectPreview data={projects.map((project) => project.imageUrl)} />
+      <ProjectPreview />
 
       <Skills />
 
       <AboutMe />
 
-      <Projects data={projects} />
+      <Projects />
 
       <Contact />
 
       <Footer />
-    </Suspense>
+    </>
   )
 }
diff --git a/src/app/robots.ts b/src/app/robots.ts
@@ -6,7 +6,6 @@ export default function robots(): MetadataRoute.Robots {
       {
         userAgent: '*',
         allow: ['/'],
-        disallow: '/preview.png',
       },
     ],
     sitemap: ['https://samuelmteixeira.dev/sitemap.xml'],

diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -7,8 +7,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
       lastModified: new Date(),
       alternates: {
         languages: {
-          es: 'https://samuelmteixeira.dev/en',
-          de: 'https://samuelmteixeira.dev/pt',
+          en: 'https://samuelmteixeira.dev/en',
+          pt: 'https://samuelmteixeira.dev/pt',
         },
       },
     },

diff --git a/src/assets/img/console.png b/src/assets/img/console.png
diff --git a/src/assets/img/console.webp b/src/assets/img/console.webp
diff --git a/src/components/project/project-card.tsx b/src/components/project/project-card.tsx
@@ -1,8 +1,5 @@
-'use client'
-
 import Image from 'next/image'
 import { Button } from '@/components/ui/button'
-import { ArrowUpRight, CodeXml } from 'lucide-react'
 import {
   Card,
   CardContent,
@@ -13,11 +10,12 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { useTranslations } from 'next-intl'
 import { ProjectProps } from '@/services/projects'
+import { LinkSquare02Icon, SourceCodeIcon } from 'hugeicons-react'
 
 export default function ProjectCard({
   imageUrl,
-  sourceUrl = '',
-  previewUrl = '',
+  sourceUrl,
+  previewUrl,
   title,
   category,
   tags,
@@ -39,8 +37,10 @@ export default function ProjectCard({
         <Image
           src={imageUrl}
           fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           alt={`Representative image of the project ${title}`}
           className="w-full h-auto object-cover"
+          loading="lazy"
         />
         <span className="absolute inset-0 bg-gradient-to-t from-white/[.5] to-transparent"></span>
       </div>
@@ -69,14 +69,15 @@ export default function ProjectCard({
           href={sourceUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="w-full lg:w-auto"
+          className={`w-full lg:w-auto ${sourceUrl ? '' : 'pointer-events-none'}`}
         >
           <Button
+            aria-label="View source code"
             variant="outline"
             className="text-sm flex items-center w-full"
             disabled={!sourceUrl}
           >
-            <CodeXml className="w-4 h-4 mr-2" />
+            <SourceCodeIcon className="w-4 h-4 mr-2" />
             {t('source')}
           </Button>
         </a>
@@ -85,14 +86,16 @@ export default function ProjectCard({
           href={previewUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="w-full lg:w-auto"
+          className={`w-full lg:w-auto ${previewUrl ? '' : 'pointer-events-none'}`}
         >
           <Button
+            aria-label="View project"
             className="text-sm flex items-center w-full"
             disabled={!previewUrl}
           >
             {t('view')}
-            <ArrowUpRight className="w-4 h-4 ml-2" />
+
+            <LinkSquare02Icon className="w-4 h-4 ml-2" />
           </Button>
         </a>
       </CardFooter>

diff --git a/src/components/sections/aboutme.tsx b/src/components/sections/aboutme.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import {
   Card,
   CardContent,
@@ -10,7 +8,7 @@ import {
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { useTranslations } from 'next-intl'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight02Icon } from 'hugeicons-react'
 
 export default function AboutMe() {
   const t = useTranslations('Aboutme')
@@ -34,8 +32,8 @@ export default function AboutMe() {
             <div className="flex flex-row items-center gap-4 lg:gap-8">
               <Avatar className="w-14 lg:w-20 h-auto">
                 <AvatarImage
-                  src="https://github.com/samuelmteixeira.png"
-                  alt="@samuelmteixeira"
+                  src="/profile.webp"
+                  alt="Photo of Samuel Molendolff Teixeira"
                 />
                 <AvatarFallback>S</AvatarFallback>
               </Avatar>
@@ -52,7 +50,7 @@ export default function AboutMe() {
                   >
                     {t('linkedinProfile')}
 
-                    <ArrowRight size={14} />
+                    <ArrowRight02Icon size={14} />
                   </a>
                 </CardDescription>
               </div>

diff --git a/src/components/sections/contact.tsx b/src/components/sections/contact.tsx
@@ -16,8 +16,8 @@ import {
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import useEmail from '@/hooks/useEmail'
-import { LoaderCircle } from 'lucide-react'
 import Section from '@/components/ui/section'
+import { Loading03Icon } from 'hugeicons-react'
 
 export default function Projects() {
   const t = useTranslations('Getintouch')
@@ -100,13 +100,14 @@ export default function Projects() {
 
                 <CardFooter className="flex justify-center p-0">
                   <Button
+                    aria-label="Submit form"
                     type="submit"
                     size={'default'}
                     disabled={isPending}
                     className="md:h-11 md:px-8"
                   >
                     {isPending && (
-                      <LoaderCircle className="mr-2 h-5 w-5 animate-spin" />
+                      <Loading03Icon className="mr-2 h-5 w-5 animate-spin" />
                     )}
                     {t('form.submit')}
                   </Button>

diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
@@ -3,26 +3,26 @@ import Image from 'next/image'
 export default function Footer() {
   return (
     <footer className="container mt-8 text-xs font-medium text-slate-500">
-      <div className="flex flex-col space-y-4 border-t border-input py-8 items-center justify-between md:flex-row md:space-y-0">
+      <div className="flex flex-col items-center justify-between py-8 border-t border-input md:flex-row md:space-y-0 space-y-4">
         <p>
           © 2022 - 2024,
           <a
-            className="text-primary/[.8]"
+            className="font-bold text-foreground"
             href="https://github.com/samuelmteixeira"
             target="_blank"
             rel="noopener noreferrer"
           >
-            @SamuelMTeixeira
+            {' '}
+            @SamuelMTeixeira.
           </a>
-          .
         </p>
 
         <Image
-          src="/logo.png"
+          src="/logo.webp"
           width={32}
           height={32}
           alt="Website logo"
-          className="w-6 h-6 hidden md:block"
+          className="hidden md:block w-6 h-6"
         />
 
         <p>Coded with 🧡 and ☕</p>

diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import Image from 'next/image'
-import { Menu } from 'lucide-react'
-
+import { Menu01Icon } from 'hugeicons-react'
 import {
   Menubar,
   MenubarContent,
@@ -27,28 +26,28 @@ export default function Header() {
 
   return (
     <header className="container mx-auto flex items-center justify-between h-[10vh]">
-      <Image src="/logo.png" width={32} height={32} alt="Website logo" />
+      <Image src="/logo.webp" width={32} height={32} alt="Website logo" />
 
-      <h1 className="font-bricolage font-bold hidden md:block md:text-3xl text-center">
+      <h1 className="hidden md:block font-bricolage font-bold text-center md:text-3xl">
         Samuel M. Teixeira
       </h1>
 
       <Menubar>
         <MenubarMenu>
           <MenubarTrigger asChild>
-            <Button size={'icon'} variant={'outline'}>
-              <Menu size={24} />
+            <Button aria-label="open menu" size="icon" variant="outline">
+              <Menu01Icon size={24} />
             </Button>
           </MenubarTrigger>
           <MenubarContent className="rounded-sm">
             <MenubarSub>
               <MenubarSubTrigger>{t('languages.title')}</MenubarSubTrigger>
               <MenubarSubContent>
                 <MenubarRadioGroup value={pathname}>
-                  {locales.map((locale, index) => (
+                  {locales.map((locale) => (
                     <MenubarRadioItem
                       onSelect={() => router.replace(locale)}
-                      key={index}
+                      key={locale}
                       value={locale}
                     >
                       {t(`languages.${locale}`)}