Started work on projects section

src/App.test.tsx

@@ -45,7 +45,7 @@ describe("App", () => {
   it("has working primary links", () => {
     expect(screen.getByRole("link", { name: /view my work/i })).toHaveAttribute(
       "href",
-      "https://github.com/rxshellg",
+      "#projects",
     );
     expect(screen.getByRole("link", { name: /get in touch/i })).toHaveAttribute(
       "href",

src/components/ui/ProjectCard.css

@@ -0,0 +1,135 @@
+.project-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--primary);
+  border-radius: 10px;
+  background: #1a0d14;
+  overflow: hidden;
+  height: 100%;
+}
+
+.project-card-window {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  padding: 0.4rem 0.6rem;
+  background: #0d0d0d;
+  border-bottom: 1px solid rgba(242, 119, 165, 0.3);
+}
+
+.project-card-window span {
+  color: var(--primary);
+  font-size: 0.65rem;
+}
+
+.project-card-window span:first-child {
+  transform: translateY(-0.2rem);
+}
+
+.project-card-window span:nth-child(2) {
+  transform: translateY(0.1rem);
+}
+
+.project-card-image {
+  aspect-ratio: 16 / 9;
+  background: #0d0d0d;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(242, 119, 165, 0.3);
+}
+
+.project-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.project-card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1.2rem;
+}
+
+.project-card-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+  color: #fff;
+}
+
+.project-card-description {
+  margin: 0 0 1rem;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.65);
+  flex: 1;
+}
+
+.project-card-stack {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 1rem;
+  padding: 0;
+}
+
+.project-card-pill {
+  font-size: 0.7rem;
+  padding: 0.25rem 0.6rem;
+  border: 1px solid rgba(242, 119, 165, 0.4);
+  border-radius: 4px;
+  color: var(--primary);
+  white-space: nowrap;
+}
+
+.project-card-actions {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.project-card-demo {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: var(--primary);
+  color: #000;
+  font-weight: 700;
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  padding: 0.7rem 1rem;
+  transition: opacity 0.2s;
+}
+
+.project-card-demo:hover {
+  opacity: 0.85;
+}
+
+.project-card-demo--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.project-card-github {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  flex-shrink: 0;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  text-decoration: none;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.project-card-github:hover {
+  background: var(--primary);
+  color: #000;
+}

src/components/ui/ProjectCard.tsx

@@ -0,0 +1,74 @@
+import { FiArrowRight } from "react-icons/fi";
+import { FaGithub } from "react-icons/fa";
+import type { Project } from "../../data/projects";
+import "./ProjectCard.css";
+
+interface ProjectCardProps {
+  project: Project;
+}
+
+function ProjectCard({ project }: ProjectCardProps) {
+  const { title, description, images, techStack, liveDemoUrl, githubUrl } =
+    project;
+
+  return (
+    <article className="project-card">
+      <div className="project-card-window" aria-hidden="true">
+        <span>_</span>
+        <span>□</span>
+        <span>✕</span>
+      </div>
+
+      <div className="project-card-image">
+        <img src={images[0]} alt={`${title} preview`} />
+      </div>
+
+      <div className="project-card-body">
+        <h3 className="project-card-title">{title}</h3>
+        <p className="project-card-description">{description}</p>
+
+        <ul className="project-card-stack">
+          {techStack.map((tech) => (
+            <li className="project-card-pill" key={tech}>
+              {tech}
+            </li>
+          ))}
+        </ul>
+
+        <div className="project-card-actions">
+          {liveDemoUrl ? (
+            <a
+              className="project-card-demo"
+              href={liveDemoUrl}
+              target="_blank"
+              rel="noreferrer"
+            >
+              LIVE DEMO <FiArrowRight aria-hidden="true" />
+            </a>
+          ) : (
+            <span
+              className="project-card-demo project-card-demo--disabled"
+              aria-disabled="true"
+            >
+              LIVE DEMO <FiArrowRight aria-hidden="true" />
+            </span>
+          )}
+
+          {githubUrl && (
+            <a
+              className="project-card-github"
+              href={githubUrl}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={`${title} on GitHub`}
+            >
+              <FaGithub aria-hidden="true" />
+            </a>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default ProjectCard;

src/data/navigation.ts

@@ -1,8 +1,8 @@
 export const navigationLinks = [
   { label: "home", href: "#hero", id: "hero" },
   { label: "About", href: "#about", id: "about" },
-//  { label: "Experience", href: "#experience", id: "experience" },
-//  { label: "Projects", href: "#projects", id: "projects" },
-//  { label: "Skills", href: "#skills", id: "skills" },
-//  { label: "Contact", href: "#contact", id: "contact" },
+  { label: "Projects", href: "#projects", id: "projects" },
+  //  { label: "Skills", href: "#skills", id: "skills" },
+  //  { label: "Experience", href: "#experience", id: "experience" },
+  //  { label: "Contact", href: "#contact", id: "contact" },
 ];

src/data/projects.ts

@@ -0,0 +1,52 @@
+export interface Project {
+  id: string;
+  title: string;
+  description: string;
+  images: string[];
+  techStack: string[];
+  liveDemoUrl?: string;
+  githubUrl?: string;
+  featured: boolean;
+}
+
+export const projects: Project[] = [
+  {
+    id: "allmail",
+    title: "AllMail",
+    description:
+      "Email workspace that brings multiple inboxes into one clean, centralized dashboard.",
+    images: ["/projects/AllMail-1.png"],
+    techStack: ["TypeScript", "Java", "Spring Boot", "OAuth"],
+    liveDemoUrl: "", // TO-DO: post live demo link
+    githubUrl: "https://github.com/rxshellg/all-mail",
+    featured: true,
+  },
+  {
+    id: "treat-rush",
+    title: "Treat Rush",
+    description:
+      "Small arcade-style game where the player controls a cat, catches falling treats, and avoids spray bottles.",
+    images: [
+      "/projects/TreatRush-1.png",
+      "/projects/TreatRush-2.png",
+      "/projects/TreatRush-3.png",
+      "/projects/TreatRush-4.png",
+      "/projects/TreatRush-5.png",
+    ],
+    techStack: ["Java", "libGDX", "Gradle"],
+    liveDemoUrl: "", // TO-DO: post live demo link
+    githubUrl: "https://github.com/rxshellg/treat-rush",
+    featured: true,
+  },
+  {
+    id: "bill-buddy",
+    title: "Bill Buddy",
+    description:
+      "Receipt-splitting app that lets users upload a receipt, assign the items, and calculate each person’s share.",
+    images: ["/projects/BillBuddy-1.png"],
+    techStack: ["TypeScript", "Node.js", "Cloud Vision API"],
+    liveDemoUrl: "", // TO-DO: post live demo link
+    githubUrl: "https://github.com/rxshellg/bill-buddy",
+    featured: true,
+  },
+];

src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/global.css'
 import './styles/layout.css'
+import './styles/shared.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(

src/pages/home/HomePage.tsx

@@ -2,7 +2,7 @@ import AboutSection from "./components/AboutSection";
 // import ContactSection from "./components/ContactSection";
 // import ExperienceSection from "./components/ExperienceSection";
 import HeroSection from "./components/HeroSection";
-// import ProjectsSection from "./components/ProjectsSection";
+import ProjectsSection from "./components/ProjectsSection";
 import SiteLayout from "../../components/layout/SiteLayout";
 // import SkillsSection from "./components/SkillsSection";
 
@@ -13,7 +13,7 @@ function HomePage() {
         <HeroSection />
         <AboutSection />
         {/* <ExperienceSection />    - commented out until built */}
-        {/* <ProjectsSection />      - commented out until built */}
+        <ProjectsSection />
         {/* <SkillsSection />        - commented out until built */}
         {/* <ContactSection />       - commented out until built */}
       </main>

src/pages/home/components/AboutSection.css

@@ -30,19 +30,8 @@
   padding-right: 3rem;
 }
 
-.section-label {
-  margin: 0;
-  color: var(--primary);
-  text-transform: uppercase;
-  font-size: 1.2rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-decoration: underline;
-  text-underline-offset: 0.25rem;
-}
-
 .about-heading {
-  margin: 1.5rem 0 0.3rem;
+  margin: 1.4rem 0 0.3rem;
   font-size: clamp(2.5rem, 4vw, 4.5rem);
   letter-spacing: -0.04em;
   line-height: 1;
@@ -54,7 +43,7 @@
 
 .about-description {
   margin: 0.75rem 0 0;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   line-height: 1.3;
 }
 

src/pages/home/components/HeroSection.css

@@ -121,7 +121,7 @@
   .hero-section {
     display: flex;
     flex-direction: column;
-    height: calc(100svh + var(--navbar-height));
+    height: auto;
     overflow: hidden;
   }
 

src/pages/home/components/HeroSection.tsx

@@ -20,13 +20,7 @@ function HeroSection() {
         </p>
 
         <div className="hero-actions">
-          {/* <a className="hero-button hero-button-primary" href="#projects">
-              -Commented out until built-
-          */}
-          <a
-            className="hero-button hero-button-primary"
-            href="https://github.com/rxshellg"
-          >
+          <a className="hero-button hero-button-primary" href="#projects">
             View my work
             <FiArrowRight aria-hidden="true" />
           </a>