Add mini projects section

Author: nab138

public/apple-music.png

@@ -23,6 +23,8 @@ function App() {
         </Route>
         <Route path="/projects" element={<Projects />} />
         <Route path="/projects/:projectId" element={<Project />} />
+        <Route path="/mini-projects" element={<Projects />} />
+        <Route path="/mini-projects/:projectId" element={<Project />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </Header>

src/App.tsx

@@ -1,14 +1,17 @@
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import "./Project.css";
-import projects from "../utils/projects";
+import { mainProjects, miniProjects } from "../utils/projects";
 import { useEffect } from "react";
 import Slideshow from "../components/Slideshow";
 import TechIcon from "../components/TechIcon";
 
 export default function Project() {
+  const location = useLocation();
   const params = useParams();
   const navigate = useNavigate();
-  const project = projects.find((p) => p.id === params.projectId);
+  const project = (
+    location.pathname.includes("mini-projects") ? miniProjects : mainProjects
+  ).find((p) => p.id === params.projectId);
 
   useEffect(() => {
     if (!project) {

src/pages/Project.tsx

@@ -87,3 +87,16 @@
   height: 100%;
   border-radius: 0.5rem 0.5rem 0 0;
 }
+
+.mini-projects {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.mini-projects h1 {
+  margin: 0;
+}

src/pages/Projects.css

@@ -1,10 +1,13 @@
-import projects from "../utils/projects";
+import { mainProjects, miniProjects } from "../utils/projects";
 import "./Projects.css";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 
 export default function Projects() {
   const location = useLocation();
+
+  const isMini = location.pathname.includes("mini-projects");
+  const projects = isMini ? miniProjects : mainProjects;
   const [animating, setAnimating] = useState(false);
   const [hideOverlay, setHideOverlay] = useState(false);
   const [fsStyle, setFsStyle] = useState<any>({});
@@ -18,7 +21,7 @@ export default function Projects() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (transitionProject) {
+    if (transitionProject && !isMini) {
       setAnimating(true);
       setHideOverlay(false);
       setFsStyle({});
@@ -65,7 +68,7 @@ export default function Projects() {
         </div>
       )}
       <div className="projects-header">
-        <h1>My Projects</h1>
+        <h1>{isMini ? "Mini" : "My"} Projects</h1>
         <Link to="/">
           <h3>Back to home</h3>
         </Link>
@@ -87,7 +90,9 @@ export default function Projects() {
                 : undefined
             }
             onClick={() => {
-              navigate("/projects/" + project.id);
+              navigate(
+                (isMini ? "/mini-projects/" : "/projects/") + project.id
+              );
             }}
           >
             <img
@@ -101,6 +106,22 @@ export default function Projects() {
             </div>
           </div>
         ))}
+
+        <div
+          className={`project-card`}
+          onClick={() => {
+            navigate(`/${isMini ? "projects" : "mini-projects"}`);
+          }}
+        >
+          <div className="mini-projects">
+            <h1>{isMini ? "Main" : "Mini"} Projects</h1>
+            <h2>
+              {isMini
+                ? "Larger, high effort projects with a greater degree of polish"
+                : "Small or fun projects that didn't quite make the main cut!"}
+            </h2>
+          </div>
+        </div>
       </div>
     </div>
   );

src/pages/Projects.tsx

@@ -51,6 +51,7 @@
 
 .logo-img {
   width: 4rem;
+  margin-top: -0.6rem;
   rotate: 10deg;
   transition: all 0.3s;
   filter: drop-shadow(var(--shadow));

src/pages/SlideshowBg.css

@@ -1,4 +1,4 @@
-import projects from "../utils/projects";
+import { mainProjects } from "../utils/projects";
 import "./SlideshowBg.css";
 import Slideshow from "../components/Slideshow";
 import { Outlet } from "react-router-dom";
@@ -17,7 +17,7 @@ export default function SlideshowBg({
       <div className="slideshow-bg-slide-container">
         <Slideshow
           setCurSlide={setCurSlide}
-          slides={projects.map((p) => {
+          slides={mainProjects.map((p) => {
             return {
               name: p.name,
               desc: p.short,

src/pages/SlideshowBg.tsx

@@ -15,7 +15,7 @@ export type Project = {
   id: string;
 };
 
-const projects: Project[] = [
+export const mainProjects: Project[] = shuffleArray([
   {
     name: "Shrinkwrap",
     short: "Multipurpose app for FRC robotics",
@@ -198,8 +198,33 @@ const projects: Project[] = [
         url: "https://github.com/frcteam3044/2025swervebase",
       },
     ],
-    id: "oxidation",
+    id: "oxconfig",
   },
-];
+]);
 
-export default shuffleArray(projects);
+export const miniProjects: Project[] = shuffleArray([
+  {
+    name: "Apple Music Frontend",
+    short: "Alternative Apple Music web frontend",
+    points: [
+      "Supports live lyrics powered by LRC LIB",
+      "Uses MusicKit to access Apple Music API",
+      "Incredibly basic functionality",
+    ],
+    pointsTitle: "Features",
+    techStack: ["Bun", "Vite", "TypeScript", "React"],
+    images: ["apple-music.png"],
+    links: [
+      {
+        label: "GitHub",
+        url: "https://github.com/nab138/apple-music",
+      },
+      {
+        label: "Live Demo",
+        url: "https://music.nabdev.me",
+      },
+    ],
+
+    id: "apple-music",
+  },
+]);