perf(ui): use <Image /> component from next/image instead of comm…

…on `<img />`

next.config.js

@@ -1,24 +1,29 @@
 const { withContentlayer } = require('next-contentlayer')
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['raw.githubusercontent.com', 'github.com', 'i.imgur.com']
+  },
   async rewrites() {
     return [
       {
         source: '/rss',
-        destination: '/feed',
+        destination: '/feed'
       },
       {
         source: '/atom',
-        destination: '/feed',
+        destination: '/feed'
       },
       {
         source: '/rss.xml',
-        destination: '/feed',
+        destination: '/feed'
       },
       {
         source: '/atom.xml',
-        destination: '/feed',
-      },
+        destination: '/feed'
+      }
     ]
   }
 }

src/app/portifolio/components/about-section.tsx

@@ -1,6 +1,9 @@
 import Link from 'next/link'
+import Image from 'next/image'
 import { DownloadSimple, Book } from '@/shared/lib/phosphor-icons'
 
+
+
 export function AboutSection() {
   return (
     <div
@@ -9,15 +12,21 @@ export function AboutSection() {
     >
       <div className="portifolio-content-w flex flex-col justify-between md:flex-row">
         <div className="hidden flex-1 md:block">
-          <img
+          <Image
             src="https://github.com/mateusfg7.png"
+            height={460}
+            width={460}
+            alt="Mateus Felipe's picture"
             className="h-[30rem] w-96 rounded-3xl border border-neutral-500 object-cover"
           />
         </div>
         <div className="flex flex-1 flex-col items-center md:block">
           <h1 className="text-4xl text-blue-500 md:mb-8">Sobre mim</h1>
-          <img
+          <Image
             src="https://github.com/mateusfg7.png"
+            height={460}
+            width={460}
+            alt="Mateus Felipe's picture"
             className="my-14 w-1/2 rounded-3xl object-cover md:hidden"
           />
           <div className='px-4 md:p-0 text-xl flex flex-col gap-3 text-justify md:text-left'>

src/app/portifolio/components/home-section.tsx → src/app/portifolio/components/home-section/index.tsx

@@ -1,3 +1,7 @@
+import Image from "next/image";
+
+import codeTyping from './code-type.svg'
+
 export function HomeSection() {
   return (
     <div
@@ -21,7 +25,7 @@ export function HomeSection() {
           </span>
         </div>
         <div className="hidden w-64 flex-1 md:block">
-          <img src="/assets/portifolio/code-type.svg" className="w-full" />
+          <Image src={codeTyping} alt="Code Typing" className="w-full" />
         </div>
       </div>
     </div>

src/app/portifolio/components/projects-section/project-card.tsx

@@ -1,6 +1,7 @@
+import Image from 'next/image'
 import { FiFolder, FiGithub, FiGlobe } from 'react-icons/fi'
-import { ProjectData, techIcons } from './projects'
 import { BsDot } from 'react-icons/bs'
+import { ProjectData, techIcons } from './projects'
 
 interface Props {
   data: ProjectData
@@ -42,8 +43,10 @@ export function ProjectCard({ data }: Props) {
     <div className="flex w-[30rem] flex-col  overflow-hidden rounded-3xl bg-neutral-900 shadow-2xl shadow-black/30">
       {data.image && (
         <div className="h-56 w-full">
-          <img
+          <Image
             src={data.image}
+            width={2700}
+            height={2025}
             alt="Project image"
             className="h-full w-full object-cover object-top"
           />

src/app/portifolio/components/projects-section/projects.tsx

@@ -44,7 +44,7 @@ export const devProjects: ProjectData[] = [
   {
     title: 'Formatch',
     image:
-      'https://raw.githubusercontent.com/mateusfg7/formatch/main/.github/thumbnail.png',
+      'https://raw.githubusercontent.com/mateusfg7/formatch-app/main/.github/thumbnail.png',
     core_techs: ['typescript', 'react-native', 'expo'],
     description:
       'Aplicativo que conecta você a um profissional da área de construção civil, e ainda te mantém informado sobre novidades do setor. ',