Add additional projects & intro text (#679)

* Add intro text

* Revert class name change in VWCGrid

* Add additional projects

Author: jonulak

src/data/projects/vscode-extension-pack.json

@@ -0,0 +1,26 @@
+{
+  "index": 7,
+  "name": "VS Code Extension Pack",
+  "headline": "Curated VS Code Extensions for Veterans Learning JavaScript",
+  "long_description": [
+    "The Vets Who Code Extension Pack is a thoughtfully curated collection of Visual Studio Code extensions tailored to enhance the learning experience of veterans embarking on their JavaScript development journey. Recognizing the challenges that new developers face in setting up an efficient development environment, this extension pack simplifies the process by providing essential tools in a single, easy-to-install package.",
+    "Key features of the extension pack include:",
+    "- **Comprehensive Toolset**: Integrates a selection of extensions that cover code linting, debugging, version control, and more, ensuring that learners have access to the tools necessary for effective development.",
+    "- **Streamlined Setup**: Eliminates the need for learners to search for and install individual extensions, reducing setup time and allowing them to focus on coding.",
+    "- **Enhanced Learning Experience**: By providing a standardized set of tools, the extension pack fosters a consistent learning environment, enabling veterans to concentrate on mastering JavaScript without the distraction of configuring their development setup."
+  ],
+  "technologies": [
+    "Visual Studio Code",
+    "JavaScript",
+    "ESLint",
+    "Live Server",
+    "GitHub Copilot"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vetswhocode-extension-pack",
+  "live_url": "https://marketplace.visualstudio.com/items?itemName=VetsWhoCode.vetswhocode-extension-pack",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1736209366/projects/vscode-exension-pack_sops0a.png",
+    "alt": "Vets Who Code Extension Pack Thumbnail"
+  }
+}

src/data/projects/vscode-theme.json

@@ -0,0 +1,24 @@
+{
+  "index": 8,
+  "name": "Hashflag VS Code Theme",
+  "headline": "Military-Inspired VS Code Color Theme by Vets Who Code",
+  "long_description": [
+    "The Vets Who Code VS Code Theme, known as 'HashFlag,' is a color theme for Visual Studio Code inspired by military valor and spirit. Developed by Vets Who Code, a non-profit organization dedicated to helping veterans transition into technology careers, this theme offers a patriotic coding experience.",
+    "Key features of the theme include:",
+    "- **Patriotic Palette**: A color scheme featuring navy blues, army greens, and bold accents of red and gold, capturing the essence of military service and the American flag.",
+    "- **Optimized for Readability**: Contrasts designed to reduce eye strain, making it suitable for long coding sessions.",
+    "- **Universal Appeal**: Enhances workflow across various development activities, including debugging and coding."
+  ],
+  "technologies": [
+    "Visual Studio Code",
+    "JSON",
+    "Color Theme Development"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vetswhocode-vs-code-theme",
+  "live_url": "https://marketplace.visualstudio.com/items?itemName=OfficialVetsWhoCode.HashFlag",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/v1736209857/projects/vscode-theme_pkurqi.png",
+    "alt": "Vets Who Code VS Code Theme Thumbnail"
+  }
+}

src/data/projects/vwc-github-page.json

@@ -0,0 +1,26 @@
+{
+  "index": 9,
+  "name": "Engineering SOPs and Field Manual",
+  "headline": "Supplementary Guide for Vets Who Code Engineering Practices",
+  "long_description": [
+    "The Vets Who Code Engineering SOPs and Field Manual serves as a technical and operational guide for the Vets Who Code community. Hosted on GitHub Pages, this platform consolidates best practices, coding standards, and project workflows tailored to support veterans transitioning into software development.",
+    "Key features of the manual include:",
+    "- **Standard Operating Procedures (SOPs)**: Documents standardized workflows, coding practices, and tools to ensure consistency across projects.",
+    "- **Field Manual for Developers**: Provides practical advice, troubleshooting tips, and technical guidelines to navigate common challenges in software development.",
+    "- **Community Focused Content**: Encourages contributions and feedback from the Vets Who Code community, creating a living document that evolves with the organization's needs."
+  ],
+  "technologies": [
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Jekyll",
+    "GitHub Pages"
+  ],
+  "owner": "Vets-Who-Code",
+  "repo": "vets-who-code.github.io",
+  "live_url": "https://vets-who-code.github.io/",
+  "thumbnail": {
+    "src": "https://res.cloudinary.com/vetswhocode/image/upload/f_auto,q_auto/bo_1px_solid_black/v1736209366/projects/Vets_Who_Code_github_page_nrp3bu.png",
+    "alt": "Vets Who Code Engineering SOPs and Field Manual Thumbnail"
+  }
+}

src/pages/projects.tsx

@@ -310,11 +310,22 @@ type PageProps = NextPage<TProps> & {
 };
 
 const Projects: PageProps = ({ projects }: TProps) => {
+    const description = [
+        "Welcome to the Vets Who Code project showcase—a space dedicated to highlighting the exceptional work of our veteran developers.",
+        "Here, you'll find innovative applications, tools, and solutions created by our talented community, demonstrating their technical expertise and commitment to excellence. Each project reflects the dedication, creativity, and skills that veterans bring to the tech industry.",
+        "Explore their work and discover how they are making a meaningful impact through code.",
+    ];
+
     return (
         <>
             <SEO title="Projects" />
             <Breadcrumb pages={[{ path: "/", label: "home" }]} currentPage="Projects" />
             <VWCGrid title="Projects">
+                <div className="tw-col-span-full tw-items-center tw-justify-center tw-text-pretty tw-text-secondary">
+                    {description.map((text) => {
+                        return <p>{text}</p>;
+                    })}
+                </div>
                 {projects.map((project) => (
                     <ProjectCard key={project.details.name} project={project} />
                 ))}