Merge pull request #89 from krckyboy/#86

#86

frontend/src/app/(home)/_featured-posts/FeaturedPosts.tsx

@@ -4,6 +4,7 @@ import BlogPostItem from '@/components/blog-post-item/BlogPostItem';
 import { db } from '@/scripts/fetch';
 import gStyles from '@/styles/global.module.scss';
 import styles from './styles.module.scss';
+import hStyles from '../styles.module.scss';
 
 const FeaturedPosts: FunctionComponent = async () => {
   const posts = await db.getFeaturedPosts();
@@ -13,8 +14,8 @@ const FeaturedPosts: FunctionComponent = async () => {
   }
 
   return (
-    <section className={`${gStyles.section}`}>
-      <h2 className={`${styles.featuredPostsHeading}`}>Featured posts</h2>
+    <section className={`${gStyles.section} ${hStyles.sectionContainer}`}>
+      <h2 className={`${hStyles.subHeading}`}>Featured posts</h2>
       <div className={`${gStyles.blogs} ${styles.blogs}`}>
         {posts.data.map((post) => <BlogPostItem post={post} key={post.id} featured />)}
         <Link href={'/blog'} className={gStyles.button}>Check all</Link>

frontend/src/app/(home)/_featured-posts/styles.module.scss

@@ -1,13 +1,5 @@
 @import '@/styles/vars';
 
-.featuredPostsHeading {
-  align-self: flex-start;
-  font-size: clamp(1.3rem, 1.5vw, 4rem);
-  font-weight: 600;
-  text-transform: lowercase;
-  letter-spacing: .2rem;
-}
-
 .blogs {
   gap: 1rem;
   margin-top: 2rem;

frontend/src/app/(home)/_skills/Skills.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import hStyles from '@/app/(home)/styles.module.scss';
+import styles from './styles.module.scss';
+import gStyles from '@/styles/global.module.scss';
+import Link from 'next/link';
+
+const Skills: FunctionComponent = () => {
+  return (
+    <section className={`${hStyles.sectionContainer}`}>
+      <h2 className={`${hStyles.subHeading}`}>Experience</h2>
+      <div className={`${styles.text} ${gStyles.text}`}>
+        <p>Half a decade in tech, mastering React and leading teams to success. Always ready to embrace new technologies that deliver.</p>
+        <p>Discover more on <Link href={'/skills'}>skills page</Link>.</p>
+      </div>
+    </section>
+  );
+};
+
+export default Skills;

frontend/src/app/(home)/_skills/styles.module.scss

@@ -0,0 +1,13 @@
+@import '@/styles/vars';
+
+.text {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  a {
+    color: $color-accent;
+    font-weight: 500;
+  }
+}

frontend/src/app/(home)/page.tsx

@@ -3,12 +3,14 @@ import { NextPage } from 'next';
 import gStyles from '@/styles/global.module.scss';
 import ImageAndText from '@/app/(home)/_image-and-text/ImageAndText';
 import FeaturedPosts from '@/app/(home)/_featured-posts/FeaturedPosts';
+import Skills from '@/app/(home)/_skills/Skills';
 
 const Page: NextPage = async () => {
   return (
     <main className={gStyles.mainContainer}>
       <ImageAndText />
       <FeaturedPosts />
+      <Skills />
     </main>
   );
 };

frontend/src/app/(home)/styles.module.scss

@@ -0,0 +1,13 @@
+@import '@/styles/vars';
+
+.subHeading {
+  align-self: flex-start;
+  font-size: clamp(1.3rem, 1.5vw, 4rem);
+  font-weight: 600;
+  text-transform: lowercase;
+  letter-spacing: .2rem;
+}
+
+.sectionContainer {
+  margin-top: 3rem;
+}