walkerhsu · walkerhsu · Nov 4, 2025 · Nov 4, 2025
diff --git a/.github/workflows/deploy-portfolio.yml b/.github/workflows/deploy-portfolio.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main', 'test-deploy']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Set up Node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          # Upload dist folder
+          path: './build'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/index.html b/index.html
@@ -5,6 +5,18 @@
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Walker Hsu</title>
+      <script>
+      (function(l) {
+        if (l.search[1] === '/' ) {
+          var decoded = l.search.slice(1).split('&').map(function(s) { 
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(null, null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+          );
+        }
+      }(window.location))
+    </script>
     </head>
 
     <body>

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Redirecting...</title>
+    <script>
+      // Store the path that was attempted
+      var pathSegmentsToKeep = 1; // For /Personal-Portfolio/
+
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/src/components/details/ExperienceDetail.tsx b/src/components/details/ExperienceDetail.tsx
@@ -24,7 +24,7 @@ export default function ExperienceDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/experience")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />

diff --git a/src/components/details/ProjectDetail.tsx b/src/components/details/ProjectDetail.tsx
@@ -26,7 +26,7 @@ export default function ProjectDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/projects")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />

diff --git a/src/components/details/ResearchDetail.tsx b/src/components/details/ResearchDetail.tsx
@@ -26,7 +26,7 @@ export default function ResearchDetail() {
         <Box sx={{ maxWidth: "1152px", mx: "auto", px: 3, py: 3 }}>
           <Button
             variant="text"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate("/research")}
             sx={{ textTransform: "none", color: "black", gap: 1, ml: -1.5 }}
           >
             <ArrowLeft size={16} />

diff --git a/src/data/projects.ts b/src/data/projects.ts
@@ -1,5 +1,9 @@
 import React from "react";
 import GitHubIcon from "@mui/icons-material/GitHub";
+import landsatImg from "/projects/landsat.png";
+import caRPG from "/projects/CaRPG.png";
+import llmDBMS from "/projects/LLM_DBMS.png";
+import waterIntake from "/projects/WaterIntake.png";
 
 export interface Project {
   title: string;
@@ -29,7 +33,7 @@ export const projects: Project[] = [
     period: "2024 Fall",
     description:
       "Developed a management system for Landsat Surface Reflectance Data. The project involved building a web application to visualize and analyze satellite data, receiving notifications when the satellite passes over specific regions.",
-    thumbnail: "/projects/landsat.png",
+    thumbnail: landsatImg,
     tags: [
       "Python",
       "FastAPI",
@@ -77,7 +81,7 @@ export const projects: Project[] = [
     period: "2024 Spring",
     description:
       "Created an in-car RPG game dynamically generated by LLM. The project involved a shooting gameplay with gesture detection to enhance user interaction while traveling. Developed a full-stack application integrating backend AI services with a mobile frontend.",
-    thumbnail: "/projects/CaRPG.png",
+    thumbnail: caRPG,
     tags: ["Python", "Pytorch", "PyGame", "FastAPI", "Flutter", "NLP"],
     award: "1st place of AUO Enterprise Award in MakeNTU 2024",
     role: "Team Leader | Developer",
@@ -119,7 +123,7 @@ export const projects: Project[] = [
     period: "2024 Fall",
     description:
       "Developed a system to track and encourage water intake using embedded systems and a mobile application. The project involved creating a smart device that can monitors consumption and provides reminders through the application.",
-    thumbnail: "/projects/WaterIntake.png",
+    thumbnail: waterIntake,
     tags: ["C", "Algorithm", "Embedded Systems", "Flutter"],
     role: "Software Engineer",
     client: "Course Project",
@@ -159,7 +163,7 @@ export const projects: Project[] = [
     period: "2024 Spring",
     description:
       "Developed a database management system enhanced with LLM capabilities. The project involved integrating natural language processing features to allow users to interact with the database using natural languages. Also, it allows extracting information from audios and pdfs.",
-    thumbnail: "/projects/LLM_DBMS.png",
+    thumbnail: llmDBMS,
     tags: ["Python", "LLM", "Whisper", "LangChain", "SQL", "MongoDB"],
     role: "AI Engineer",
     client: "Course Project",

diff --git a/src/data/research.ts b/src/data/research.ts
@@ -1,5 +1,6 @@
 import React from "react";
 import ArticleIcon from "@mui/icons-material/Article";
+import AEGIS from "/research/AEGIS.png";
 
 export interface Research {
   title: string;
@@ -32,7 +33,7 @@ export const research: Research[] = [
     description:
       "Devised a GAN-like framework to automatically generate prompts to defend against malicious prompt injection attacks. Tested the framework on real-world articles across various LLMs, achieving a 20% in True Positive Rate (TPR) with only 2% decrease in True Negative Rate (TNR).",
     period: "2023 Fall ~ Present",
-    thumbnail: "/research/AEGIS.png",
+    thumbnail: AEGIS,
     tags: ["Python", "LLM", "GAN", "Prompt Injection"],
     role: "AI Researcher",
     client: "Academic Research",

diff --git a/src/main.tsx b/src/main.tsx
@@ -4,7 +4,7 @@ import App from "./App.tsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
+  <BrowserRouter basename="/Personal-Website">
     <App />
   </BrowserRouter>
 );
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,9 +1,6 @@
 import { Container, Box, Typography } from "@mui/material";
 import SchoolIcon from "@mui/icons-material/School";
-import Projects from "../components/sections/Projects";
-import Research from "../components/sections/Research";
-import Experience from "../components/sections/Experience";
-import Awards from "../components/sections/Awards";
+import backgroundImg from '/background.jpg';
 
 const HomePage = () => {
   return (
@@ -18,7 +15,7 @@ const HomePage = () => {
           justifyContent: "flex-end",
           color: "black",
           textAlign: "right",
-          backgroundImage: "url(/background.jpg)",
+          backgroundImage: `url(${backgroundImg})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
           paddingTop: "40px",

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  base: "/Personal-Website/",
   build: {
     target: "esnext",
     outDir: "build",