-
+
Jody Holt
@@ -72,13 +78,14 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
{links.map((l) => (
))}
+ {" "}
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
new file mode 100644
index 0000000..829106d
--- /dev/null
+++ b/src/components/Projects.tsx
@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from "react";
+import skymoneycover from "../assets/img/Skymoney-cover-img.jpg";
+import skymoneycoverMobile from "../assets/img/skymoney-mobile-cover-img.jpg";
+import millercover from "../assets/img/500nmain-cover-img.jpg";
+import millercoverMobile from "../assets/img/500nmain-mobile-cover-img.jpg";
+import skymoneyvideo from "../assets/video/Skymoney-video.mp4";
+import skymoneyvideoMobile from "../assets/video/Skymoney-mobile-video.mp4";
+import millervideo from "../assets/video/500nmain-video.mp4";
+import millervideoMobile from "../assets/video/500nmain-mobile-video.mp4";
+
+type Project = {
+ id: string;
+ title: string;
+ description: string;
+ coverImage: string;
+ coverImageMobile: string;
+ video: string;
+ videoMobile: string;
+ techStack: string[];
+ liveUrl?: string;
+ comingSoon?: boolean;
+};
+
+const projects: Project[] = [
+ {
+ id: "skymoney",
+ title: "Skymoney",
+ description:
+ "A budgeting app that simulates your bank account to ensure financial discipline.",
+ coverImage: skymoneycover,
+ coverImageMobile: skymoneycoverMobile,
+ video: skymoneyvideo,
+ videoMobile: skymoneyvideoMobile,
+ techStack: ["React", "TypeScript", "Node.js", "PostgreSQL"],
+ comingSoon: true,
+ },
+ {
+ id: "miller-building",
+ title: "Miller Building Website",
+ description:
+ "A website showcasing the historic Miller Building located in Borger, Texas.",
+ coverImage: millercover,
+ coverImageMobile: millercoverMobile,
+ video: millervideo,
+ videoMobile: millervideoMobile,
+ techStack: ["React", "TypeScript", "Tailwind CSS"],
+ liveUrl: "https://500nmain806.com",
+ },
+];
+
+function VideoModal({
+ isOpen,
+ onClose,
+ video,
+ videoMobile,
+ title,
+}: {
+ isOpen: boolean;
+ onClose: () => void;
+ video: string;
+ videoMobile: string;
+ title: string;
+}) {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkMobile = () => setIsMobile(window.innerWidth < 768);
+ checkMobile();
+ window.addEventListener("resize", checkMobile);
+ return () => window.removeEventListener("resize", checkMobile);
+ }, []);
+
+ if (!isOpen) return null;
+
+ return (
+
+
e.stopPropagation()}
+ >
+
+
{title} Demo
+
+
+
+
+
+
+
+ );
+}
+
+function ProjectCard({
+ project,
+ onPlayVideo,
+}: {
+ project: Project;
+ onPlayVideo: () => void;
+}) {
+ return (
+
+ {/* Cover Image - Desktop */}
+
+
+ {/* Play Button Overlay */}
+
+ {/* Coming Soon Badge */}
+ {project.comingSoon && (
+
+ Coming Soon
+
+ )}
+
+
+ {/* Cover Image - Mobile */}
+
+
+ {/* Play Button Overlay */}
+
+ {/* Coming Soon Badge */}
+ {project.comingSoon && (
+
+ Coming Soon
+
+ )}
+
+
+ {/* Content */}
+
+
{project.title}
+
+ {project.description}
+
+
+ {/* Tech Stack */}
+
+ {project.techStack.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+ {/* Actions */}
+
+
+
+ );
+}
+
+function MoreToComCard() {
+ return (
+
+
+
+
+
+
More to Come
+
+ Exciting projects in development. Stay tuned!
+
+
+
+ );
+}
+
+export function Projects() {
+ const [activeVideo, setActiveVideo] = useState
(null);
+
+ return (
+
+
+
+ Projects
+
+
+ A showcase of my work — from concept to deployment. Click on any
+ project to watch a demo.
+
+
+
+
+ {projects.map((project) => (
+
setActiveVideo(project)}
+ />
+ ))}
+
+
+
+ {/* Video Modal */}
+
setActiveVideo(null)}
+ video={activeVideo?.video || ""}
+ videoMobile={activeVideo?.videoMobile || ""}
+ title={activeVideo?.title || ""}
+ />
+
+ {/* Header */}
+
+
+ {/* Summary */}
+
+
+ {/* Skills */}
+
+ Skills & Strengths
+
+ {skills.map((skill) => (
+
+
{skill.category}
+
+ {skill.items.map((item) => (
+
+ {item}
+
+ ))}
+
+
+ ))}
+
+
+ {/* Accomplishments */}
+
+ Professional Accomplishments
+
+ {accomplishments.map((item, i) => (
+ -
+
+ {item}
+
+ ))}
+
+
+
+ {/* Work History */}
+
+ Work History
+
+ {workHistory.map((job, i) => (
+
+
+
{job.title}
+
+ {job.company} — {job.location}
+
+
+
{job.dates}
+
+ ))}
+
+
+ {/* Education */}
+
+ Education
+
+ {education.map((edu, i) => (
+
+
+
{edu.degree}
+
{edu.school}
+
+
{edu.date}
+
+ ))}
+
+
+ ) : (
+
+ )}
+
+ ))}
+