Skip to content

Commit

Permalink
feat(skills): add a skills section
Browse files Browse the repository at this point in the history
  • Loading branch information
gdarchen committed Jun 26, 2024
1 parent 93c5e22 commit 7bfd5ff
Show file tree
Hide file tree
Showing 12 changed files with 221 additions and 13 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) -->
Expand Down
Binary file modified public/img/profile.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/app/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -28,6 +29,7 @@ const Home: FC = () => {
<AboutMe />
<WorkExperience />
<Projects />
<Skills />
<GetInTouch />
<Footer />
{!isProd && <ScreenSizeDetector />}
Expand Down
21 changes: 19 additions & 2 deletions src/components/header/components/DesktopMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand Down
19 changes: 16 additions & 3 deletions src/components/header/components/MobileMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -64,7 +64,7 @@ const MobileMenu: FC<Props> = ({ hidden, onClose }) => {
to="projects"
spy
smooth
offset={100}
offset={-100}
duration={200}
onClick={onClose}
className={menuItemLink()}
Expand All @@ -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
Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion src/components/home/2-about-me/AboutMe.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/4-projects/Projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/4-projects/components/Project.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
61 changes: 61 additions & 0 deletions src/components/home/5-skills/Skills.tsx
Original file line number Diff line number Diff line change
@@ -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
113 changes: 113 additions & 0 deletions src/components/home/5-skills/SkillsList.tsx
Original file line number Diff line number Diff line change
@@ -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 }
]
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 7bfd5ff

Please sign in to comment.