Migrate to Vite

.github/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [main]
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

public/index.html → index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon/favicon.ico" />
+    <link rel="icon" href="/favicon/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 
@@ -22,16 +22,14 @@
       property="og:description"
       content="Sophie Stone's personal website, showcasing software development projects"
     />
-    <meta property="og:image" content="%PUBLIC_URL%/assets/preview.png" />
+    <meta property="og:image" content="/assets/preview.png" />
     <meta property="og:url" content="https://smstone0.github.io" />
     <meta property="og:type" content="website" />
 
-    <link rel="manifest" href="%PUBLIC_URL%/favicon/manifest.json" />
-    <link
-      rel="apple-touch-icon"
-      href="%PUBLIC_URL%/favicon/apple-touch-icon.png"
-    />
+    <link rel="manifest" href="/favicon/manifest.json" />
+    <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" />
   </head>
+  <script type="module" src="/src/main.jsx"></script>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

package.json

@@ -10,15 +10,14 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6",
-    "react-scripts": "^5.0.1",
     "web-vitals": "^5.1.0"
   },
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "vite",
+    "build": "vite build",
+    "test": "vitest",
     "eject": "react-scripts eject",
     "lint": "eslint . --ext .js,.jsx",
     "format": "prettier --write .",
@@ -44,7 +43,10 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "gh-pages": "^6.1.1",
-    "prettier": "^3.7.3"
+    "prettier": "^3.7.3",
+    "vite": "^6.4.3",
+    "vite-plugin-svgr": "^5.2.0"
   }
 }

src/App.js → src/App.jsx

@@ -1,8 +1,8 @@
 import "./App.css";
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages/Home.js";
-import MapUK from "./pages/MapUK.js";
-import NotFound from "./pages/NotFound.js";
+import Home from "./pages/Home";
+import MapUK from "./pages/MapUK";
+import NotFound from "./pages/NotFound";
 
 function App() {
   return (

src/components/Dropdown.js → src/components/Dropdown.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import "../styles/Dropdown.css";
-import { ReactComponent as Chevron } from "../assets/down-arrow.svg";
+import Chevron from "../assets/down-arrow.svg?react";
 
 function Dropdown({ allTechStacks, selectedTechStacks, onTechStackChange }) {
   const [dropdownOpen, setDropdownOpen] = useState(false);

src/components/Header.js → src/components/Header.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as GithubIcon } from "../assets/github-mark-white.svg";
-import { ReactComponent as LinkedInIcon } from "../assets/linkedin.svg";
+import GithubIcon from "../assets/github-mark-white.svg?react";
+import LinkedInIcon from "../assets/linkedin.svg?react";
 import "../styles/Header.css";
 import { Link } from "react-router-dom";
 

src/components/Modal.js → src/components/Modal.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { ReactComponent as CloseIcon } from "../assets/close.svg";
-import { ReactComponent as RightArrow } from "../assets/right-arrow.svg";
-import { ReactComponent as LeftArrow } from "../assets/left-arrow.svg";
+import { useState } from "react";
+import CloseIcon from "../assets/close.svg?react";
+import RightArrow from "../assets/right-arrow.svg?react";
+import LeftArrow from "../assets/left-arrow.svg?react";
 import "../styles/Modal.css";
 
 function Modal({ images, onClose, project }) {

src/components/Projects.js → src/components/Projects.jsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import projects from "../data/project_data.js";
 import "../styles/Projects.css";
-import { ReactComponent as LinkIcon } from "../assets/link.svg";
-import { ReactComponent as ArrowIcon } from "../assets/arrow-up-right.svg";
-import Modal from "./Modal.js";
+import LinkIcon from "../assets/link.svg?react";
+import ArrowIcon from "../assets/arrow-up-right.svg?react";
+import Modal from "./Modal.jsx";
 import languageIcons from "./language/iconMapping.js";
-import Dropdown from "./Dropdown.js";
+import Dropdown from "./Dropdown.jsx";
 
 const techStackFrequency = projects
   .flatMap((project) => project.languages || [])

src/components/language/FirebaseIcon.js → src/components/language/FirebaseIcon.jsx

@@ -14,7 +14,7 @@ const FirebaseIcon = () => (
     ></path>
     <path
       fill="#fff"
-      fill-opacity=".2"
+      fillOpacity=".2"
       d="M98.51 28.604a2.913 2.913 0 0 0-1.984-2.286 2.906 2.906 0 0 0-2.94.713L78.479 42.178 66.6 19.562a2.91 2.91 0 0 0-5.15 0l-6.494 12.365L38.662 1.538A2.91 2.91 0 0 0 35.605.044a2.907 2.907 0 0 0-2.384 2.425L17.474 103.276h-.051l.05.058.415.204 75.676-75.764a2.91 2.91 0 0 1 4.932 1.571l11.965 74.003.116-.073L98.51 28.603Zm-80.898 74.534L33.228 3.182A2.91 2.91 0 0 1 35.613.756a2.911 2.911 0 0 1 3.057 1.495l16.292 30.39 6.495-12.366a2.91 2.91 0 0 1 5.15 0L78.245 42.41 17.61 103.138Z"
     ></path>
     <path

src/components/language/FlutterIcon.js → src/components/language/FlutterIcon.jsx

@@ -13,9 +13,9 @@ const FlutterIcon = () => (
       x2="86.825"
       y2="99.399"
     >
-      <stop offset="0" stop-color="#1b4e94"></stop>
-      <stop offset=".63" stop-color="#1a5497"></stop>
-      <stop offset="1" stop-color="#195a9b"></stop>
+      <stop offset="0" stopColor="#1b4e94"></stop>
+      <stop offset=".63" stopColor="#1a5497"></stop>
+      <stop offset="1" stopColor="#195a9b"></stop>
     </linearGradient>
     <path
       fill="url(#flutter-original-a)"

src/components/language/PHPIcon.js → src/components/language/PHPIcon.jsx

@@ -32,10 +32,10 @@ const PHPIcon = () => (
         gradientTransform="matrix(84.04136 0 0 84.04136 38.426 42.169)"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#AEB2D5"></stop>
-        <stop offset=".3" stop-color="#AEB2D5"></stop>
-        <stop offset=".75" stop-color="#484C89"></stop>
-        <stop offset="1" stop-color="#484C89"></stop>
+        <stop stopColor="#AEB2D5"></stop>
+        <stop offset=".3" stopColor="#AEB2D5"></stop>
+        <stop offset=".75" stopColor="#484C89"></stop>
+        <stop offset="1" stopColor="#484C89"></stop>
       </radialGradient>
     </defs>
   </svg>

src/components/language/PythonIcon.js → src/components/language/PythonIcon.jsx

@@ -9,8 +9,8 @@ const PythonIcon = () => (
       y2="1151.089"
       gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
     >
-      <stop offset="0" stop-color="#5A9FD4"></stop>
-      <stop offset="1" stop-color="#306998"></stop>
+      <stop offset="0" stopColor="#5A9FD4"></stop>
+      <stop offset="1" stopColor="#306998"></stop>
     </linearGradient>
     <linearGradient
       id="python-original-b"
@@ -21,8 +21,8 @@ const PythonIcon = () => (
       y2="1149.537"
       gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"
     >
-      <stop offset="0" stop-color="#FFD43B"></stop>
-      <stop offset="1" stop-color="#FFE873"></stop>
+      <stop offset="0" stopColor="#FFD43B"></stop>
+      <stop offset="1" stopColor="#FFE873"></stop>
     </linearGradient>
     <path
       fill="url(#python-original-a)"
@@ -42,8 +42,8 @@ const PythonIcon = () => (
       gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)"
       gradientUnits="userSpaceOnUse"
     >
-      <stop offset="0" stop-color="#B8B8B8" stop-opacity=".498"></stop>
-      <stop offset="1" stop-color="#7F7F7F" stop-opacity="0"></stop>
+      <stop offset="0" stopColor="#B8B8B8" stopOpacity=".498"></stop>
+      <stop offset="1" stopColor="#7F7F7F" stopOpacity="0"></stop>
     </radialGradient>
     <path
       opacity=".444"

src/components/language/SQLiteIcon.js → src/components/language/SQLiteIcon.jsx

@@ -10,9 +10,9 @@ const SQLiteIcon = () => (
         gradientTransform="rotate(90 -90.486 64.634) scale(9.2712)"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#95d7f4" offset="0"></stop>
-        <stop stop-color="#0f7fcc" offset=".92"></stop>
-        <stop stop-color="#0f7fcc" offset="1"></stop>
+        <stop stopColor="#95d7f4" offset="0"></stop>
+        <stop stopColor="#0f7fcc" offset=".92"></stop>
+        <stop stopColor="#0f7fcc" offset="1"></stop>
       </linearGradient>
     </defs>
     <path

src/index.js → src/main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import "./main.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 

src/pages/Home.js → src/pages/Home.jsx

@@ -1,5 +1,5 @@
-import Projects from "../components/Projects.js";
-import Header from "../components/Header.js";
+import Projects from "../components/Projects";
+import Header from "../components/Header";
 
 function Home() {
   return (

src/pages/MapUK.js → src/pages/MapUK.jsx

@@ -1,12 +1,12 @@
 import { useState, useEffect } from "react";
-import { ReactComponent as Map } from "../assets/MapChart_Map.svg";
-import { ReactComponent as GithubIcon } from "../assets/github-mark-white.svg";
-import { ReactComponent as DownloadIcon } from "../assets/download.svg";
-import { ReactComponent as ResetIcon } from "../assets/delete.svg";
-import { ReactComponent as InfoIcon } from "../assets/info.svg";
+import Map from "../assets/MapChart_Map.svg?react";
+import GithubIcon from "../assets/github-mark-white.svg?react";
+import DownloadIcon from "../assets/download.svg?react";
+import ResetIcon from "../assets/delete.svg?react";
+import InfoIcon from "../assets/info.svg?react";
 import "../styles/MapUK.css";
 import "../styles/Modal.css";
-import { ReactComponent as CloseIcon } from "../assets/close-black.svg";
+import CloseIcon from "../assets/close-black.svg?react";
 
 function MapUK() {
   const [selectedCounty, setSelectedCounty] = useState(null);

src/pages/NotFound.js → src/pages/NotFound.jsx

@@ -1,5 +1,4 @@
-import Header from "../components/Header.js";
-import image from "../assets/404.jpg";
+import Header from "../components/Header";
 
 function NotFound() {
   return (
@@ -10,7 +9,6 @@ function NotFound() {
         </header>
         <div id="not-found">
           <h1>Page not found!</h1>
-          <img src={image} alt="404" id="not-found-image" />
         </div>
       </div>
     </div>

vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+
+export default defineConfig({
+  plugins: [react(), svgr()],
+  base: "/",
+});