update projects section; fix on timeline section

Author: kerbethecoder

src/components/Timeline.jsx

@@ -17,7 +17,7 @@ const Timeline = () => {
     second: {
       duration: "June 2022 - August 2022",
       title: "ON-THE-JOB TRAINING",
-      work: "Working with two senior developers, I went through mini-tasks they gave me, such as reducing a complex code block to a brief one, and other front-end development-related work. Throughout the course of the job, I also get more knowledge about git version control. I also got a taste of what back-end development is all about and came across PHP, but I didn't stick around in that assignment for very long because of the intricate code used by the company. On the other hand, I now understand what developers do within a corporation, including but not limited to the necessary daily standup meetings.",
+      work: "Working with two senior developers, I went through mini-tasks they gave me, such as reducing a complex code block to a brief one, and other front-end development-related work. Throughout the course of the job, I also get more knowledge about git version control. I also got a taste of what back-end development is all about and came across PHP, but I didn't stick around in that assignment for very long because of the intricate code used by the company. On the other hand, I now understand what developers do within a corporation, including but not limited to the necessary daily standup meetings.",
     },
     third: {
       duration: "August 2021 - October 2021",
@@ -38,7 +38,7 @@ const Timeline = () => {
       </h2>
 
       {Object.keys(experiences).map((key, index) => (
-        <div className="hiddenElem flex flex-col lg:flex-row lg:px-0 px-5 mb-10">
+        <div className="hiddenElem flex flex-col lg:flex-row lg:px-0 px-5 mb-10 w-11/12">
           <h4
             className="tl__duration flex text-[#10100e57] text-xs font-bold italic"
             key={index}

src/components/projects/Card.jsx

@@ -16,26 +16,25 @@ const Card = ({
   })
 
   return (
-    <div className="card flex flex-col items-center rounded mt-5 py-5 w-5/6">
-      <div className="hiddenElem card__img h-52 w-4/5 mb-3 lg:w-3/5 lg:mb-0">
-        <img
-          src={imgSrc}
-          alt={projTitle}
-          className="object-cover h-full rounded"
-        />
-      </div>
-
-      <div className="hiddenElem flex gap-3 px-4 flex-col md:w-full">
-        <div className="flex flex-col-reverse lg:flex-row md:justify-between md:items-center md:gap-2">
-          <h6 className="text-base font-bold lg:text-xl">{projTitle}</h6>
-          <div className="flex gap-2">
-            {github}
-            {openSite}
-          </div>
+    <div className="hiddenElem card rounded mt-5 py-3 px-3 w-10/12 md:w-7/12 lg:w-5/12">
+      <div className="h-2/5 hiddenElem flex justify-between">
+        <div className="h-28 w-6/12">
+          <img
+            src={imgSrc}
+            alt={projTitle}
+            className="object-cover w-full h-full rounded"
+          />
         </div>
-        <p className="text-sm lg:text-base lg:pr-2">{projDescription}</p>
-        <div>{children}</div>
+        <div className="flex gap-2">
+          {github}
+          {openSite}
+        </div>
+      </div>
+      <div className="h-2/5 hiddenElem">
+        <h6 className="text-base font-bold lg:text-xl">{projTitle}</h6>
+        <p className="text-sm lg:text-base">{projDescription}</p>
       </div>
+      <div className="h-1/5 hiddenElem flex items-end">{children}</div>
     </div>
   )
 }

src/components/projects/Projects.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react"
 import { observeHiddenElements } from "../intersectionObserver"
 import Frameworks from "./Frameworks"
 import Card from "./Card"
-import { rpsGame, mockNetflix } from "../../images"
+import { rpsGame, mockNetflix, theNotePad } from "../../images"
 
 const Projects = () => {
   useEffect(() => {
@@ -29,7 +29,7 @@ const Projects = () => {
     secondProj: {
       src: mockNetflix,
       title: "MOCK NETFLIX LANDING PAGE",
-      description: `In order to demonstrate and refine my front-end web development proficiency, 
+      description: `To demonstrate and refine my front-end web development proficiency, 
       I have crafted a simulated landing page for the renowned streaming platform, "Netflix".`,
       github: "https://github.com/kerbethecoder/netflix-react",
       siteUrl: "https://mock-netflix-react.vercel.app/",
@@ -38,6 +38,19 @@ const Projects = () => {
         two: "TailwindCSS",
       },
     },
+    thirdProj: {
+      src: theNotePad,
+      title: "The NotePad.",
+      description: `A website that becomes a repository of tools such as font pairings 
+      and color combinations, and other things that is essential on 
+      my web development journey.`,
+      github: "https://github.com/kerbethecoder/the-notepad",
+      siteUrl: "https://the-notepad-by-kerbe.vercel.app/developer",
+      frameworks: {
+        one: "NextJS",
+        two: "TailwindCSS",
+      },
+    },
   }
 
   return (
@@ -48,7 +61,7 @@ const Projects = () => {
         </h2>
         <p>Some of the projects on the internet I made so far:</p>
 
-        <div className="hiddenElem flexCenter flex-col">
+        <div className="flexCenter flex-col flex-wrap lg:flex-row gap-10">
           {Object.keys(projects).map((key, i) => (
             <Card
               key={i}

src/images/cards/the-notepad.png

@@ -16,6 +16,7 @@ import gatsbyIcon from "./tech-icons/gatsby.svg"
 import rpsGame from "./cards/rps-game.png"
 import mockNetflix from "./cards/mock-netflix.png"
 import avatar from "./avatar.svg"
+import theNotePad from "./cards/the-notepad.png"
 
 export {
   displayPicture,
@@ -36,4 +37,5 @@ export {
   rpsGame,
   mockNetflix,
   avatar,
+  theNotePad,
 }

src/images/index.js

@@ -130,7 +130,7 @@ button ion-icon:hover {
 }
 
 .tl__duration {
-  @apply lg:justify-end lg:text-sm lg:w-4/12 lg:pr-9 lg:pt-4;
+  @apply lg:justify-end lg:text-sm lg:w-5/12 lg:pr-9 lg:pt-4;
 }
 
 .tl__details {
@@ -139,10 +139,9 @@ button ion-icon:hover {
 }
 
 .card {
-  border: 1px solid rgba(26, 26, 26, 0.25);
+  border: 2px solid rgba(26, 26, 26, 0.25);
   transition: transform 0.2s ease-in-out;
-  @apply md:flex-row md:gap-3 md:pl-5
-  lg:h-64;
+  @apply lg:h-80;
 }
 
 .card:hover {