feat: improve Skills section

src/components/organisms/home/SkillSummary.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Inter } from 'next/font/google';
+import Image from 'next/image';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const font = Inter({ weight: '400', subsets: ['latin'] });
+
+import clsxm from '@/lib/clsxm';
+
+import { HomePage } from '@/types/Homepage';
+
+interface SkillsProps {
+  homePage: HomePage;
+}
+
+const SkillSummary = ({ homePage }: SkillsProps) => {
+  return (
+    <div
+      className={clsxm(
+        'flex md:flex-row flex-col-reverse gap-6 w-full',
+        font.className,
+      )}
+    >
+      <div className='md:w-1/4 flex items-center justify-center md:bg-amber-100/75 dark:bg-transparent rounded-3xl'>
+        <Image
+          src='https://res.cloudinary.com/dwrurydlt/image/upload/v1710444087/full-stack-developer.png'
+          height={0}
+          width={375}
+          alt='full-stack development'
+        />
+      </div>
+      <div className='text-lg antialiased md:w-3/4'>
+        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+          {homePage.skills.fullStack}
+        </ReactMarkdown>
+
+        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+          {homePage.skills.languages}
+        </ReactMarkdown>
+
+        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+          {homePage.skills.latest}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+};
+
+export default SkillSummary;

src/components/pages/home-page.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Intro from '@/components/organisms/home/Intro';
+import SkillSummary from '@/components/organisms/home/SkillSummary';
 import Summary from '@/components/organisms/home/Summary';
 
 import { CodeSnippet } from '@/types/CodeSnippet';
@@ -19,19 +20,23 @@ export default function HomePage({ homePage, codeSnippets }: HomePageProps) {
         </div>
       </div>
 
-      <div className='angle angle-1 after:bg-white after:dark:bg-dark bg-blue-100 dark:bg-slate-900'></div>
+      <div className='angle angle-1 bg-blue-100 after:bg-white dark:bg-slate-900 after:dark:bg-dark'></div>
 
       <div className='bg-blue-100 dark:bg-slate-900'>
         <div className='layout relative flex py-8'>
           <Summary homePage={homePage} />
         </div>
       </div>
 
-      <div className='angle angle-2 bg-white dark:bg-dark after:bg-blue-100 after:dark:bg-slate-900'></div>
+      <div className='angle angle-2 bg-home-section2 after:bg-blue-100 dark:bg-dark after:dark:bg-slate-900'></div>
 
-      <div className='bg-white dark:bg-dark'>
-        <div className='layout relative flex py-8'></div>
+      <div className='bg-home-section2 dark:bg-dark'>
+        <div className='layout relative flex py-8'>
+          <SkillSummary homePage={homePage} />
+        </div>
       </div>
+
+      <div className='angle angle-4 bg-blue-100 after:bg-home-section2 dark:bg-slate-800 after:dark:bg-dark'></div>
     </section>
   );
 }

src/data/en/home.json

@@ -6,8 +6,11 @@
     "education": "I hold a MSc in Advanced Computer Science from the {uom}; I also completed a trilingual BSc degree at {unibz}, with an exchange semester at the {cofc}.",
     "work": "I've spent the last 7 years working for several companies, including {Booking}, {BJSS} and {Resourcify}.",
     "cv": "I hold a <span class=\"font-semibold\">MSc in Advanced Computer Science</span> from the University of Manchester, and have spent the last 6 years working for several companies, including {Booking}, {BJSS} and {Resourcify}.",
-    "skills": "My skill set spans a range of programming languages like <span class=\"strong\">Java</span>, <span class=\"strong\">Kotlin</span>, <span class=\"strong\">Python</span>, <span class=\"strong\">C#</span> and <span class=\"strong\">TypeScript</span>, as well as frontend frameworks such as <span class=\"strong\">React</span> and <span class=\"strong\">Angular</span>.",
-    "fullStack": "While I have a solid foundation in backend development, my heart truly lies in the realm of full-stack engineering.",
     "freeTime": "In my free time, I’m a fiction writer ✍🏻, an avid bookworm 📚, an oboist and alto singer 🎶, and a travel photographer 📷."
+  },
+  "skills": {
+    "fullStack": "While I have a solid foundation in backend development, my heart truly lies in the realm of full-stack engineering.",
+    "languages": "My skill set spans a range of programming languages like <span class=\"font-bold\">Java</span>, <span class=\"font-bold\">Kotlin</span>, <span class=\"font-bold\">Python</span>, <span class=\"font-bold\">C#</span> and <span class=\"font-bold\">TypeScript</span>, as well as frontend frameworks such as <span class=\"font-bold\">React</span> and <span class=\"font-bold\">Angular</span>.",
+    "latest": "Lately I have been working a lot in the Node environment, using NextJS a lot with a backend based on OpenAPI and MongoDB. I have also been delving into UI/UX, learning how to design user interfaces with Figma and how to use Tailwind effectively."
   }
 }

src/styles/angles.css

@@ -70,12 +70,7 @@
   }
 }
 
-.angle-3 {
-  background-color: #7689d8;
-}
-
 .angle-3:after {
-  background-color: #eeb4aa;
   -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
   clip-path: polygon(0 0, 100% 0, 0 100%);
 }
@@ -100,12 +95,7 @@
   }
 }
 
-.angle-4 {
-  background-color: #a1eacd;
-}
-
 .angle-4:after {
-  background-color: #7689d8;
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 77% 100%, 12% 42%, 0 60%);
   clip-path: polygon(0 0, 100% 0, 100% 70%, 77% 100%, 12% 42%, 0 60%);
 }
@@ -123,12 +113,7 @@
   }
 }
 
-.angle-5 {
-  background-color: #fef2d8;
-}
-
 .angle-5:after {
-  background-color: #a1eacd;
   -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0);
   clip-path: polygon(100% 100%, 100% 0, 0 0);
 }

src/types/Homepage.ts

@@ -1,6 +1,7 @@
 export interface HomePage {
   greeting: string;
   introduction: Introduction;
+  skills: Skills;
 }
 
 export interface Introduction {
@@ -13,3 +14,9 @@ export interface Introduction {
   fullStack: string;
   freeTime: string;
 }
+
+export interface Skills {
+  fullStack: string;
+  languages: string;
+  latest: string;
+}

tailwind.config.ts

@@ -34,6 +34,9 @@ export default {
           'bar-light': '#dedede',
           'bar-dark': '#4e4e4e',
         },
+        home: {
+          section2: '#c1d1e7',
+        },
       },
       backgroundImage: {
         'gradient-linear-light':

yarn.lock

@@ -8863,6 +8863,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devicons-react@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "devicons-react@npm:1.3.0"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/b5c6234774d0cb33c1f6ca515f90e761f6d12838878c76f51fcb647411453eb7c37b96736172a074f0957de1e007012f7dad25b05bdfbf4cfebe36c2be836ae9
+  languageName: node
+  linkType: hard
+
 "devlop@npm:^1.0.0, devlop@npm:^1.1.0":
   version: 1.1.0
   resolution: "devlop@npm:1.1.0"
@@ -13804,6 +13813,7 @@ __metadata:
     classnames: "npm:^2.5.1"
     clsx: "npm:^2.1.0"
     cookie: "npm:^0.6.0"
+    devicons-react: "npm:^1.3.0"
     eslint: "npm:^8.57.0"
     eslint-config-next: "npm:^14.1.2"
     eslint-config-prettier: "npm:^9.1.0"
@@ -13842,6 +13852,7 @@ __metadata:
     react-moment: "npm:^1.1.3"
     react-string-replace: "npm:^1.1.1"
     react-syntax-highlighter: "npm:^15.5.0"
+    react-ticker: "npm:^1.3.2"
     react-tippy: "npm:^1.4.0"
     react-toastify: "npm:^10.0.4"
     react-wordcloud: "npm:^1.2.7"
@@ -17355,6 +17366,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ticker@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "react-ticker@npm:1.3.2"
+  peerDependencies:
+    prop-types: ^15.8.0
+    react: ^17.0.2
+    react-dom: ^17.0.2
+  checksum: 10c0/50426070e0a5c13c752bc78085b0edff1938af10851b0c547fb3f9b84b5b0ca7ee30550fddcf0d2ed917a287ec79f32086fda7e0b0293f512ebf34b090e2f2d0
+  languageName: node
+  linkType: hard
+
 "react-tippy@npm:^1.4.0":
   version: 1.4.0
   resolution: "react-tippy@npm:1.4.0"