feat: skills redesign, added services and technologies (#67)

components/Footer/index.js

@@ -212,11 +212,11 @@ function Footer () {
           <span>
             { t('builtWith') }
             <a href="https://nextjs.org/" rel="nofollow noopener noreferrer">
-              <img src="/logos/nextjs.svg" alt="Next.js" style={{ height: '32px' }}/>
+              <img src="/logos/next.svg" alt="Next.js" style={{ height: '32px' }}/>
             </a>
             { t('hostedOn') }
             <a href="https://netlify.com/" rel="nofollow noopener noreferrer">
-              <img src="/logos/netlify.svg" alt="Netlify" style={{ height: '26px' }}/>
+              <img src="/logos/netlify-wordmark.svg" alt="Netlify" style={{ height: '26px' }}/>
             </a>
           </span>
         </p>

components/Main/Projects/index.js

@@ -26,12 +26,12 @@ function Projects ({ projects }) {
       <h3>{ t('projects.title') }</h3>
       <p>{ t('projects.subtitle') }</p>
 
-      <h4>{ t('projects.big') }</h4>
+      <h4 className="squared-title">{ t('projects.big') }</h4>
       <div className="block">
         { bigProjects }
       </div>
 
-      <h4>{ t('projects.small') }</h4>
+      <h4 className="squared-title">{ t('projects.small') }</h4>
       <div className="projects-small grid">
         { smallProjects }
       </div>

components/Main/Skills/index.js

@@ -3,21 +3,48 @@ import { useTranslation } from 'react-i18next'
 import Skill from './Skill'
 
 const tools = [
-  'TypeScript',
-  'GraphQL',
   'Git',
   'GitHub',
   'SASS',
-  'Webpack'
+  'Webpack',
+  'Gulp'
+]
+
+const services = [
+  'EC2',
+  'Lambda',
+  'Ghost',
+  'Netlify',
+  'Vercel',
+  'PayPal',
+  'Stripe'
+]
+
+const technologies = [
+  'Electron',
+  'Gatsby',
+  'Next.js',
+  'React Native',
+  'jQuery',
+  'TypeScript',
+  'GraphQL'
 ]
 
+const allTools = tools.map(tool => (
+  <Skill name={tool} key={tool} />
+))
+
+const allServices = services.map(service => (
+  <Skill name={service} key={service} />
+))
+
+const allTechnologies = technologies.map(tech => (
+  <Skill name={tech} key={tech} />
+))
+
 function Skills () {
   const { t } = useTranslation()
 
-  const allTools = tools.map(tool => (
-    <Skill name={tool} key={tool} />
-  ))
-
   return (
     <section id="skills" className="container medium skills">
       <h3>{ t('skills') }</h3>
@@ -40,8 +67,30 @@ function Skills () {
         </div>
       </div>
 
-      <div className="block center column valign">
-        <h4>{ t('tools') }</h4>
+      <div className="skills-listing" style={{
+        '--degree': '90deg'
+      }}>
+        <h4 className="squared-title">{ t('workedWith') }</h4>
+
+        <div className="tools">
+          { allTechnologies }
+        </div>
+      </div>
+
+      <div className="skills-listing" style={{
+        '--degree': '180deg'
+      }}>
+        <h4 className="squared-title">{ t('workedWithServices') }</h4>
+
+        <div className="tools">
+          { allServices }
+        </div>
+      </div>
+
+      <div className="skills-listing" style={{
+        '--degree': '270deg'
+      }}>
+        <h4 className="squared-title">{ t('workedWithTools') }</h4>
 
         <div className="tools">
           { allTools }

lang/locales/en.json

@@ -24,14 +24,16 @@
   "seeCasestudy": "Read more",
   "viewProject": "See project",
   "skills": "My skills",
+  "workedWith": "Worked with these technologies",
+  "workedWithServices": "I've worked with these services",
+  "workedWithTools": "The tools I use",
   "code": {
     "title": "GitHub statistics",
     "mostActivePR": "Most active PR",
     "userStats": "Stats",
     "languagesStats": "% of bytes written by languages",
     "someContributions": "Some OSS contributions"
   },
-  "tools": "Tools",
   "experience": "Work experience",
   "about": {
     "title": "About Me",

lang/locales/fr.json

@@ -24,14 +24,16 @@
   "seeCasestudy": "Lire l'étude",
   "viewProject": "Voir le projet",
   "skills": "Mes compétences",
+  "workedWith": "J'ai pu travailler avec",
+  "workedWithServices": "J'ai utilisé ces services",
+  "workedWithTools": "Les outils que j'utilise",
   "code": {
     "title": "Statistiques GitHub",
     "mostActivePR": "PR le plus actif",
     "userStats": "Statistiques",
     "languagesStats": "% écrit par langages",
     "someContributions": "Quelques contributions open-source"
   },
-  "tools": "Outils",
   "experience": "Expériences professionnelles",
   "about": {
     "title": "À propos de moi",

public/index.css

@@ -546,6 +546,20 @@ h6 {
   margin: 2px 0 0 0;
 }
 
+.squared-title {
+  padding-left: 70px;
+  position: relative;
+}
+
+.squared-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  background-color: var(--secondary-darker);
+  height: 100%;
+  width: 60px;
+}
+
 .grey {
   color: rgba(0, 0, 0, 0.8);
 }
@@ -1489,20 +1503,9 @@ background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligt
 
 .projects > h4 {
   margin: 36px 0;
-  padding-left: 70px;
-  position: relative;
   background-color: var(--primary);
 }
 
-.projects > h4::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  background-color: var(--secondary-darker);
-  height: 100%;
-  width: 60px;
-}
-
 .projects .block {
   margin-top: 24px;
 }
@@ -1908,14 +1911,8 @@ background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligt
 }
 
 .skills h4 {
-  z-index: 1;
-  font-size: 18px;
-  text-align: center;
-  width: 160px;
-  padding: 6px 16px;
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  border-radius : 16px;
-  background-color: var(--primary);
+  font-size: 1rem;
+  align-self: flex-start;
 }
 
 .skills .block:first-of-type img {
@@ -1933,6 +1930,13 @@ background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligt
   }
 }
 
+.skills-listing {
+  background-color: var(--primary-ligther);
+  background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligther) 80%);
+  padding: 48px;
+  margin-bottom: 48px;
+}
+
 .skills .skill {
   transition: opacity 0.4s;
 }
@@ -1943,9 +1947,9 @@ background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligt
 
 .skills .tools {
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   flex-wrap: wrap;
-  margin-top: 32px;
+  margin-top: 48px;
 }
 
 /* SKILL IMAGE */
@@ -1957,7 +1961,7 @@ background: linear-gradient(var(--degree), var(--primary) 0%, var(--primary-ligt
   margin: 0 24px;
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 1010px) {
   .skill {
     margin-bottom: 24px;
   }