Update project data & screenshots, refactor modal components

src/data/projects/api-list.json

@@ -0,0 +1,25 @@
+{
+  "index": 5,
+  "name": "API List",
+  "headline": "Curated Collection of Fun and Free APIs for Learning JavaScript",
+  "long_description": [
+    "The API List is a curated collection of interesting and free APIs designed to help learners practice and enhance their JavaScript skills. It offers a diverse range of APIs across various categories, including AI, art, books, code repositories, food, gaming, government data, health, language, open-source projects, and more.",
+    "Key features include:",
+    "- **Diverse Categories**: Explore APIs in categories such as AI, art, books, code repositories, food, gaming, government data, health, language, open-source projects, and miscellaneous collections.",
+    "- **Free Access**: All listed APIs are free to use, providing ample opportunities for hands-on practice.",
+    "- **Learning Resource**: Ideal for beginners and intermediate learners looking to apply JavaScript in real-world scenarios.",
+    "- **Community Contribution**: Open for contributions, allowing users to add new APIs and share valuable resources with the community."
+  ],
+  "technologies": [
+    "JavaScript",
+    "APIs",
+    "Web Development"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "api-list",
+  "live_url": null,
+  "thumbnail": {
+    "src": "/images/projects/APIList.png",
+    "alt": "API List Project Thumbnail"
+  }
+}

src/data/projects/prework.json

@@ -0,0 +1,29 @@
+{
+  "index": 6,
+  "name": "Prework",
+  "headline": "Foundational Prework for Prospective Vets Who Code Participants",
+  "long_description": [
+    "The Prework project is a meticulously crafted program designed to introduce prospective Vets Who Code (VWC) participants to essential tools, technologies, and fundamental concepts in software engineering. This preparatory course is structured to ensure that learners are well-equipped for the upcoming VWC curriculum.",
+    "Key components of the Prework include:",
+    "- **Command Line Basics**: Understanding the command line interface and its operations.",
+    "- **Code Editor Setup**: Guidance on setting up and utilizing code editors effectively.",
+    "- **HTML & CSS Fundamentals**: Building and styling web pages using HTML and CSS.",
+    "- **JavaScript Introduction**: Writing and integrating JavaScript to enhance web interactivity.",
+    "- **Capstone Project**: A culminating challenge that allows learners to apply their acquired skills in a practical project."
+  ],
+  "technologies": [
+    "Command Line",
+    "Git",
+    "GitHub",
+    "HTML",
+    "CSS",
+    "JavaScript"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "Prework",
+  "live_url": null,
+  "thumbnail": {
+    "src": "/images/projects/Prework.png",
+    "alt": "Prework Project Thumbnail"
+  }
+}

src/data/projects/vets-ai.json

@@ -20,7 +20,7 @@
   "repo": "VetsAI",
   "live_url": null,
   "thumbnail": {
-    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1688176572/command-line_azvdf6.jpg",
+    "src": "/images/projects/VetsAI.png",
     "alt": "VetsAI Project Thumbnail"
   }
 }

src/data/projects/vets-who-code-app.json

@@ -3,9 +3,11 @@
   "name": "Vets Who Code App",
   "headline": "Empowering Veterans Through a Communal Coding Platform",
   "long_description": [
-    "The Vets Who Code App serves as a communal codebase where military veterans and their spouses can enhance their coding skills. This production-grade application is continuously evolving to address the unique needs of the veteran community.",
-    "Built with a modern tech stack, the app offers hands-on experience in web development, enabling users to learn by doing. It provides valuable tools and features that mimic real-world challenges, fostering an environment of growth and learning.",
-    "The project emphasizes collaboration, mentorship, and practical application of coding skills, preparing veterans for successful careers in the tech industry."
+    "The Vets Who Code App is a communal platform built to empower military veterans and their spouses by enhancing their coding skills. This production-grade application evolves continuously to meet the unique needs of the veteran community, providing real-world coding experience.",
+    "Key features of the application include:",
+    "- **Community-Driven Development**: A collaborative codebase that allows contributors to build and refine features, fostering growth and mentorship.",
+    "- **Modern Tech Stack**: Developed with Next.js, TypeScript, and other cutting-edge technologies to deliver a robust and scalable platform.",
+    "- **Practical Learning Environment**: Offers tools and challenges that mimic real-world scenarios, enabling users to learn by doing and preparing them for careers in the tech industry."
   ],
   "technologies": [
     "Next.js",
@@ -21,7 +23,7 @@
   "repo": "vets-who-code-app",
   "live_url": "https://vetswhocode.io/",
   "thumbnail": {
-    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1688176572/command-line_azvdf6.jpg",
+    "src": "/images/projects/VWCApp.png",
     "alt": "Vets Who Code App Thumbnail"
   }
 }

src/data/projects/web-curriculum.json

@@ -24,7 +24,7 @@
   "repo": "web-curriculum",
   "live_url": null,
   "thumbnail": {
-    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1688176572/command-line_azvdf6.jpg",
+    "src": "/images/projects/WebCurriculum.png",
     "alt": "Web Curriculum Thumbnail"
   }
 }

src/data/projects/windows-dev-setup-guide.json

@@ -24,7 +24,7 @@
   "repo": "windows-dev-guide",
   "live_url": null,
   "thumbnail": {
-    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1688176572/command-line_azvdf6.jpg",
+    "src": "/images/projects/WindowsDevGuide.png",
     "alt": "Windows Dev Guide Thumbnail"
   }
 }

src/pages/projects.tsx

@@ -2,14 +2,14 @@ import type { GetStaticProps, NextPage } from "next";
 import SEO from "@components/seo/page-seo";
 import Layout01 from "@layout/layout-01";
 import Breadcrumb from "@components/breadcrumb";
-import { VWCProject } from "@utils/types";
+import { VWCContributor, VWCProject, VWCProjectRepo } from "@utils/types";
 import { VWCGrid } from "@components/vwc-grid";
 import { VWCGridCard } from "@components/vwc-card";
 import * as Dialog from "@radix-ui/react-dialog";
 import { useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { getProjectData } from "../lib/project";
-import { CircleX, Star, CircleDot, Eye, GitFork } from "lucide-react";
+import { Star, CircleDot, Eye, GitFork, XIcon } from "lucide-react";
 import clsx from "clsx";
 import Link from "next/link";
 import MarkdownRenderer from "@components/markdown-renderer";
@@ -30,6 +30,98 @@ const TechStack = ({ techStack }: TechStackProps) => {
     );
 };
 
+interface RepoStatsProps {
+    repo: VWCProjectRepo;
+}
+
+const RepoStats = ({ repo }: RepoStatsProps) => {
+    return (
+        <>
+            {/* Repo stats */}
+            <h4>Statistics</h4>
+            <div className="tw-grid tw-min-w-72 tw-grid-cols-2">
+                {/* Github Stars */}
+                <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
+                    <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
+                        {repo.stargazers_count}
+                    </div>
+                    <div className="tw-flex tw-items-center tw-gap-1">
+                        <Star size={16} strokeWidth={3} />
+                        <div className="tw-mt-1">Stars</div>
+                    </div>
+                </div>
+                {/* Github Issues */}
+                <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
+                    <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
+                        {repo.open_issues_count}
+                    </div>
+                    <div className="tw-flex tw-items-center tw-gap-1">
+                        <CircleDot size={16} strokeWidth={3} />
+                        <div className="tw-mt-1">Issues</div>
+                    </div>
+                </div>
+                {/* Github Watching */}
+                <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
+                    <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
+                        {repo.subscribers_count}
+                    </div>
+                    <div className="tw-flex tw-items-center tw-gap-1">
+                        <Eye size={16} strokeWidth={3} />
+                        <div className="tw-mt-1">Watching</div>
+                    </div>
+                </div>
+                {/* Github Forks */}
+                <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
+                    <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
+                        {repo.forks_count}
+                    </div>
+                    <div className="tw-flex tw-items-center tw-gap-1">
+                        <GitFork size={16} strokeWidth={3} />
+                        <div className="tw-mt-1">Forks</div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+interface TopContributorsProps {
+    contributors: VWCContributor[];
+}
+
+const TopContributors = ({ contributors }: TopContributorsProps) => {
+    return (
+        <>
+            <h4>Top Contributors</h4>
+            <div className="tw-grid-cols-2 tw-space-y-1 tw-text-secondary md:tw-grid-cols-1">
+                {contributors.map((contributor) => {
+                    return (
+                        <Link
+                            href={contributor.html_url}
+                            target="_blank"
+                            className="tw-flex tw-min-w-56 tw-gap-2 tw-rounded-md tw-border-2 tw-border-secondary tw-border-opacity-35 tw-bg-secondary tw-bg-opacity-20 tw-px-2 tw-pt-1 hover:tw-cursor-pointer hover:tw-bg-opacity-100 hover:tw-text-white"
+                        >
+                            <div className="tw-flex-col tw-items-center tw-justify-center">
+                                <img
+                                    className="tw-aspect-square tw-w-8 tw-min-w-8 tw-rounded-full tw-border-2 tw-border-secondary tw-bg-white"
+                                    src={contributor.avatar_url}
+                                    alt={contributor.name}
+                                    draggable="false"
+                                    loading="eager"
+                                />
+                            </div>
+                            <div className="tw-h-fit tw-w-fit tw-flex-col -tw-space-y-2">
+                                <div className="tw-text-md tw-font-medium">{contributor.name}</div>
+                                <div className="tw-text-sm tw-font-light">@{contributor.login}</div>
+                            </div>
+                        </Link>
+                    );
+                })}
+            </div>
+        </>
+    );
+};
+
 interface ProjectModalProps {
     project: VWCProject;
     className?: string;
@@ -55,83 +147,10 @@ const ProjectDetailModal = ({ project, className }: ProjectModalProps) => {
                     src={project.details.thumbnail.src}
                     alt={project.details.thumbnail.alt}
                     draggable="false"
-                    className="tw-w-full md:tw-w-fit"
+                    className="tw-w-full tw-rounded-md tw-drop-shadow-lg"
                 />
-
-                {/* Repo stats */}
-                <h4>Statistics</h4>
-                <div className="tw-grid tw-min-w-72 tw-grid-cols-2">
-                    {/* Github Stars */}
-                    <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
-                        <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
-                            {project.repo.stargazers_count}
-                        </div>
-                        <div className="tw-flex tw-items-center tw-gap-1">
-                            <Star size={16} strokeWidth={3} />
-                            <div className="tw-mt-1">Stars</div>
-                        </div>
-                    </div>
-                    {/* Github Issues */}
-                    <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
-                        <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
-                            {project.repo.open_issues_count}
-                        </div>
-                        <div className="tw-flex tw-items-center tw-gap-1">
-                            <CircleDot size={16} strokeWidth={3} />
-                            <div className="tw-mt-1">Issues</div>
-                        </div>
-                    </div>
-                    {/* Github Watching */}
-                    <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
-                        <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
-                            {project.repo.subscribers_count}
-                        </div>
-                        <div className="tw-flex tw-items-center tw-gap-1">
-                            <Eye size={16} strokeWidth={3} />
-                            <div className="tw-mt-1">Watching</div>
-                        </div>
-                    </div>
-                    {/* Github Forks */}
-                    <div className="tw-flex tw-w-5/12 tw-items-center tw-gap-2 tw-px-1 tw-text-secondary">
-                        <div className="tw-my-1 tw-flex tw-min-w-[32px] tw-items-center tw-justify-center tw-rounded-md tw-bg-secondary tw-px-2 tw-text-sm tw-text-white">
-                            {project.repo.forks_count}
-                        </div>
-                        <div className="tw-flex tw-items-center tw-gap-1">
-                            <GitFork size={16} strokeWidth={3} />
-                            <div className="tw-mt-1">Forks</div>
-                        </div>
-                    </div>
-                </div>
-                <h4>Top Contributors</h4>
-                <div className="tw-grid-cols-2 tw-space-y-1 tw-text-secondary md:tw-grid-cols-1">
-                    {project.repo.contributors.map((contributor) => {
-                        return (
-                            <Link
-                                href={contributor.html_url}
-                                target="_blank"
-                                className="tw-flex tw-min-w-56 tw-gap-2 tw-rounded-md tw-border-2 tw-border-secondary tw-border-opacity-35 tw-bg-secondary tw-bg-opacity-20 tw-px-2 tw-pt-1 hover:tw-cursor-pointer hover:tw-bg-opacity-100 hover:tw-text-white"
-                            >
-                                <div className="tw-flex-col tw-items-center tw-justify-center">
-                                    <img
-                                        className="tw-aspect-square tw-w-8 tw-min-w-8 tw-rounded-full tw-border-2 tw-border-secondary tw-bg-white"
-                                        src={contributor.avatar_url}
-                                        alt={contributor.name}
-                                        draggable="false"
-                                        loading="eager"
-                                    />
-                                </div>
-                                <div className="tw-h-fit tw-w-fit tw-flex-col -tw-space-y-2">
-                                    <div className="tw-text-md tw-font-medium">
-                                        {contributor.name}
-                                    </div>
-                                    <div className="tw-text-sm tw-font-light">
-                                        @{contributor.login}
-                                    </div>
-                                </div>
-                            </Link>
-                        );
-                    })}
-                </div>
+                <RepoStats repo={project.repo} />
+                <TopContributors contributors={project.repo.contributors} />
             </motion.div>
             <div className="tw-m-0 tw-grid tw-w-full tw-grid-cols-1 tw-grid-rows-1 tw-items-center tw-justify-center tw-p-0 md:tw-w-fit">
                 <motion.div
@@ -202,7 +221,7 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
                         <Dialog.Content asChild>
                             <motion.div
                                 key={`${project.details.name}-content`}
-                                className="tw-fixed tw-left-1/2 tw-top-1/2 tw-z-[60] tw-grid tw-max-h-[90vh] tw-w-full tw-items-center tw-justify-center tw-overflow-scroll tw-bg-white tw-p-8 tw-shadow-xl md:tw-w-11/12 md:tw-rounded-3xl lg:tw-w-10/12"
+                                className="tw-fixed tw-left-1/2 tw-top-1/2 tw-z-[60] tw-grid tw-max-h-[90vh] tw-w-full tw-items-center tw-justify-center tw-overflow-scroll tw-bg-white tw-p-8 tw-shadow-xl md:tw-w-11/12 md:tw-rounded-3xl lg:tw-w-10/12 lg:tw-max-w-6xl"
                                 initial={{
                                     opacity: 0,
                                     scale: 0.7,
@@ -223,8 +242,8 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
                                 }}
                                 transition={{ bounce: false, duration: 0.3 }}
                             >
-                                <Dialog.Close className="tw-fixed tw-right-0 tw-top-0 tw-m-4 tw-cursor-pointer md:tw-right-5 md:tw-top-5">
-                                    <CircleX className="tw-text-secondary" />
+                                <Dialog.Close className="tw-fixed tw-right-0 tw-top-0 tw-m-4 tw-cursor-pointer tw-rounded-full tw-bg-white tw-p-1 tw-text-secondary tw-shadow-inner tw-drop-shadow-md hover:tw-bg-secondary hover:tw-text-white md:tw-right-5 md:tw-top-5">
+                                    <XIcon className="tw-p-1" />
                                 </Dialog.Close>
                                 <ProjectDetailModal project={project} />
                             </motion.div>