feat: add about me section

AlexandreBellas · May 29, 2024 · c0203db · c0203db
1 parent 23cc643
commit c0203db
Show file tree

Hide file tree

Showing 12 changed files with 319 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,8 @@
 This repository refers to the code used to build [my portfolio](https://alebatistella.com).
 Also, it has been used to sharpen my skills in NextJS and Tailwind CSS.
 
+Under development.
+
 ## Running in development
 
 Run on the terminal:

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        hostname: 'skillicons.dev',
+      },
+    ],
+  },
 }
 
 export default nextConfig
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Alexandre Batistella | Portfolio",
-  description: "Get to know better Alexandre Batistella",
-};
+  title: 'Alexandre Batistella | Portfolio',
+  description: 'Get to know better Alexandre Batistella',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth">
       <body className={inter.className}>{children}</body>
     </html>
-  );
+  )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,21 +1,31 @@
+'use client'
+
 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'
 
 export default function Home() {
   return (
-    <main className="overflow-scroll">
-      <Navbar />
-      <SectionInitial />
-      <SectionAboutMe />
-      <SectionProjects />
-      <SectionEducation />
-      <SectionContactMe />
-      <Footer />
-    </main>
+    <YearsOfExperienceProvider>
+      <main className="overflow-scroll">
+        <Navbar />
+        <SectionInitial />
+        <hr className="border-stone-600/75" />
+        <SectionAboutMe />
+        <hr className="border-stone-600/75" />
+        <SectionProjects />
+        <hr className="border-stone-600/75" />
+        <SectionEducation />
+        <hr className="border-stone-600/75" />
+        <SectionContactMe />
+        <hr className="border-stone-600/75" />
+        <Footer />
+      </main>
+    </YearsOfExperienceProvider>
   )
 }
diff --git a/src/components/ImageTechStack/index.tsx b/src/components/ImageTechStack/index.tsx
@@ -0,0 +1,19 @@
+import Image from 'next/image'
+
+interface ImageTechStackProps {
+  slug: string
+  alt: string
+}
+
+export default function ImageTechStack(props: Readonly<ImageTechStackProps>) {
+  const { alt, slug } = props
+  return (
+    <Image
+      alt={alt}
+      title={alt}
+      height={80}
+      width={80}
+      src={`https://skillicons.dev/icons?i=${slug}&theme=dark`}
+    />
+  )
+}
diff --git a/src/components/SectionAboutMe/index.tsx b/src/components/SectionAboutMe/index.tsx
@@ -1,3 +1,76 @@
+import { useYearsOfExperience } from '@/contexts/YearsOfExperienceProvider'
+import ImageTechStack from '../ImageTechStack'
+import { techs } from '@/constants/techs'
+
 export default function SectionAboutMe() {
-  return <section className="min-h-96 bg-white"></section>
+  const { years } = useYearsOfExperience()
+
+  return (
+    <section id="aboutMe" className="flex justify-center bg-slate-900 py-12">
+      <div className="container">
+        <p className="mb-3 text-3xl font-extrabold text-white">About me</p>
+        <div className="flex space-x-8">
+          <div className="flex-1">
+            <p className="mb-2 text-justify text-white">
+              {`My contact with technology started when I was 4 years old. My
+                usual hobby was to play video games in the computer and
+                understand how to edit photos and create videos. In high school,
+                I got to study how to create websites in HTML and CSS.`}
+            </p>
+            <p className="mb-2 text-justify text-white">
+              Fast-forward, I got a{' '}
+              <b>
+                master{"'"}s degree in Computer Science and Engineering at 🇮🇹
+                Politecnico di Milano
+              </b>
+              , where I mainly studied Artificial Intelligence and Machine
+              Learning, and a{' '}
+              <b>
+                bachelor{"'"}s degree in Computer Engineering at 🇧🇷 University
+                of São Paulo
+              </b>
+              , where I mainly studied Software Engineering and Electronic
+              Engineering. During my studies,{' '}
+              <b>I had a time in two startups</b> that taught me about business,
+              product management, human resources, and mainly built my knowledge
+              for building technical systems.
+            </p>
+            <p className="mb-2 text-justify text-white">
+              Nowadays I have{' '}
+              <b>
+                {years} years of experience in the IT industry as a full-stack
+                software engineer
+              </b>
+              . I have experience with tight-scheduled projects that uses a
+              diversified set of technologies to maintain the availability and
+              scalability of the system. Throughout my career I had designed,
+              architected, and delivered numerous projects, ranging from design
+              the UI/UX to deploying to the cloud. My current development stack
+              includes <b>Typescript</b>, <b>ReactJS</b>, and <b>NodeJS</b>.
+            </p>
+            <p className="mb-2 text-justify text-white">
+              I am an entrepreneurial and nerdy spirit person with proven
+              problem solving, self-learning, and communication skills. I look
+              for a broader impact in the world with tech and AI. Feel free to
+              get in touch if you want to get to know me better. 😃
+            </p>
+          </div>
+          <div className="flex-1">
+            <p className="mb-3 text-center text-2xl font-semibold text-white">
+              Technologies I have worked with
+            </p>
+            <div className="grid grid-cols-8 gap-y-4">
+              {techs.map((item) => (
+                <ImageTechStack
+                  key={item.slug}
+                  alt={item.description}
+                  slug={item.slug}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/src/components/SectionInitial/index.tsx b/src/components/SectionInitial/index.tsx
@@ -1,15 +1,14 @@
 import Image from 'next/image'
-import { differenceInYears } from 'date-fns'
 import Link from 'next/link'
+import { useYearsOfExperience } from '@/contexts/YearsOfExperienceProvider'
 
 export default function SectionInitial() {
-  // 01/06/2018
-  const yearsOfExperience = differenceInYears(new Date(), new Date(2018, 5, 1))
+  const { years: yearsOfXp } = useYearsOfExperience()
 
   return (
     <section
       id="initial"
-      className="flex min-h-screen flex-col items-center justify-center bg-slate-800"
+      className="flex min-h-screen flex-col items-center justify-center bg-slate-800 py-12"
     >
       <div className="relative inline-block rounded-full bg-instagram p-1">
         <Image
@@ -28,7 +27,7 @@ export default function SectionInitial() {
         <p className="mt-1 text-6xl font-medium text-white">
           {'Full-stack Software Engineer'}
         </p>
-        <p className="mt-1 text-xl text-white">{`${yearsOfExperience} years of experience`}</p>
+        <p className="mt-1 text-xl text-white">{`${yearsOfXp} years of experience`}</p>
         <p className="mt-16 text-2xl text-white">
           {
             'Work with a great leader with excellent technical skills. Check out my personal projects below 😉'

diff --git a/src/components/SectionInitial/styles.module.scss b/src/components/SectionInitial/styles.module.scss
diff --git a/src/components/SectionProjects/index.tsx b/src/components/SectionProjects/index.tsx
@@ -1,3 +1,12 @@
 export default function SectionProjects() {
-  return <></>;
+  return (
+    <section
+      id="projects"
+      className="flex min-h-96 justify-center bg-slate-800 pt-12"
+    >
+      <div className="container">
+        <p className="text-3xl font-extrabold text-white">Projects</p>
+      </div>
+    </section>
+  )
 }
diff --git a/src/constants/techs.ts b/src/constants/techs.ts
@@ -0,0 +1,127 @@
+interface ITech {
+  slug: string
+  description: string
+}
+
+export const techs: ITech[] = [
+  {
+    slug: 'js',
+    description: 'Javascript',
+  },
+  {
+    slug: 'ts',
+    description: 'Typescript',
+  },
+  {
+    slug: 'php',
+    description: 'PHP',
+  },
+  {
+    slug: 'cs',
+    description: 'C#',
+  },
+  {
+    slug: 'py',
+    description: 'Python',
+  },
+  {
+    slug: 'react',
+    description: 'ReactJS',
+  },
+  {
+    slug: 'nextjs',
+    description: 'NextJS',
+  },
+  {
+    slug: 'jquery',
+    description: 'jQuery',
+  },
+  {
+    slug: 'bootstrap',
+    description: 'Bootstrap',
+  },
+  {
+    slug: 'vite',
+    description: 'Vite',
+  },
+  {
+    slug: 'tailwind',
+    description: 'TailwindCSS',
+  },
+  {
+    slug: 'sass',
+    description: 'SASS',
+  },
+  {
+    slug: 'wordpress',
+    description: 'WordPress',
+  },
+  {
+    slug: 'nodejs',
+    description: 'NodeJS',
+  },
+  {
+    slug: 'nest',
+    description: 'NestJS',
+  },
+  {
+    slug: 'adonis',
+    description: 'AdonisJS',
+  },
+  {
+    slug: 'prisma',
+    description: 'Prisma',
+  },
+  {
+    slug: 'laravel',
+    description: 'Laravel',
+  },
+  {
+    slug: 'postgresql',
+    description: 'PostgreSQL',
+  },
+  {
+    slug: 'mysql',
+    description: 'MySQL',
+  },
+  {
+    slug: 'redis',
+    description: 'Redis',
+  },
+  {
+    slug: 'dynamodb',
+    description: 'DynamoDB',
+  },
+  {
+    slug: 'mongodb',
+    description: 'MongoDB',
+  },
+  {
+    slug: 'aws',
+    description: 'AWS',
+  },
+  {
+    slug: 'docker',
+    description: 'Docker',
+  },
+  {
+    slug: 'linux',
+    description: 'Linux',
+  },
+  {
+    slug: 'git',
+    description: 'Git',
+  },
+  {
+    slug: 'github',
+    description: 'GitHub',
+  },
+  {
+    slug: 'nginx',
+    description: 'NGINX',
+  },
+  {
+    slug: 'figma',
+    description: 'Figma',
+  },
+]