feat: finish contact me and footer sections

src/components/BadgeTech/index.tsx

@@ -0,0 +1,14 @@
+import { ITech } from '@/constants/techs'
+
+type IBadgeTechProps = ITech
+
+export default function BadgeTech(props: Readonly<IBadgeTechProps>) {
+  return (
+    <div
+      key={props.slug}
+      className="rounded-md bg-white/75 px-1.5 py-0.5 text-slate-900"
+    >
+      <p className="flex-none font-medium">{props.description}</p>
+    </div>
+  )
+}

src/components/Footer/index.tsx

@@ -1,3 +1,37 @@
+import { ITech } from '@/constants/techs'
+import ImageTechStack from '../ImageTechStack'
+import BadgeTech from '../BadgeTech'
+
 export default function Footer() {
-  return <></>;
+  const currYear = new Date().getFullYear()
+  const techs: ITech[] = [
+    {
+      description: 'NextJS',
+      slug: 'next',
+    },
+    {
+      description: 'ReactJS',
+      slug: 'react',
+    },
+    {
+      description: 'TailwindCSS',
+      slug: 'tailwind',
+    },
+  ]
+  return (
+    <footer className="bg-slate-900 py-4">
+      <div className="flex justify-center gap-2">
+        <p className="text-white">
+          ©️ {currYear} Made by Alexandre Batistella with
+        </p>
+        {techs.map((tech) => (
+          <BadgeTech
+            description={tech.description}
+            slug={tech.slug}
+            key={tech.slug}
+          />
+        ))}
+      </div>
+    </footer>
+  )
 }

src/components/SectionContactMe/index.tsx

@@ -1,3 +1,8 @@
+import { socials } from '@/constants/socials'
+import { CloudDownloadIcon, Mail } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
 export default function SectionContactMe() {
   return (
     <section
@@ -8,6 +13,37 @@ export default function SectionContactMe() {
         <p className="mb-3 text-center text-3xl font-extrabold text-white">
           Contact me
         </p>
+        <div className="mt-12 flex justify-center gap-4">
+          {socials.map((social) => (
+            <Link
+              key={social.slug}
+              href={social.url}
+              className="hover:opacity-80"
+            >
+              <Image
+                src={social.iconUrl}
+                alt={social.slug}
+                width={32}
+                height={32}
+              />
+            </Link>
+          ))}
+        </div>
+        <div className="mt-4 flex justify-center">
+          <Link href="mailto:[email protected]" className="flex gap-2">
+            <Mail color="white" />
+            <p className="text-white">[email protected]</p>
+          </Link>
+        </div>
+        <div className="mt-8 flex justify-center">
+          <Link
+            href="/docs/Alexandre_Batistella_Bellas_CV.pdf"
+            className="flex gap-4 rounded-xl bg-amber-500/75 px-8 py-3 hover:opacity-80"
+          >
+            <CloudDownloadIcon className="text-amber-950" />
+            <p className="font-bold text-amber-950">Download CV</p>
+          </Link>
+        </div>
       </div>
     </section>
   )

src/components/SectionProjects/index.tsx

@@ -3,6 +3,7 @@ import { format } from 'date-fns'
 import { ArrowUpRight } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import BadgeTech from '../BadgeTech'
 
 export default function SectionProjects() {
   return (
@@ -38,14 +39,11 @@ export default function SectionProjects() {
                 </div>
                 <div className="mt-4 flex flex-wrap gap-2">
                   {project.techs.map((tech) => (
-                    <div
+                    <BadgeTech
+                      description={tech.description}
+                      slug={tech.slug}
                       key={tech.slug}
-                      className="rounded-md bg-white/75 px-1.5 py-0.5 text-slate-900"
-                    >
-                      <p className="flex-none font-medium">
-                        {tech.description}
-                      </p>
-                    </div>
+                    />
                   ))}
                 </div>
               </div>

src/constants/socials.ts

@@ -0,0 +1,23 @@
+export interface ISocial {
+  url: string
+  iconUrl: string
+  slug: string
+}
+
+export const socials: ISocial[] = [
+  {
+    iconUrl: 'https://cdn.simpleicons.org/linkedin/white',
+    slug: 'linkedin',
+    url: 'https://linkedin.com/in/alebatistella',
+  },
+  {
+    url: 'https://github.com/AlexandreBellas',
+    iconUrl: 'https://cdn.simpleicons.org/github/white',
+    slug: 'github',
+  },
+  {
+    url: 'https://x.com/AlexandreBellas',
+    iconUrl: 'https://cdn.simpleicons.org/x/white',
+    slug: 'x/twitter',
+  },
+]