diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index fc9fcf0..292642d 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,22 +1,17 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+# This workflow builds and deploys a Vite site to GitHub Pages
 name: Deploy Vite site to Pages
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pushes to master and version branches
   push:
-    branches: ["master"]
+    branches: ["master", "v1", "v2", "v3", "v4", "v5"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
 
@@ -27,39 +22,58 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  # Build job
-  build:
+  build-and-deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'npm'
+
       - name: Install dependencies
         run: npm ci
-      - name: Setup Pages
-        id: pages
-        uses: actions/configure-pages@v5
+
       - name: Build with Vite
         run: npm run build
         env:
           NODE_ENV: production
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./dist
+          VITE_BASE_PATH: ${{ github.ref_name == 'master' && '/' || format('/{0}/', github.ref_name) }}
+
+      # Add these debug steps:
+      - name: Debug - Show branch and base path
+        run: |
+          echo "Branch: ${{ github.ref_name }}"
+          echo "Base path: ${{ github.ref_name == 'master' && '/' || format('/{0}/', github.ref_name) }}"
+
+      - name: Debug - List dist contents
+        run: |
+          echo "Contents of dist directory:"
+          ls -la dist/
+          echo "File count:"
+          find dist -type f | wc -l
+
+      - name: Debug - Show destination
+        run: |
+          echo "Destination directory: ${{ steps.destination.outputs.dir }}"
+
+      - name: Set destination directory
+        id: destination
+        run: |
+          if [ "${{ github.ref_name }}" == "master" ]; then
+            echo "dir=" >> $GITHUB_OUTPUT
+          else
+            echo "dir=${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
 
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
       - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          destination_dir: ${{ steps.destination.outputs.dir }}
+          keep_files: true
+          force_orphan: false
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index deab3a2..fd4bec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
+        "lucide-react": "^0.562.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-icons": "^5.5.0",
@@ -2332,6 +2333,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index 82e4c9e..c211a6a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "lucide-react": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
diff --git a/src/assets/gifs/dashboard.gif b/src/assets/gifs/dashboard.gif
new file mode 100644
index 0000000..b4ec380
Binary files /dev/null and b/src/assets/gifs/dashboard.gif differ
diff --git a/src/assets/gifs/multimodal_ui.gif b/src/assets/gifs/multimodal_ui.gif
new file mode 100644
index 0000000..db8bcf4
Binary files /dev/null and b/src/assets/gifs/multimodal_ui.gif differ
diff --git a/src/assets/gifs/notilytics.gif b/src/assets/gifs/notilytics.gif
new file mode 100644
index 0000000..efdc774
Binary files /dev/null and b/src/assets/gifs/notilytics.gif differ
diff --git a/src/assets/gifs/portfolio.gif b/src/assets/gifs/portfolio.gif
new file mode 100644
index 0000000..9607dda
Binary files /dev/null and b/src/assets/gifs/portfolio.gif differ
diff --git a/src/assets/concordia_logo.png b/src/assets/images/concordia_logo.png
similarity index 100%
rename from src/assets/concordia_logo.png
rename to src/assets/images/concordia_logo.png
diff --git a/src/assets/cropped-profile.jpg b/src/assets/images/cropped-profile.jpg
similarity index 100%
rename from src/assets/cropped-profile.jpg
rename to src/assets/images/cropped-profile.jpg
diff --git a/src/assets/images/dashboard.png b/src/assets/images/dashboard.png
new file mode 100644
index 0000000..487d68c
Binary files /dev/null and b/src/assets/images/dashboard.png differ
diff --git a/src/assets/mcgill_logo.png b/src/assets/images/mcgill_logo.png
similarity index 100%
rename from src/assets/mcgill_logo.png
rename to src/assets/images/mcgill_logo.png
diff --git a/src/assets/images/methodology.png b/src/assets/images/methodology.png
new file mode 100644
index 0000000..8b03ebb
Binary files /dev/null and b/src/assets/images/methodology.png differ
diff --git a/src/assets/images/multimodal.png b/src/assets/images/multimodal.png
new file mode 100644
index 0000000..5b6e70b
Binary files /dev/null and b/src/assets/images/multimodal.png differ
diff --git a/src/assets/images/notilytics.png b/src/assets/images/notilytics.png
new file mode 100644
index 0000000..0d447b6
Binary files /dev/null and b/src/assets/images/notilytics.png differ
diff --git a/src/assets/images/portfolio.png b/src/assets/images/portfolio.png
new file mode 100644
index 0000000..a2ec3fd
Binary files /dev/null and b/src/assets/images/portfolio.png differ
diff --git a/src/assets/profile-cropped.jpg b/src/assets/images/profile-cropped.jpg
similarity index 100%
rename from src/assets/profile-cropped.jpg
rename to src/assets/images/profile-cropped.jpg
diff --git a/src/components/AboutMe.jsx b/src/components/AboutMe.jsx
index 74f209c..b6e5e63 100644
--- a/src/components/AboutMe.jsx
+++ b/src/components/AboutMe.jsx
@@ -1,4 +1,4 @@
-import profileImg from '../assets/cropped-profile.jpg'
+import profileImg from '../assets/images/cropped-profile.jpg'
 import resumePdf from '../assets/resume.pdf'
 
 import { FaLinkedin, FaGithub, FaFileDownload } from 'react-icons/fa'
@@ -15,11 +15,9 @@ function AboutMe() {
                         <div>
                             <h1 className="text-6xl font-extrabold font-mono mb-6 text-white">Luan Tran</h1>
                             <p className="mb-6 text-white">
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et urna in quam vehicula pretium vitae sed lorem.
-                                Phasellus egestas convallis euismod. Cras magna magna, vestibulum quis iaculis non, mattis vel nulla.
-                                Praesent dictum at purus vel fringilla. Nulla feugiat tincidunt pulvinar. Donec posuere nisl vel molestie blandit.
-                                Sed ornare velit eu vestibulum lacinia. Fusce et eros dui. Sed ante mi, ornare et cursus scelerisque, egestas et risus.
-                                Etiam odio ex, maximus ac imperdiet vitae, bibendum ut ipsum.
+                                I'm a Master's of Applied Computer Science student with a passion for machine learning and web development.
+                                I've worked on projects ranging from English proficiency classification to reactive web applications. Currently, I'm exploring ways to integrate using LLMs as agents in the context
+                                of linguistic education (French and English) and looking for opportunities in Web Development/Machine Learning.
                             </p>
                             <div className="flex justify-between items-center">
                                 <ul className="flex gap-4">
diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
index 438d4d0..2f15419 100644
--- a/src/components/Experience.jsx
+++ b/src/components/Experience.jsx
@@ -1,28 +1,58 @@
 import SectionArrow from "./SectionArrow.jsx";
+import {experienceData} from "./data/experience.js";
+
+const ExperienceItem = ({ data }) => {
+
+    return (
+        <div className="relative pl-12 pb-12">
+            <div className="absolute left-2.5 top-1.5 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></div>
+
+            <div className="bg-white/10 border border-gray-700 rounded-lg p-6 hover:border-gray-600 transition-colors">
+                <div className="flex items-start justify-between mb-3">
+                    <div>
+                        <span className="commit-hash text-yellow-400 text-sm">{data.hash}</span>
+                        <h3 className="text-3xl font-semibold text-white mt-1">{data.title}</h3>
+                        <h4 className="mt-1"><span className="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-md">{data.company}
+  </span> </h4>
+                    </div>
+                    <span className="text-gray-400 text-lg">{data.period}</span>
+                </div>
+                <div className="space-y-2 mb-4">
+                    {data.achievements.map((achievementPoint, index) => (
+                        <div key={index} className="text-green-400 text-md commit-hash">
+                            <span className="mr-2">+</span>{achievementPoint}
+                        </div>
+                    ))}
+                </div>
+                <div className="flex flex-wrap gap-2 pt-4 border-t border-white/50">
+                    {data.tech.map((techPoint, index) => (
+                        <span key={index} className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-xs">{techPoint}</span>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
 
 function Experience() {
     return (
         <section id="experience" className="min-h-screen flex flex-col items-center justify-between">
-            <div className="flex-grow flex items-center justify-center w-full">
-
-                <div className="max-w-6xl mx-auto px-4">
+            <div className="flex-grow flex items-center justify-center w-full ">
+                <div className="max-w-6xl mx-auto mb-16">
                     <h2 className="text-5xl font-bold text-white text-center mb-12">
                         Work Experience
                     </h2>
 
-                    <div className="space-y-8">
-                        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                        </div>
-
-                        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                        </div>
+                    <div className="relative">
+                        <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-700"></div>
 
-                        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                        </div>
+                        {experienceData.map((experience) => (
+                            <ExperienceItem key={experience.hash} data={experience} />
+                        ))}
                     </div>
                 </div>
             </div>
-            <SectionArrow targetSection="projects" />
+            <SectionArrow targetSection="projects"/>
         </section>
     )
 }
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 5733538..2e20200 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -1,3 +1,132 @@
+import { ExternalLink, Code } from 'lucide-react';
+import { projectData } from './data/projects.js';
+import {useState} from "react";
+
+const ProjectCard = ({ project }) => {
+    const [showGif, setShowGif] = useState(false);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    return (
+        <div className="relative group">
+            {/* Animated Glow Border */}
+            <div className="absolute -inset-[1px] rounded-2xl bg-[conic-gradient(from_140deg,_rgba(244,244,245,0.16),_rgba(39,39,42,0.2),_rgba(148,163,184,0.35),_rgba(244,244,245,0.16))] opacity-0 blur-[1px] transition-opacity duration-300 group-hover:opacity-100" />
+
+            {/* Main Card Container */}
+            <div className="relative z-10 h-full rounded-2xl border border-zinc-800/80 bg-white/10 text-white shadow-[0_18px_45px_rgba(0,0,0,0.7)] backdrop-blur-md transition-transform duration-300 group-hover:-translate-y-1 overflow-hidden flex flex-col">
+
+                {/* Project Image */}
+                <div
+                    className="relative w-full aspect-[3/2] overflow-hidden bg-gradient-to-br from-primary/10 via-accent/10 to-primary/10"
+                    onMouseEnter={() => setShowGif(true)}
+                    onMouseLeave={() => setShowGif(false)}
+                >
+                    {/* Placeholder - shows while image loads */}
+                    {!imageLoaded && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-zinc-800/50">
+                            <div className="animate-pulse text-zinc-400">Loading...</div>
+                        </div>
+                    )}
+
+                    {/* Actual Image */}
+                    <img
+                        src={showGif ? project.image : project.thumbnail}
+                        alt={project.title}
+                        loading="lazy"
+                        decoding="async"
+                        onLoad={() => setImageLoaded(true)}
+                        className={`object-cover w-full h-full transition-all duration-300 ${
+                            imageLoaded ? 'opacity-100' : 'opacity-0'
+                        } ${showGif ? 'scale-105' : ''}`}
+                    />
+                </div>
+
+                {/* Card Header */}
+                <div className="flex flex-col space-y-1.5 p-6 pb-3">
+
+                        {/* Category Badge */}
+                    <div className="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-zinc-600/70 bg-transparent text-[10px] font-mono uppercase tracking-[0.16em] text-zinc-300 whitespace-nowrap w-fit">
+                            <Code className="mr-1 h-3 w-3" />
+                            {project.category}
+                        </div>
+
+                        {/* Title + Description */}
+                        <div className="space-y-1">
+                            <h3 className="tracking-tight text-base md:text-lg font-semibold">
+                                {project.title}
+                            </h3>
+                            <p className="text-xs md:text-sm text-zinc-400">
+                                {project.description}
+                            </p>
+                        </div>
+
+                </div>
+
+                {/* Card Body */}
+                <div className="p-6 space-y-4 pt-1 flex-grow flex flex-col">
+
+                    {/* Tech Stack Tags */}
+                    <div className="flex flex-wrap gap-2">
+                        {project.techStack.map((tech, index) => (
+                            <div
+                                key={index}
+                                className="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-secondary/80 border-none bg-zinc-800/80 text-[11px] font-normal text-zinc-100"
+                            >
+                                {tech}
+                            </div>
+                        ))}
+
+                    </div>
+
+                    {/* Feature List */}
+                    <ul className="space-y-1.5 text-xs text-zinc-300">
+                        {project.features.map((feature, index) => (
+                            <li key={index} className="flex gap-2">
+                                <span className="mt-[3px] h-[3px] w-[3px] rounded-full bg-zinc-400 flex-shrink-0" />
+                                <span>{feature}</span>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <div className="flex-grow"></div>
+
+                    {/* Footer */}
+                    <div className="flex items-center justify-end pt-2 text-xs text-zinc-400 border-t border-zinc-800/50">
+
+                        {/* Action Links */}
+                        <div className="flex items-center gap-3">
+
+                            {/* Live Demo Link (conditional) */}
+                            {project.demoUrl && (
+                                <a
+                                    href={project.demoUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center gap-1 text-[11px] font-medium text-zinc-100 hover:text-white transition-colors"
+                                >
+                                    Live Demo <ExternalLink className="h-3.5 w-3.5" />
+                                </a>
+                            )}
+
+                            {/* GitHub Code Link */}
+                            {project.githubUrl && (
+                                <a
+                                    href={project.githubUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex items-center gap-1 text-[11px] font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
+                                >
+                                    Code <ExternalLink className="h-3.5 w-3.5" />
+                                </a>
+                            )}
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
 function Projects() {
     return (
         <section id="projects" className="min-h-screen py-20 px-4">
@@ -6,15 +135,10 @@ function Projects() {
                     Projects
                 </h2>
 
-                <div className="space-y-8">
-                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                    </div>
-
-                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                    </div>
-
-                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
-                    </div>
+                <div className="grid gap-6 md:grid-cols-2">
+                    {projectData.map((project, index) => (
+                        <ProjectCard key={index} project={project} />
+                    ))}
                 </div>
             </div>
         </section>
diff --git a/src/components/data/education.js b/src/components/data/education.js
index 3b4f286..97dc0ff 100644
--- a/src/components/data/education.js
+++ b/src/components/data/education.js
@@ -1,6 +1,6 @@
 // Import logos
-import mcgillLogo from '../../assets/mcgill_logo.png'
-import concordiaLogo from '../../assets/concordia_logo.png'
+import mcgillLogo from '../../assets/images/mcgill_logo.png'
+import concordiaLogo from '../../assets/images/concordia_logo.png'
 
 export const educationData = [
     {
diff --git a/src/components/data/experience.js b/src/components/data/experience.js
new file mode 100644
index 0000000..69e453a
--- /dev/null
+++ b/src/components/data/experience.js
@@ -0,0 +1,56 @@
+export const experienceData = [
+    {
+        hash: "a3f52b9", // or auto-generate
+        title: "Web Automation Developer Intern",
+        company: "Broadsign",
+        period: "Jan - May 2019",
+        // description: "Brief overview...",
+        achievements: [
+            "Designed a new automation framework that accurately reproduce a live environment against which integration\n" +
+        "and system tests can be run",
+            "Automated the clean deployment and database population of a web server using Docker and Bitbucket Pipelines",
+            "Developed a Python REST tool library which developers could use to write their unit and integration tests"
+        ],
+        // projects: [ // optional array
+        //     { name: "Dashboard Redesign", link: "..." }
+        // ],
+        // impact: "40% increase in engagement", // optional
+        tech: ["Python", "Docker", "Bitbucket"],
+    },
+    {
+        hash: "7c2d81e", // or auto-generate
+        title: "Software Developer Intern",
+        company: "Ericsson",
+        period: "May - Dec 2018",
+        // description: "Brief overview...",
+        achievements: [
+            "Automated software installation processes to decrease runtime by 15% using Ansible",
+            "Implemented a build certification process in custom Concourse to improve testing team’s efficiency by 75%",
+            "Developed automated Oracle backup and restore solution to decrease Concourse jobs’ runtime by 20%",
+            "Proposed and implemented new dispatch process for CI infrastructure by integrating Mantis API to Concourse"
+        ],
+        // projects: [ // optional array
+        //     { name: "Dashboard Redesign", link: "..." }
+        // ],
+        // impact: "40% increase in engagement", // optional
+        tech: ["Python", "Mantis", "Concourse", "Ansible"],
+    },
+    {
+        hash: "1f9a3bc", // or auto-generate
+        title: "Automation SQA Intern",
+        company: "Matrox",
+        period: "Jan - Aug 2017",
+        // description: "Brief overview...",
+        achievements: [
+            "Created a new automated testing workflow to improve reduce weekly manual testing by 10 hours",
+            "Integrated Silktest, Jenkins and Testrail API using Python scripts to 100% automate log parsing, reporting and archiving",
+            "Set up, configured and managed Jenkins servers and slaves",
+            "Developed Python and 4Test test suites to perform functional and performance tests"
+        ],
+        // projects: [ // optional array
+        //     { name: "Dashboard Redesign", link: "..." }
+        // ],
+        // impact: "40% increase in engagement", // optional
+        tech: ["Python", "Bash", "Silktest", "Jenkins", "Testrail"],
+    }
+]
\ No newline at end of file
diff --git a/src/components/data/projects.js b/src/components/data/projects.js
new file mode 100644
index 0000000..f8473a8
--- /dev/null
+++ b/src/components/data/projects.js
@@ -0,0 +1,88 @@
+import medicalImagingGif from '../../assets/gifs/multimodal_ui.gif';
+import medicalImagingPng from '../../assets/images/multimodal.png';
+import methodologyPng from '../../assets/images/methodology.png';
+import dashboardGif from '../../assets/gifs/dashboard.gif';
+import dashboardPng from '../../assets/images/dashboard.png';
+import notilyticsGif from '../../assets/gifs/notilytics.gif';
+import notilyticsPng from '../../assets/images/notilytics.png';
+import portfolioGif from '../../assets/gifs/portfolio.gif';
+import portfolioPng from '../../assets/images/portfolio.png';
+
+export const projectData = [
+    {
+        title: "One Model to Grade them All",
+        description: "Comparative study of ML approaches for automatic CEFR level classification of English learner writing. Trained on EFCamDAT corpus and evaluated on multiple out-of-domain corpora (Write & Improve, ICNALE, ASAG) to assess cross-corpus generalization.",
+        category: "NLP / Education",
+        techStack: ["Python", "PyTorch", "NLP", "Transformers", "Word2Vec", "Machine Learning", "RoBERTa"],
+        features: [
+            "Processes and combines four major learner corpora with comprehensive evaluation across in-domain and out-of-domain datasets using multiple metrics",
+            "Implements and compares Naive Bayes (traditional ML), Word2Vec (neural embeddings), and RoBERTa (transformer-based) with ablation studies",
+            "End-to-end workflow from data extraction to visualization with provenance tracking, stratified sampling, and automated generation of comparison charts and performance tables"
+        ],
+        image: methodologyPng,
+        thumbnail: methodologyPng,
+        demoUrl: null,
+        githubUrl: "https://github.com/luantran/One-model-to-grade-them-all"
+    },
+    {
+        title: "Multimodal Torso Image Reconstruction",
+        description: "A PyQt5/VTK-based desktop application for visualizing and registering multimodal medical imaging data to create 3D models of the human torso for scoliosis surgical planning.",
+        category: "Medical Imaging",
+        techStack: ["Python", "PyQt5", "VTK", "Medical Imaging", "3D Visualization", "Image Registration","Desktop Application"],
+        features: [
+            "Load and display MRI , X-Ray, and surface topography in an interactive 3D environment",
+            "Perform rigid or articulated registration using anatomical landmarks to align and fuse multiple imaging modalities",
+            "Navigate through MRI slice planes, manipulate 3D models with rotation/zoom/pan controls, and export registered models for surgical planning"
+        ],
+        image: medicalImagingGif,
+        thumbnail: medicalImagingPng,
+        demoUrl: null,
+        githubUrl: "https://github.com/luantran/MultimodalTorsoImageReconstruction"
+    },
+    {
+        title: "Anime Dashboard Extension",
+        description: "A lightweight, customizable browser extension that transforms your new-tab page into an elegant anime-themed dashboard with full-screen wallpapers, carousel mode with adjustable intervals, and responsive settings sidebar.",
+        category: "Browser Extension",
+        techStack: ["JavaScript", "React", "Vite", "Bootstrap", "Chrome Extension"],
+        features: [
+            "Automatically loads anime wallpapers from GitHub repository with local storage caching for performance optimization",
+            "Adjustable display intervals and smooth transitions between wallpapers with user-controlled timing settings",
+            "Off-canvas settings panel for folder navigation, interval management, and wallpaper collection browsing",
+            "To-do list with caching for persistence"
+        ],
+        image: dashboardGif,
+        thumbnail: dashboardPng,
+        demoUrl: null,
+        githubUrl: "https://github.com/luantran/anime-dashboard-extension"
+    },
+    {
+        title: "Notylitics",
+        description: "Reactive news analytics platform with real-time article streaming, sentiment analysis, and readability metrics. Built with Play Framework, Pekko Actors, and WebSockets for live updates and comprehensive analytics.",
+        category: "Web Application",
+        techStack: ["Java", "Play Framework", "Pekko Actors", "WebSockets", "Reactive Programming"],
+        features: [
+            "Real-time news streaming: live article updates with sentiment detection and Flesch-Kincaid readability metrics",
+            "Actor-based concurrency using Pekko Actors with asynchronous CompletableFutures for non-blocking operations",
+            "Complete Continuous Integration workflow with 100% Jacoco coverage"
+        ],
+        image: notilyticsGif,
+        thumbnail: notilyticsPng,
+        demoUrl: null,
+        githubUrl: "https://github.com/luantran/Notilytics"
+    },
+    {
+        title: "Personal Portfolio Website (v1)",
+        description: "First version of my personal portfolio website built with React and Vite",
+        category: "Portfolio",
+        techStack: ["JavaScript", "React", "Vite", "TailwindCSS", "GitHub Pages", "Github Actions"],
+        features: [
+            "Modern development stack: Built with React and Vite",
+            "Responsive design",
+            "GitHub Pages deployment: Automated CI/CD workflow for seamless deployment and hosting on GitHub Pages"
+        ],
+        image: portfolioGif,
+        thumbnail: portfolioPng,
+        demoUrl: "https://luantran.github.io",
+        githubUrl: "https://github.com/luantran/luantran.github.io"
+    }
+];
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 7645c34..2413608 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,7 @@ import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: process.env.VITE_BASE_PATH || '/',
   plugins: [
       react(),
       tailwindcss()