From 7e3cb1dcea8ec71f2965f13cf3f9ad88149f4ae3 Mon Sep 17 00:00:00 2001 From: brianschnee Date: Sun, 7 Jun 2026 02:34:03 -0400 Subject: [PATCH] feat/refactor: improvements to the projects page --- app/blogs/page.tsx | 1 - app/globals.css | 40 ++++++++--- app/projects/page.tsx | 133 ++++++++++++++++++++++++------------- components/ui/Icon.tsx | 62 +++++++++++------ icons/css.svg | 4 -- icons/ejs.svg | 1 - icons/go.svg | 1 + icons/jwt.svg | 1 + icons/postgresql.svg | 1 + icons/prisma.svg | 1 + icons/rust.svg | 1 + lib/projects.ts | 86 +++++++++--------------- public/assets/findadev.jpg | Bin 288425 -> 0 bytes public/assets/timeato.jpg | Bin 364873 -> 0 bytes 14 files changed, 197 insertions(+), 135 deletions(-) delete mode 100644 icons/css.svg delete mode 100644 icons/ejs.svg create mode 100644 icons/go.svg create mode 100644 icons/jwt.svg create mode 100644 icons/postgresql.svg create mode 100644 icons/prisma.svg create mode 100644 icons/rust.svg delete mode 100644 public/assets/findadev.jpg delete mode 100644 public/assets/timeato.jpg diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx index 4d99853..e651f80 100644 --- a/app/blogs/page.tsx +++ b/app/blogs/page.tsx @@ -14,7 +14,6 @@ const BlogsPage = async () => { patterns, and lessons I pick up along the way. Each piece is a snapshot of how I was thinking about the problem at the time. -
{blogs.map((blog) => ( ( + (groups, project) => { + const group = project.src ? groups.apps : groups.tools; + group.push(project); + return groups; + }, + { tools: [], apps: [] }, + ); + + const TOOLS_TITLE = "Tools, libraries, and experiments"; + const APPS_TITLE = "Applications and websites"; + + return ( + <> + + + I enjoy building things and bringing ideas to life through software. + Here you'll find a collection of projects I've worked on, + technologies I've explored, and lessons I've picked up along + the way. This page groups projects into two sections:{" "} + + {TOOLS_TITLE} + {" "} + and{" "} + + {APPS_TITLE} + + . + + + + + + ); +} + +const ProjectSection = ({ + id, + title, + description, + projects, +}: { + id: string; + title: string; + description: string; + projects: ProjectProps[]; +}) => { + return ( +
+
+

+ {title} +

+

{description}

+
+
    + {projects.map((props: ProjectProps) => { + return ( + + ); + })} +
+
+ ); +}; + const Project = ({ src, - site, repo, title, description, @@ -42,18 +129,6 @@ const Project = ({ hover="hover:stroke-secondary" /> - {site && ( - - - - )}