feat(skills): add a skills section

README.md

@@ -10,7 +10,7 @@
 
 <div align="center">
 
-<!-- TODO: change picture, skills -->
+<!-- TODO: profile README (and dynamic svg) -->
 
 <!-- TODO: uncomment when public -->
 <!-- [![last commit](https://badgen.net/github/last-commit/gdarchen/portfolio?icon=https://simpleicons.now.sh/git/fff)](https://github.com/gdarchen/portfolio) -->

src/app/home.tsx

@@ -9,7 +9,8 @@ import MyName from '@/components/home/1-my-name/MyName'
 import AboutMe from '@/components/home/2-about-me/AboutMe'
 import WorkExperience from '@/components/home/3-work-experience/WorkExperience'
 import Projects from '@/components/home/4-projects/Projects'
-import GetInTouch from '@/components/home/5-get-in-touch/GetInTouch'
+import Skills from '@/components/home/5-skills/Skills'
+import GetInTouch from '@/components/home/6-get-in-touch/GetInTouch'
 import SocialMediaAround from '@/components/home/social-media-around/SocialMediaAround'
 import ScreenSizeDetector from '@/components/screen-size-detector/ScreenSizeDetector'
 
@@ -28,6 +29,7 @@ const Home: FC = () => {
       <AboutMe />
       <WorkExperience />
       <Projects />
+      <Skills />
       <GetInTouch />
       <Footer />
       {!isProd && <ScreenSizeDetector />}

src/components/header/components/DesktopMenu.tsx

@@ -63,7 +63,24 @@ export default function DesktopMenu() {
       <motion.span
         initial={{ y: -40, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ type: 'spring', duration: 1.2, delay: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.9 }}
+        className="text-primary"
+      >
+        <ReactScrollLink
+          to="skills"
+          spy
+          smooth
+          offset={-100}
+          duration={200}
+        >
+          &gt; 04. <span className={menuItem()}>Skills</span>
+        </ReactScrollLink>
+      </motion.span>
+
+      <motion.span
+        initial={{ y: -40, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 1.2 }}
         className="text-primary"
       >
         <ReactScrollLink
@@ -73,7 +90,7 @@ export default function DesktopMenu() {
           offset={-100}
           duration={200}
         >
-          &gt; 04. <span className={menuItem()}>Contact</span>
+          &gt; 05. <span className={menuItem()}>Contact</span>
         </ReactScrollLink>
       </motion.span>
 

src/components/header/components/MobileMenu.tsx

@@ -26,7 +26,7 @@ const MobileMenu: FC<Props> = ({ hidden, onClose }) => {
       initial={{ x: '100%' }}
       animate={hidden ? { x: '100%' } : { x: '0' }}
       transition={{ x: { duration: 0.4 } }}
-      className="fixed z-20 flex h-screen w-full duration-300 md:hidden"
+      className="fixed z-20 flex h-dvh w-full duration-300 md:hidden"
     >
       <div
         onClick={onClose}
@@ -64,7 +64,7 @@ const MobileMenu: FC<Props> = ({ hidden, onClose }) => {
           to="projects"
           spy
           smooth
-          offset={100}
+          offset={-100}
           duration={200}
           onClick={onClose}
           className={menuItemLink()}
@@ -73,6 +73,19 @@ const MobileMenu: FC<Props> = ({ hidden, onClose }) => {
           <span className={menuItemText()}>Projects</span>
         </Link>
 
+        <Link
+          to="skills"
+          spy
+          smooth
+          offset={0}
+          duration={200}
+          onClick={onClose}
+          className={menuItemLink()}
+        >
+          <span className={menuItemDigit()}>04.</span>
+          <span className={menuItemText()}>Skills</span>
+        </Link>
+
         <Link
           to="contact"
           spy
@@ -82,7 +95,7 @@ const MobileMenu: FC<Props> = ({ hidden, onClose }) => {
           onClick={onClose}
           className={menuItemLink()}
         >
-          <span className={menuItemDigit()}>04.</span>
+          <span className={menuItemDigit()}>05.</span>
           <span className={menuItemText()}>Contact</span>
         </Link>
 

src/components/home/2-about-me/AboutMe.tsx

@@ -35,7 +35,7 @@ const AboutMe: FC = () => {
           <div className="w-full space-y-4 text-justify text-sm md:w-7/12">
             <div className="font-header">
               <span className="text-gray-400">
-                As a Senior Engineer, I really love new technologies and the
+                As a Senior Software Engineer, I really love new technologies and the
                 challenges they represent in our current society. I particularly
                 enjoy web development and DevOps activities.
               </span>

src/components/home/4-projects/Projects.tsx

@@ -9,7 +9,7 @@ const Projects: FC = () => {
   return (
     <div
       id="projects"
-      className="flex w-full flex-col space-y-12 px-4 py-12 sm:px-16 md:px-16 md:py-32 lg:px-24 xl:space-y-28 2xl:px-72"
+      className="flex w-full flex-col space-y-12 p-4 sm:px-16 md:px-16 md:py-12 lg:px-24 xl:space-y-28 2xl:px-72"
     >
       {/* Title */}
       <div data-aos="fade-up" className="flex flex-row items-center md:px-0">

src/components/home/4-projects/components/Project.tsx

@@ -231,7 +231,7 @@ const Project: FC<Props> = ({ project, index }) => {
             </a>
           </div>
 
-          <div className="z-10 w-full rounded-md py-2 opacity-90 shadow shadow-backgound-secondary md:bg-backgound-secondary md:p-6">
+          <div className="z-10 w-full rounded-md py-2 opacity-90 shadow shadow-background-secondary md:bg-background-secondary md:p-6">
             <span className="text-justify font-content text-sm text-gray-300 md:text-gray-400">
               {project.description}
             </span>

src/components/home/5-skills/Skills.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from 'react'
+import clsx from 'clsx'
+import { motion } from 'framer-motion'
+
+import Badge from '@/components/badge/Badge'
+import ArrowIcon from '@/components/icons/ArrowIcon'
+
+import { skillsByLevel } from './SkillsList'
+
+const Skills: FC = () => {
+  return (
+    <div
+      id="skills"
+      className="flex w-full flex-col space-y-12 p-4 sm:px-16 md:px-16 lg:px-24 xl:space-y-28 2xl:px-72"
+    >
+      <div
+        data-aos="fade-up"
+        className="flex flex-col items-center justify-center space-y-12 py-12 md:py-24"
+      >
+        {/* Title */}
+        <section className="flex w-full flex-row items-center md:w-auto">
+          <div className="flex flex-row items-center">
+            <ArrowIcon className="size-4 flex-none text-primary md:h-6 md:w-5" />
+            <span className="font-sans text-sm text-primary sm:text-xl">
+              {' '}
+              04.
+            </span>
+          </div>
+
+          <span className="px-3 text-lg font-bold tracking-wider text-gray-200 opacity-85 md:text-2xl">
+            Skills
+          </span>
+          <div className="h-[0.2px] w-full bg-gray-400 md:w-80" />
+        </section>
+
+        {/* Skills */}
+        <section className="flex w-full flex-col !items-stretch justify-center space-y-4 md:flex-row md:items-start md:justify-center md:space-x-4 md:space-y-0 ">
+          {skillsByLevel.map(level => {
+            const transition = { y: -3, scale: 1.2, transition: { duration: 0.1 } }
+
+            return (
+              <div key={level.title} className={clsx("block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700", level.className)}>
+                <h5 className="mb-4 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{level.title}</h5>
+                <div className="grid grid-cols-6 gap-4 font-normal text-gray-700 dark:text-gray-400">
+                  {level.skills.map(skill => (
+                    <div key={skill.text} className='group relative w-min hover:z-50'>
+                      <motion.div whileHover={transition} whileTap={transition}>
+                        <span className='cursor-pointer hover:text-primary'>{skill.icon}</span>
+                      </motion.div>
+                      <Badge className='invisible absolute left-1/2 -translate-x-2/4 translate-y-2 text-nowrap font-mono ring-1 ring-primary backdrop-blur-md group-hover:visible dark:text-blue-300' variant="blue">{skill.text}</Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>)
+          })}
+        </section>
+      </div>
+    </div>)
+}
+
+export default Skills

src/components/home/5-skills/SkillsList.tsx

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+import { DiScrum } from 'react-icons/di';
+import {
+  FaAirbnb,
+  FaAngular,
+  FaApple,
+  FaAws,
+  FaCheckCircle,
+  FaCss3Alt,
+  FaDocker,
+  FaFileCode,
+  FaGit,
+  FaGitlab,
+  FaHtml5,
+  FaJava,
+  FaJenkins,
+  FaLeaf,
+  FaLinux,
+  FaNodeJs,
+  FaPython,
+  FaReact,
+  FaSass,
+  FaWindows,
+} from 'react-icons/fa';
+import {
+  SiApachemaven,
+  SiC,
+  SiCplusplus,
+  SiDjango,
+  SiFfmpeg,
+  SiJavascript,
+  SiKubernetes,
+  SiMatrix,
+  SiNeo4J,
+  SiNestjs,
+  SiNpm,
+  SiPhp,
+  SiPostgresql,
+  SiServerless,
+  SiSocketdotio,
+  SiSonarcloud,
+  SiSwift,
+  SiTailwindcss,
+  SiTypescript,
+  SiVite,
+  SiWebpack,
+  SiYarn,
+} from 'react-icons/si';
+
+type Skill = {
+  text: string;
+  icon: ReactNode;
+};
+
+type SkillsByLevel = Array<{
+  title: string;
+  skills: Skill[]
+  className?: string
+}>
+
+const advancedSkills: Skill[] = [
+  { text: 'JavaScript', icon: <SiJavascript /> },
+  { text: 'React', icon: <FaReact /> },
+  { text: 'Node.js', icon: <FaNodeJs /> },
+  { text: 'TypeScript', icon: <SiTypescript /> },
+  { text: 'Nest', icon: <SiNestjs /> },
+  { text: 'AWS', icon: <FaAws /> },
+  { text: 'Serverless', icon: <SiServerless /> },
+  { text: 'Docker', icon: <FaDocker /> },
+  { text: 'Kubernetes', icon: <SiKubernetes /> },
+  { text: 'Sass', icon: <FaSass /> },
+  { text: 'CSS', icon: <FaCss3Alt /> },
+  { text: 'Tailwind', icon: <SiTailwindcss /> },
+  { text: 'Git', icon: <FaGit /> },
+  { text: 'Websockets', icon: <SiSocketdotio /> },
+  { text: 'Webpack', icon: <SiWebpack /> },
+  { text: 'Vite', icon: <SiVite /> },
+  { text: 'Yarn', icon: <SiYarn /> },
+  { text: 'npm', icon: <SiNpm /> },
+  { text: 'Java', icon: <FaJava /> },
+  { text: 'Spring', icon: <FaLeaf /> },
+  { text: 'Maven', icon: <SiApachemaven /> },
+  { text: 'Jenkins', icon: <FaJenkins /> },
+  { text: 'Gitlab CI', icon: <FaGitlab /> },
+  { text: 'SonarQube', icon: <SiSonarcloud /> },
+  { text: 'HTML', icon: <FaHtml5 /> },
+  { text: 'LaTeX', icon: <FaFileCode /> },
+  { text: 'Linux', icon: <FaLinux /> },
+  { text: 'Mac OSX', icon: <FaApple /> },
+  { text: 'Windows', icon: <FaWindows /> },
+  { text: 'Scrum', icon: <DiScrum /> },
+  { text: 'TDD', icon: <FaCheckCircle /> },
+  { text: 'SQL', icon: <SiPostgresql /> },
+];
+
+const intermediateSkills: Skill[] = [
+  { text: 'Angular', icon: <FaAngular /> },
+  { text: 'PHP', icon: <SiPhp /> },
+  { text: 'C', icon: <SiC /> },
+  { text: 'C++', icon: <SiCplusplus /> },
+  { text: 'Python', icon: <FaPython /> },
+  { text: 'Django', icon: <SiDjango /> },
+  { text: 'Swift', icon: <SiSwift /> },
+  { text: 'Matlab', icon: <SiMatrix /> },
+  { text: 'Neo4j', icon: <SiNeo4J /> },
+  { text: 'FFmpeg', icon: <SiFfmpeg /> },
+  { text: 'Lottie', icon: <FaAirbnb /> },
+];
+
+export const skillsByLevel: SkillsByLevel = [
+  { title: "Advanced", skills: advancedSkills, className: "grow md:[&>div]:grid-cols-10" },
+  { title: 'Intermediate', skills: intermediateSkills }
+]

src/components/home/5-get-in-touch/GetInTouch.tsx → src/components/home/6-get-in-touch/GetInTouch.tsx

@@ -22,7 +22,7 @@ const GetInTouch: FC = () => {
         <div className="flex flex-row items-center space-x-2">
           <span className="font-sans text-sm text-primary sm:text-base">
             {' '}
-            04.
+            05.
           </span>
           <span className="font-sans text-base text-primary">Contact</span>
         </div>

tailwind.config.ts

@@ -34,8 +34,10 @@ export default {
         },
         secondary: colors.blue[200],
         'mobile-menu': '#0f141d',
-        background: '#03080f',
-        "backgound-secondary": '#112340',
+        background: {
+          DEFAULT: '#03080f',
+          secondary: '#112340',
+        },
         hovered: '#153040',
       },
       screens: {