Merge pull request #7 from justforworkandstuff/feat/update_cv

feat: updated cv and latest experience

Author: justforworkandstuff

CHANGELOG.md

@@ -5,7 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.1] - 2025-03-19 
+## [1.1.2] - 2025-07-06
+
+### Updated
+
+- CV version
+- Experience list data
+- UI view for mobile 
+
+## [1.1.1] - 2025-03-29
+
+### Added
+- 'Download CV' feature
+
+## [1.0.1] - 2025-03-19
 
 ### Fixed 
 

my-app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.14.0",

my-app/package.json

@@ -8,7 +8,7 @@ const useUserService = () => {
       id: 1,
       title: "Agmo Studio",
       startDate: ".2022",
-      endDate: "2025.",
+      endDate: "",
       role: "Software Developer | Mobile & Full-Stack Development",
       location: "Petaling Jaya, Malaysia",
       description: [
@@ -20,6 +20,19 @@ const useUserService = () => {
         "•	Manage multiple projects, ensuring timely delivery and quality standards.",
       ],
     },
+    {
+      id: 2,
+      title: "dtcpay",
+      startDate: ".2025",
+      endDate: "present.",
+      role: "Flutter Engineer | Mobile Development",
+      location: "Kuala Lumpur, Malaysia",
+      description: [
+        "•	Build and maintain the Flutter-based fintech app with focus on performance and stability.",
+        "•	Collaborate with product, design (Figma), and backend teams to deliver user-centric features.",
+        "•	Ensure app quality through testing, debugging, and ongoing performance improvements.",
+      ]
+    }
   ];
 
   const userData: UserDataType = {

my-app/public/cv_2025.pdf

@@ -1,7 +1,6 @@
 import { motion } from "motion/react";
 import { SkillsType } from "shared/constants/enums";
 import ExperienceType from "../../../shared/types/experienceType";
-import ExperienceYearItemMobile from "./experienceYearItemMobile";
 
 interface ExperienceCardMobileProps {
   isThemeLight: boolean;
@@ -29,64 +28,53 @@ const ExperienceCardMobile = (props: ExperienceCardMobileProps) => {
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: 0.2, ease: "easeIn" }}
-      className={`w-full h-full flex items-start justify-start text-base leading-5 ${
-        isThemeLight ? "text-black" : "text-gray-300"
-      }`}
+      className={`relative w-full h-full text-base leading-5 ${isThemeLight ? "text-black" : "text-gray-300"
+        }`}
     >
-      {experienceList.map((experience, index) => {
-        const prevYear = index > 0 ? experienceList[index - 1].endDate : null;
-        const currentYear = experience.endDate;
-        const isLastItem = index === experienceList.length - 1;
+      {/* Vertical timeline line */}
+      <div
+        className={`absolute top-0 bottom-0 left-0 w-px ${isThemeLight ? "bg-black" : "bg-white"
+          }`}
+      />
 
+      {experienceList.map((experience) => {
         return (
-          <div key={experience.id} className="flex flex-row pt-6">
-            {/* Border */}
-            <div
-              className={`flex-1 border-r-2 border-double ${
-                isThemeLight ? "border-black" : "border-white"
-              }`}
-            ></div>
-
-            {/* Year */}
-            <div className="flex flex-col flex-1 justify-between mr-4 mt-4 mb-4">
-              {/* End Date */}
-              {prevYear !== currentYear && (
-                <ExperienceYearItemMobile
-                  isThemeLight={isThemeLight}
-                  date={currentYear}
-                />
-              )}
-
-              {/* Start Date */}
-              <ExperienceYearItemMobile
-                isThemeLight={isThemeLight}
-                date={experience.startDate}
-              />
-            </div>
-
-            {/* Item */}
-            <div
-              className={`flex flex-col items-center justify-start min-h-full`}
-            >
-              <div
-                key={experience.id}
-                className={`${isLastItem ? "" : "pb-4"}`}
+          <div
+            key={experience.id}
+            className="flex flex-row items-stretch mb-4 mt-4 pl-6 relative"
+          >
+            {/* Date Column (endDate on top, startDate on bottom) */}
+            <div className="absolute left-2 top-0 h-full flex flex-col justify-between items-center">
+              <span
+                className="text-xs font-bold"
+                style={{ writingMode: "vertical-rl", textOrientation: "upright" }}
               >
-                {/* Experience Title & Role */}
-                <div className="flex flex-row items-center justify-start mb-4 leading-4">
-                  <h1 className="text-xl font-bold border-r-2 border-gray-400 pr-2">
-                    {experience.title}
-                  </h1>
-                  <h3 className="pl-2 text-base">{experience.role}</h3>
-                </div>
+                {experience.endDate}
+              </span>
+              <span
+                className="text-xs"
+                style={{ writingMode: "vertical-rl", textOrientation: "upright" }}
+              >
+                {experience.startDate}
+              </span>
+            </div>
 
-                {/* Experience Details */}
-                {experience.description.map((item, index) => (
-                  <p key={index} className="mb-2">
-                    {highlightText(item, Object.values(SkillsType))}
-                  </p>
-                ))}
+            {/* Experience Content */}
+            <div className="flex flex-col flex-1 ml-8">
+              {/* Title & Role */}
+              <div className="flex flex-row items-center mb-2">
+                <h1 className="text-lg font-bold border-r-2 border-gray-400 pr-2">
+                  {experience.title}
+                </h1>
+                <h3 className="pl-2 text-sm">{experience.role}</h3>
               </div>
+
+              {/* Description */}
+              {experience.description.map((item, i) => (
+                <p key={i} className="mb-2">
+                  {highlightText(item, Object.values(SkillsType))}
+                </p>
+              ))}
             </div>
           </div>
         );