added apps page

Author: smanzler

src/App.tsx

@@ -6,6 +6,7 @@ import { Projects } from "@/components/sections/Projects";
 import { HashRouter, Route, Routes, useLocation } from "react-router";
 import ProjectDetails from "./components/pages/project-details";
 import { useEffect } from "react";
+import Apps from "./components/pages/apps";
 
 function Root() {
   const { state } = useLocation();
@@ -36,6 +37,7 @@ function App() {
               <Routes>
                 <Route path="/" element={<Root />} />
                 <Route path="/projects/:id" element={<ProjectDetails />} />
+                <Route path="/apps" element={<Apps />} />
               </Routes>
             </div>
           </main>

src/assets/dash-icon.png

@@ -0,0 +1,61 @@
+import { useNavigate } from "react-router";
+
+const apps = [
+  {
+    title: "Rep",
+    description:
+      "Workout tracker built to work offline and sync with your friends.",
+    image: "/src/assets/rep-icon.png",
+  },
+  {
+    title: "Dash",
+    description:
+      "Running tracker built to work offline and sync with your friends.",
+    image: "/src/assets/dash-icon.png",
+  },
+];
+
+const Apps = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen py-20">
+      <div className="flex flex-col px-6">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4 tracking-tight">
+          Apps
+        </h1>
+        <p className="text-base text-muted-foreground mb-8">
+          Here are some of the apps I've worked on.
+        </p>
+      </div>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {apps.map((app) => (
+          <div
+            key={app.title}
+            className="flex flex-row cursor-pointer hover:bg-accent dark:hover:bg-input/20 p-6 gap-6 rounded-xl"
+            onClick={() => navigate(`/apps/${app.title}`)}
+          >
+            <div className="flex flex-col gap-1 items-center justify-center">
+              <div className="relative rounded-lg overflow-hidden bg-muted w-16 h-16">
+                <img
+                  src={app.image}
+                  alt={app.title}
+                  className="object-cover w-full h-full object-center"
+                />
+              </div>
+              <p className="text-xs text-muted-foreground">{app.title}</p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-xl">{app.title}</h1>
+              <p className="line-clamp-3 text-sm text-muted-foreground">
+                {app.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Apps;

src/components/pages/apps.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 
 import { motion } from "framer-motion";
-import { Code, MoveRight } from "lucide-react";
+import { ArrowRight, Code, MoveRight } from "lucide-react";
 import { useNavigate } from "react-router";
 import { useProjects } from "@/hooks/useProjects";
 
@@ -105,13 +105,18 @@ export function Projects() {
         whileInView={{ opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.2 }}
         viewport={{ once: true }}
+        className="flex flex-row justify-between px-6 mb-12"
       >
-        <div className="flex flex-col gap-2 px-6 mb-12">
+        <div className="flex flex-col gap-2">
           <h2 className="text-3xl font-bold">Other Projects</h2>
           <p className="text-muted-foreground text-lg">
             Additional projects I've worked on
           </p>
         </div>
+        <Button variant="link" onClick={() => navigate("/apps")}>
+          View All Apps
+          <ArrowRight />
+        </Button>
       </motion.div>
 
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">