feat: add Updates section

martapanc · Mar 18, 2024 · 41847ae · 41847ae
1 parent 42daaff
commit 41847ae
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 40 deletions.
diff --git a/src/components/organisms/home/SkillSummary.tsx b/src/components/organisms/home/SkillSummary.tsx
@@ -28,7 +28,7 @@ const SkillSummary = ({ homePage }: SkillsProps) => {
           font.className,
         )}
       >
-        <div className='md:w-1/4 flex items-center justify-center lg:bg-amber-100/75 dark:bg-transparent rounded-3xl'>
+        <div className='md:w-1/4 flex items-center justify-center dark:bg-transparent rounded-3xl'>
           <Image
             src='https://res.cloudinary.com/dwrurydlt/image/upload/v1710444087/full-stack-developer.png'
             height={0}

diff --git a/src/components/organisms/home/Updates.tsx b/src/components/organisms/home/Updates.tsx
@@ -1,52 +1,91 @@
 'use client';
 
-import { Inter } from 'next/font/google';
+import { Handlee, Inter, Reenie_Beanie, Square_Peg } from 'next/font/google';
 import React from 'react';
 
-const font = Inter({ subsets: ['latin'] });
-
-import Image from 'next/image';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
+const font = Inter({ weight: '400', subsets: ['latin'] });
+const font1 = Reenie_Beanie({ weight: '400', subsets: ['latin'] });
+const font2 = Handlee({ weight: '400', subsets: ['latin'] });
+const font3 = Square_Peg({ weight: '400', subsets: ['latin'] });
 
 import clsxm from '@/lib/clsxm';
 
-// interface ProjectsProps {
-//     projects: Project[];
-// }
+import { Updates } from '@/types/Homepage';
+
+interface UpdatesProps {
+  updates: Updates;
+}
 
-const Updates = () => {
+const Updates = ({ updates }: UpdatesProps) => {
   return (
-    <div className='flex flex-col'>
+    <div className='flex flex-col w-full'>
       <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5 text-end'>
         UPDATES
       </div>
       <div
         className={clsxm(
-          'flex md:flex-row flex-col-reverse gap-6 w-full',
+          'flex md:flex-row flex-col gap-6 w-full justify-between',
           font.className,
         )}
       >
-        <div className='md:w-1/4 flex items-center justify-center lg: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 className='text-lg antialiased flex-row'>
+          <div
+            className={clsxm(
+              font1.className,
+              'text-3xl text-[#003e16] dark:text-[#5fff98] mb-1',
+            )}
+          >
+            I'm currently learning...
+          </div>
+          <ul>
+            {updates.learning?.map((item, index) => (
+              <li
+                key={'learning-' + index}
+                className='text-[16px] md:text-base'
+              >
+                🌱 {item}
+              </li>
+            ))}
+          </ul>
         </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 className='text-lg antialiased flex-row'>
+          <div
+            className={clsxm(
+              font2.className,
+              'text-2xl text-[#1e5dbf] dark:text-[#5fccff] mb-1',
+            )}
+          >
+            I'm looking to learn...
+          </div>
+          <ul>
+            {updates.willLearn?.map((item, index) => (
+              <li
+                key={'will-learn-' + index}
+                className='text-[16px] md:text-base'
+              >
+                💡 {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className='text-lg antialiased flex-row'>
+          <div
+            className={clsxm(
+              font3.className,
+              'text-[34px] text-[#bf6e00] dark:text-[#fba42d] mb-1',
+            )}
+          >
+            Latest books I've read...
+          </div>
+          <ul>
+            {updates.reading?.map((item, index) => (
+              <li key={'reading-' + index} className='text-[16px] md:text-base'>
+                📖 {item}
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
     </div>

diff --git a/src/components/pages/home-page.tsx b/src/components/pages/home-page.tsx
@@ -23,14 +23,14 @@ export default function HomePage({
   projects,
 }: HomePageProps) {
   return (
-    <section className='dark:bg-dark bg-white'>
+    <section className='dark:bg-dark bg-almost-white'>
       <div className='dark:bg-gradient-linear-dark bg-gradient-linear-light'>
         <div className='layout relative flex flex-col py-16 md:pt-24 pb-5 md:pb-16'>
           <Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />
         </div>
       </div>
 
-      <div className='angle angle-1 bg-blue-100 after:bg-white dark:bg-slate-900 after:dark:bg-dark'></div>
+      <div className='angle angle-1 bg-blue-100 after:bg-almost-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'>
@@ -54,11 +54,11 @@ export default function HomePage({
         </div>
       </div>
 
-      <div className='angle angle-3 bg-white after:bg-home-section3 dark:bg-home-section4-dark after:dark:bg-dark'></div>
+      <div className='angle angle-3 bg-almost-white after:bg-home-section3 dark:bg-home-section4-dark after:dark:bg-dark'></div>
 
-      <div className='bg-white dark:bg-home-section4-dark'>
-        <div className='layout relative flex py-8'>
-          <Updates />
+      <div className='bg-almost-white dark:bg-home-section4-dark'>
+        <div className='layout relative flex pt-8 pb-24'>
+          <Updates updates={homePage.updates} />
         </div>
       </div>
     </section>

diff --git a/src/data/en/home.json b/src/data/en/home.json
@@ -15,11 +15,15 @@
   },
   "updates": {
     "learning": ["Figma & UI/UX Design", "Jekyll & Liquid"],
-    "willLearn": ["Swift for iOS Development"],
+    "willLearn": [
+      "Swift for iOS Development",
+      "AI and its ethical implications"
+    ],
     "reading": [
       "'Fascism: A Warning', by Madeleine Albright",
       "'Building a Second Brain', by Tiago Forte"
     ],
-    "gaming": ["Zelda: Tears of the Kingdom"]
+    "gaming": ["Zelda: Tears of the Kingdom"],
+    "watching": ["the Marvel Netflix TV Series"]
   }
 }
diff --git a/src/types/Homepage.ts b/src/types/Homepage.ts
@@ -2,6 +2,7 @@ export interface HomePage {
   greeting: string;
   introduction: Introduction;
   skills: Skills;
+  updates: Updates;
 }
 
 export interface Introduction {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -25,6 +25,7 @@ export default {
           950: 'rgb(var(--tw-color-primary-950) / <alpha-value>)',
         },
         dark: '#0c1018',
+        'almost-white': '#fcfcff',
         terminal: {
           red: '#fe5f57',
           amber: '#febc2e',