feat: implement projects section

next.config.mjs

@@ -7,6 +7,9 @@ const nextConfig = {
       {
         hostname: 'skillicons.dev',
       },
+      {
+        hostname: 'cdn.simpleicons.org',
+      },
     ],
   },
 }

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "date-fns": "^3.6.0",
+    "lucide-react": "^0.381.0",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",

src/app/page.tsx

@@ -4,7 +4,6 @@ import Footer from '@/components/Footer'
 import Navbar from '@/components/Navbar'
 import SectionAboutMe from '@/components/SectionAboutMe'
 import SectionContactMe from '@/components/SectionContactMe'
-import SectionEducation from '@/components/SectionEducation'
 import SectionInitial from '@/components/SectionInitial'
 import SectionProjects from '@/components/SectionProjects'
 import { YearsOfExperienceProvider } from '@/contexts/YearsOfExperienceProvider'
@@ -20,8 +19,8 @@ export default function Home() {
         <hr className="border-stone-600/75" />
         <SectionProjects />
         <hr className="border-stone-600/75" />
-        <SectionEducation />
-        <hr className="border-stone-600/75" />
+        {/* <SectionEducation />
+        <hr className="border-stone-600/75" /> */}
         <SectionContactMe />
         <hr className="border-stone-600/75" />
         <Footer />

src/components/SectionAboutMe/index.tsx

@@ -6,7 +6,7 @@ export default function SectionAboutMe() {
   const { years } = useYearsOfExperience()
 
   return (
-    <section id="aboutMe" className="flex justify-center bg-slate-900 py-12">
+    <section id="aboutMe" className="flex justify-center bg-slate-800 py-12">
       <div className="container">
         <p className="mb-3 text-3xl font-extrabold text-white">About me</p>
         <div className="flex space-x-8">

src/components/SectionContactMe/index.tsx

@@ -1,3 +1,14 @@
 export default function SectionContactMe() {
-  return <></>;
+  return (
+    <section
+      id="contactMe"
+      className="flex min-h-screen flex-col items-center justify-center bg-slate-800 py-12"
+    >
+      <div className="container mx-auto">
+        <p className="mb-3 text-center text-3xl font-extrabold text-white">
+          Contact me
+        </p>
+      </div>
+    </section>
+  )
 }

src/components/SectionEducation/index.tsx

@@ -1,3 +1,14 @@
 export default function SectionEducation() {
-  return <></>;
+  return (
+    <section
+      id="education"
+      className="flex flex-col items-center justify-center bg-slate-800 py-12"
+    >
+      <div className="container">
+        <p className="mb-3 text-3xl font-extrabold text-white">
+          Education and experience
+        </p>
+      </div>
+    </section>
+  )
 }

src/components/SectionInitial/index.tsx

@@ -8,12 +8,12 @@ export default function SectionInitial() {
   return (
     <section
       id="initial"
-      className="flex min-h-screen flex-col items-center justify-center bg-slate-800 py-12"
+      className="flex min-h-screen flex-col items-center justify-center bg-slate-900 py-12"
     >
       <div className="relative inline-block rounded-full bg-instagram p-1">
         <Image
-          className="rounded-full border-4 border-slate-800"
-          src="/profile.jpg"
+          className="rounded-full border-4 border-slate-900"
+          src="/images/profile.jpg"
           width={160}
           height={160}
           alt="Alexandre Batistella"
@@ -37,13 +37,13 @@ export default function SectionInitial() {
       <div className="container mt-10 space-x-4 text-center">
         <Link
           href="#projects"
-          className="rounded-lg border-2 border-slate-700 px-4 py-3 font-semibold text-white hover:bg-amber-400 hover:text-amber-950"
+          className="rounded-lg border-2 border-slate-700 px-4 py-3 font-semibold text-white transition-colors duration-300 ease-in-out hover:bg-amber-500 hover:text-amber-950"
         >
           Check them out
         </Link>
         <Link
           href="#contactMe"
-          className="rounded-lg bg-amber-400 px-4 py-3 font-semibold text-amber-950 hover:bg-amber-400/75"
+          className="rounded-lg bg-amber-500 px-4 py-3 font-semibold text-amber-950 hover:bg-amber-500/75"
         >
           Contact me
         </Link>

src/components/SectionProjects/index.tsx

@@ -1,11 +1,116 @@
+import { projects } from '@/constants/projects'
+import { format } from 'date-fns'
+import { ArrowUpRight } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
 export default function SectionProjects() {
   return (
-    <section
-      id="projects"
-      className="flex min-h-96 justify-center bg-slate-800 pt-12"
-    >
+    <section id="projects" className="flex justify-center bg-slate-900 py-12">
       <div className="container">
         <p className="text-3xl font-extrabold text-white">Projects</p>
+        <div className="mt-4 grid grid-cols-3 gap-x-4 gap-y-4">
+          {projects.map((project) => (
+            <div
+              key={project.slug}
+              className="relative flex flex-col overflow-hidden rounded-xl border-2 border-gray-700 bg-slate-800"
+            >
+              <Image
+                className="h-36 w-full object-cover"
+                title={project.name}
+                src={project.imageSrc}
+                alt={project.slug}
+                width={200}
+                height={200}
+                objectFit="cover"
+              />
+              <div className="m-6 flex flex-1 flex-col justify-between">
+                <div>
+                  <p className="text-xl font-semibold text-white">
+                    {project.name}
+                  </p>
+                  <p className="font-semibold text-gray-500">
+                    {format(project.period, 'MMMM yyyy')}
+                  </p>
+                  <p className="mt-2 text-justify text-sm font-medium text-gray-300">
+                    {project.description}
+                  </p>
+                </div>
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {project.techs.map((tech) => (
+                    <div
+                      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>
+              <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-60 opacity-0 transition-opacity hover:opacity-100 hover:backdrop-blur-sm hover:backdrop-filter">
+                <div className="flex flex-row justify-center gap-2">
+                  <Image
+                    src={'https://cdn.simpleicons.org/github/white'}
+                    alt="github"
+                    width={32}
+                    height={32}
+                  />
+                  <Link
+                    href={project.githubUrl}
+                    className="text-2xl font-bold text-white"
+                  >
+                    Source code
+                  </Link>
+                </div>
+                {project.liveUrl && (
+                  <div className="mt-2 flex flex-row justify-center gap-2">
+                    <ArrowUpRight color="white" width={32} height={32} />
+                    <Link
+                      href={project.liveUrl}
+                      className="text-2xl font-bold text-white"
+                    >
+                      Live preview
+                    </Link>
+                  </div>
+                )}
+                {project.npmUrl && (
+                  <div className="mt-2 flex flex-row justify-center gap-2">
+                    <Image
+                      src={'https://cdn.simpleicons.org/npm/white'}
+                      alt="npm"
+                      width={32}
+                      height={32}
+                    />
+                    <Link
+                      href={project.npmUrl}
+                      className="text-2xl font-bold text-white"
+                    >
+                      Check in NPM
+                    </Link>
+                  </div>
+                )}
+                {project.packagistUrl && (
+                  <div className="mt-2 flex flex-row justify-center gap-2">
+                    <Image
+                      src={'https://cdn.simpleicons.org/packagist/white'}
+                      alt="npm"
+                      width={32}
+                      height={32}
+                    />
+                    <Link
+                      href={project.packagistUrl}
+                      className="text-2xl font-bold text-white"
+                    >
+                      Check in Packagist
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   )

src/constants/projects.ts

@@ -0,0 +1,97 @@
+import { ITech } from './techs'
+
+interface IProject {
+  slug: string
+  name: string
+  period: Date
+  description: string
+  imageSrc: string
+  techs: ITech[]
+  githubUrl: string
+  liveUrl?: string
+  npmUrl?: string
+  packagistUrl?: string
+}
+
+export const projects: IProject[] = [
+  {
+    slug: 'momonario',
+    name: 'Momonario',
+    period: new Date(2024, 5, 1),
+    description:
+      'A personal dictionary to document words being learned in a new language, being easy to add or to check if it has been already documented.',
+    imageSrc: '/images/momonario.png',
+    techs: [
+      {
+        slug: 'ts',
+        description: 'Typescript',
+      },
+      {
+        slug: 'react',
+        description: 'ReactJS',
+      },
+      {
+        slug: 'nextjs',
+        description: 'NextJS',
+      },
+      {
+        slug: 'php',
+        description: 'PHP',
+      },
+      {
+        slug: 'laravel',
+        description: 'Laravel',
+      },
+      {
+        slug: 'postgresql',
+        description: 'PostgreSQL',
+      },
+    ],
+    githubUrl: 'https://github.com/AlexandreBellas/momonario',
+  },
+  {
+    slug: '2040dog',
+    name: '2040🐶',
+    period: new Date(2024, 3, 1),
+    description:
+      'A 2048 web game dog-themed for fun. It has been created to represent how dogs can make any game funnier.',
+    imageSrc: '/images/2040dog.png',
+    techs: [
+      {
+        slug: 'ts',
+        description: 'Typescript',
+      },
+      {
+        slug: 'react-native',
+        description: 'React Native',
+      },
+      {
+        slug: 'expo',
+        description: 'Expo',
+      },
+    ],
+    githubUrl: 'https://github.com/AlexandreBellas/2040dog',
+    liveUrl: 'https://2040.dog',
+  },
+  {
+    slug: 'bling-erp-api',
+    name: 'Bling ERP API',
+    period: new Date(2021, 9, 1),
+    description:
+      'An open-source API connector to the Bling ERP available to be installed from NPM or Packagist. It is used by several brazilian enterprises in their solutions.',
+    imageSrc: '/images/bling-erp-api.png',
+    techs: [
+      {
+        slug: 'php',
+        description: 'PHP',
+      },
+      {
+        slug: 'ts',
+        description: 'Typescript',
+      },
+    ],
+    githubUrl: 'https://github.com/AlexandreBellas/bling-erp-api-js',
+    npmUrl: 'https://www.npmjs.com/package/bling-erp-api',
+    packagistUrl: 'https://packagist.org/packages/alebatistella/bling-erp-api',
+  },
+]

src/constants/techs.ts

@@ -1,4 +1,4 @@
-interface ITech {
+export interface ITech {
   slug: string
   description: string
 }