feat: implement angles

src/app/layout.tsx

@@ -3,6 +3,7 @@ import Script from 'next/script';
 import React from 'react';
 
 import '@/styles/globals.css';
+import '@/styles/angles.css';
 
 import meta from '@/data/meta.json';
 

src/components/layout/Header.tsx

@@ -62,7 +62,7 @@ export default function Header() {
               href='/'
               className='font-bold text-slate-900 hover:text-slate-700 dark:text-blue-50 dark:hover:text-blue-200'
             >
-              Home
+              <MartaCodes />
             </UnstyledLink>
 
             <ul className='hidden items-center justify-between space-x-6 text-lg md:flex'>

src/components/organisms/home/Intro.tsx

@@ -18,7 +18,7 @@ export interface IntroProps {
 
 const Intro = ({ greeting, codeSnippets }: IntroProps) => {
   return (
-    <div className='mb-6 flex h-fit flex-col pb-6'>
+    <div className='mb-6 flex min-h-fit flex-col pb-6'>
       <h1 className='pb-4 text-5xl antialiased'>
         <span className={clsxm(styles.greeting, 'drop-shadow-lg')}>
           {greeting}

src/components/organisms/home/TagCloud.tsx

@@ -34,7 +34,7 @@ const TagCloud = () => {
   };
 
   return (
-    <div className='flex flex-col h-[500px] md:h-[300px] w-full justify-center mt-6 lg:h-[288px] lg:w-1/2 lg:justify-between items-end lg:mt-0 me-10 rounded-lg bg-gray-50 dark:bg-gray-900 p-1 drop-shadow-lg'>
+    <div className='flex flex-col w-full justify-center mt-6 h-80 md:h-[260px] lg:h-[288px] lg:w-1/2 lg:justify-between items-end lg:mt-0 me-10 rounded-lg bg-gray-50 dark:bg-gray-900 p-1 drop-shadow-lg'>
       <ReactWordcloud callbacks={callbacks} options={options} words={tags} />
     </div>
   );

src/components/pages/home-page.tsx

@@ -13,10 +13,24 @@ type HomePageProps = {
 export default function HomePage({ homePage, codeSnippets }: HomePageProps) {
   return (
     <section className='dark:bg-dark bg-white'>
-      <div className='layout relative flex flex-col py-16 md:py-24'>
-        <Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />
+      <div className='dark:bg-gradient-linear-dark bg-gradient-linear-light'>
+        <div className='layout relative flex flex-col py-16 md:pt-24 pb-16'>
+          <Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />
+        </div>
+      </div>
+
+      <div className='angle angle-1 after:bg-white after:dark:bg-dark bg-blue-100 dark:bg-slate-900'></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>
 
-        <Summary homePage={homePage} />
+      <div className='bg-white dark:bg-dark'>
+        <div className='layout relative flex py-8'></div>
       </div>
     </section>
   );

src/data/tags.json

@@ -1,10 +1,10 @@
 [
   {
-    "value": 25,
+    "value": 38,
     "text": "software engineer"
   },
   {
-    "value": 25,
+    "value": 42,
     "text": "full-stack developer"
   },
   {

src/styles/angles.css

@@ -0,0 +1,134 @@
+.angle {
+  position: relative;
+}
+
+.angle:after {
+  content: '';
+  position: absolute;
+}
+
+.angle-1,
+.angle-1:after {
+  height: 30px;
+  width: 100%;
+}
+
+@media (min-width: 520px) {
+  .angle-1,
+  .angle-1:after {
+    height: 50px;
+  }
+}
+
+@media (min-width: 900px) {
+  .angle-1,
+  .angle-1:after {
+    height: 80px;
+  }
+}
+
+.angle-1:after {
+  -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0);
+  clip-path: polygon(100% 100%, 100% 0, 0 0);
+}
+
+.angle-2,
+.angle-2:after {
+  height: 35px;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .angle-2,
+  .angle-2:after {
+    height: 55px;
+  }
+}
+
+@media (min-width: 900px) {
+  .angle-2,
+  .angle-2:after {
+    height: 55px;
+  }
+}
+
+.angle-2:after {
+  -webkit-clip-path: polygon(0 0, 100% 0, 25% 100%);
+  clip-path: polygon(0 0, 100% 0, 25% 100%);
+}
+
+.angle-3,
+.angle-3:after {
+  height: 30px;
+  width: 100%;
+}
+
+@media (min-width: 900px) {
+  .angle-3,
+  .angle-3:after {
+    height: 60px;
+  }
+}
+
+.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%);
+}
+
+.angle-4,
+.angle-4:after {
+  height: 50px;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .angle-4,
+  .angle-4:after {
+    height: 75px;
+  }
+}
+
+@media (min-width: 900px) {
+  .angle-4,
+  .angle-4:after {
+    height: 105px;
+  }
+}
+
+.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%);
+}
+
+.angle-5,
+.angle-5:after {
+  height: 40px;
+  width: 100%;
+}
+
+@media (min-width: 900px) {
+  .angle-5,
+  .angle-5:after {
+    height: 65px;
+  }
+}
+
+.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);
+}

tailwind.config.ts

@@ -35,6 +35,12 @@ export default {
           'bar-dark': '#4e4e4e',
         },
       },
+      backgroundImage: {
+        'gradient-linear-light':
+          'linear-gradient(210deg, #D4E5FC 7%, rgba(255, 255, 255, 0) 40%)',
+        'gradient-linear-dark':
+          'linear-gradient(200deg, #1E293D 7%, #0c1018 30%)',
+      },
       fontWeight: {
         strong: '550',
       },