docs: Create project documentation

README.md

@@ -1,4 +1,121 @@
-# dereklseitz.github.io
+# [dlseitz.dev](https://dlseitz.dev/): A Frontend Demonstration
-Portfolio website
 
-<!--? Because this is a portfolio site, i'm building it from scratch myself a a demonstration in itself of my work (in addition to other demos that will be subdomains linked into the site. How I explained it to somebody else earlier is this: consider this landing page as the front door to my house. I want it to be simply designed, approachable, and easy to absorb. From there, the About and Contact pages will be similar to a foyer or atrium, following a similar style but in more detail by expanding the conversation. My demos, each hosted with their own subdomain will represent the different rooms of the house, where each one is able to have its own vibe, its own personality, its own style and purpose. That is my vision for this portfolio website (perhaps it's ambitious, but I think it's genius). Once this is done, my work shifts from building this house, to finding people to visit it. Direct outreach and cold calling is what that means. I've already planned this out. After I've had a few clients, I'm going to add a testimonials section, sort of like decorating a front porch for the holidays. You know how people love to go drive through neighborhoods around Christmas to look at the lights and decorations? That's what I'm hoping will start to happen as people give me a shot, and I (hopefully) deliver on my promises. Once I've got a better flow going, then I'll add in social media. I've got a lot left to build before I get there. But this is what I have planned, using www.dlseitz.dev as my biggest prop. -->
+### Table of Contents
+
+* [dlseitz.dev: A Frontend Demonstration](#dlseitzdev-a-frontend-demonstration)
+    * [Introduction](#introduction)
+        * [The Problem](#the-problem)
+        * [The Solution](#the-solution)
+        * [The Vision](#the-vision)
+* [Design & Accessibility](#design--accessibility)
+    * [Core Principles](#core-principles)
+    * [Color Palette and Typography](#color-palette-and-typography)
+    * [Responsive Design](#responsive-design)
+    * [User Interface](#user-interface)
+    * [Overall User Flow](#overall-user-flow)
+* [Website Structure & Functionality](#website-structure--functionality)
+    * [Client-Side Form Processing](#client-side-form-processing)
+    * [Key Features](#key-features)
+* [Key Technology Decisions](#key-technology-decisions)
+    * [Eleventy (SSG)](#eleventy-ssg)
+    * [Client-Side JavaScript](#client-side-javascript)
+    * [Consistent Page Structure](#consistent-page-structure)
+    * [Modular CSS Architecture](#modular-css-architecture)
+* [Issues & Lessons Learned](#issues--lessons-learned)
+    * [Challenges Overcome](#challenges-overcome)
+    * [Reflections](#reflections)
+
+---
+
+## Introduction
+
+### The Problem
+
+Navigating a career transition into the IT field directly after college presented a unique set of challenges, particularly when located far from traditional tech hubs. With limited professional experience, the goal was to find a way to proactively bridge the gap between academic knowledge and real-world application, while also creating an asset that could generate income. The central constraint was to achieve this without significant financial investment, demonstrating resourcefulness, business acumen, and a deep understanding of core development principles.
+
+### The Solution
+
+To solve this, I designed and built a full-stack website from the ground up, leveraging an ecosystem of **cost-effective** and **situational resources** to create a proof-of-concept that also serves as a tool for freelance income generation. This dual-purpose solution demonstrates my ability to provide a concrete, results-driven application by understanding and navigating real-world constraints. The core of this project is a commitment to **thoroughness** and **pragmatism**, ensuring that the solution is not only functional and secure but also resilient and maintainable for the long term.
+
+### The Vision
+
+This project is a multi-phased initiative designed to serve as both a public portfolio and a long-term business asset. The website is architected like a house, with the main landing page acting as the front door—designed to be simple and approachable. The ["About"](https://dlseitz.dev/about/) page, which includes a contact form for client engagement, functions as the foyer, inviting further conversation and providing a more detailed introduction of myself. Individual projects and demos are planned as separate "rooms" (subdomains), each with its own style and purpose, demonstrating a breadth of skills. This vision is a strategic roadmap to not only showcase a robust technical foundation but also to build a professional brand based on the values of **accessibility**, **equity**, and **transparency**, and a pipeline for future client work.
+
+[Back to Top](#dlseitz.dev-a-frontend-demonstration)
+---
+
+## Design & Accessibility
+
+### Core Principles
+The website is built with an **accessibility-first ethos**, which is a core professional value of mine. My development process is designed to align with the **Web Content Accessibility Guidelines (WCAG) 2.1 Level AA**, ensuring the site is inclusive and usable for a diverse audience. The site's HTML is structured with semantic tags and includes ARIA attributes where necessary to improve navigation for users with assistive technologies.
+
+### Color Palette and Typography
+The website's visual identity is built on a defined color palette and typography, which ensures a cohesive and professional brand presence. All colors, spacing, and sizing are controlled by CSS custom properties (`--var`) defined in `variables.css`, which are then applied globally via `base.css`. This approach not only ensures a consistent design system but also makes future changes quick and efficient.
+
+### Responsive Design
+The design of the site is fully responsive, ensuring an optimal viewing experience on any device, from a desktop monitor to a mobile phone. This was achieved through the strategic use of flexible layouts, relative units, and media queries. A key example is the [`benefits-visual`](https://dlseitz.dev/#benefits-visual) grid on the home page, which automatically adjusts to a single-column layout on screens smaller than 950px. The use of **CSS variables** also promotes maintainability and consistency across different screen sizes.
+
+### User Interface
+The user interface is designed to be clean, professional, and intuitive. Key UI/UX choices were made to improve the user experience:
+
+* **Interactive Accordions:** Custom JavaScript was implemented to create interactive accordion components on both the ["Home"](https://dlseitz.dev/) and ["About"](https://dlseitz.dev/about/) pages. This allows content to be organized efficiently, preventing the pages from becoming overwhelming with a large amount of text.
+* **Intuitive Navigation:** The main navigation menu provides clear links to key sections like ["About,"](https://dlseitz.dev/about/) ["Demos,"](https://dlseitz.dev/demos/) and ["Contact,"](https://dlseitz.dev/about/#contact) ensuring users can easily find the information they need. CSS hover effects are used to signal clickable buttons, allowing the menu to be both aesthetically simple and elegant.
+* **Visual Cues:** The site uses subtle visual cues to guide the user. On the [home page](https://dlseitz.dev/), the ["benefits"](https://dlseitz.dev/#benefits-visual) and ["services"](https://dlseitz.dev/#services-section) cards use hover effects to reveal more information about each point. The design also includes a strong [call-to-action](https://dlseitz.dev/#cta-section) with clear button styles to direct users to the next step in the client journey.
+
+### Overall User Flow
+The overall design of the site creates a clear and intuitive user flow, guiding potential clients through a strategic journey. The [`Home`](https://dlseitz.dev/) page acts as a point of discovery, introducing the business benefits and services in a scannable format. It then directs the user to the [`About`](https://dlseitz.dev/about/) page, which provides more detailed information and the [contact form](https://dlseitz.dev/about/#contact) to initiate a conversation. This intentional flow from general introduction to specific engagement demonstrates a thoughtful approach to user experience and client conversion.
+
+[Back to Top](#dlseitz.dev-a-frontend-demonstration)
+---
+
+## Website Structure & Functionality
+
+### Client-Side Form Processing
+The contact form on the ["About"](https://dlseitz.dev/about/#contact) page is a key piece of client-facing functionality, with its processing handled entirely on the client side before submission. This approach ensures a smooth user experience and reduces unnecessary server load by preventing malformed requests.
+
+* **Validation:** A JavaScript event listener is attached to the form's submit button to prevent the default form submission. This script then performs a series of validation checks on fields such as first name, last name, organization, email, and phone number. It also ensures the user has completed the hCaptcha and that a hidden honeypot field remains empty, effectively preventing bot submissions.
+* **User Feedback:** The script provides immediate feedback to the user by highlighting invalid fields with a red border and displaying an error message beneath each one, allowing them to correct their input before the form is sent.
+* **Submission:** Once all validation checks pass, the form data is packaged into a JSON object and submitted asynchronously to the backend using the `fetch` API. This allows for a smooth user experience without a page reload.
+
+### Key Features
+The website is a static, multi-page application with several key features that enhance both user experience and business utility.
+
+* **Intuitive Navigation:** The site's navigation is consistently presented across all pages and includes clear links to ["About,"](https://dlseitz.dev/about/) ["Demos,"](https://dlseitz.dev/demos/) and ["Contact"](https://dlseitz.dev/about/#contact). This ensures a predictable and easy-to-use experience for all visitors.
+* **Interactive Accordions:** Custom JavaScript is used to create interactive accordion components that allow for a clean, organized presentation of content. These are used to display professional values on the ["About"](https://dlseitz.dev/about/) page and to list services on the ["Home"](https://dlseitz.dev/) page.
+* **Contact Form:** A detailed and functional contact form is embedded on the ["About"](https://dlseitz.dev/about/#contact) page to facilitate direct client inquiries. The form includes input fields for a user's contact information and a detailed message field, providing a clear path for client engagement.
+
+[Back to Top](#dlseitz.dev-a-frontend-demonstration)
+---
+
+## Key Technology Decisions
+
+### Eleventy (SSG)
+The website was built using the Static Site Generator (SSG) [Eleventy](https://www.11ty.dev/) to directly address the project's core constraints of cost-effectiveness and resourcefulness. Choosing an SSG over a traditional dynamic framework ensures that the site is composed of static HTML, CSS, and JavaScript files, which are inherently more secure and faster to load. This approach eliminates the need for a database or complex server-side processing, resulting in a highly efficient and resilient solution that can be hosted on a variety of low-cost or free platforms.
+
+### Client-Side JavaScript
+The role of JavaScript in this project is to bridge the gap between a static site and a dynamic, interactive experience. Instead of relying on a server to generate content on the fly, custom client-side JavaScript is used to handle all user interactions and enhance functionality.
+
+* **Interactive UI:** JavaScript is used to power the accordion components on the ["Home"](https://dlseitz.dev/) and ["About"](https://dlseitz.dev/about/) pages, allowing for an organized presentation of content without requiring a full page reload.
+* **Form Functionality:** The contact form's functionality is a key example of this approach. JavaScript handles all client-side validation, providing immediate user feedback on required fields and formatting. It also prevents bot submissions through a honeypot field and hCaptcha integration before asynchronously submitting the data via the `fetch` API.
+
+This strategic use of JavaScript demonstrates a pragmatic approach to development—providing a dynamic feel and essential features while maintaining the simplicity and performance benefits of a static site.
+
+### Consistent Page Structure
+To ensure a reliable and predictable user experience, the website utilizes a consistent page structure across all pages. Each page includes a persistent `<header>` and `<footer>` for navigation and social links, with the main content residing within a `<main>` tag. The use of semantic HTML tags like `<main>` and `<section>` also creates a logical document outline, which improves accessibility for users with assistive technologies.
+
+### Modular CSS Architecture
+The site's styles are organized into reusable CSS files, such as `base.css` and `modules.css`, to promote a highly modular architecture. This approach ensures that the visual design is not only consistent but also highly maintainable. By separating global styles from component-specific ones, you can easily update the site's design or add new sections in the future without creating code redundancy or breaking the existing layout.
+
+[Back to Top](#dlseitz.dev-a-frontend-demonstration)
+---
+
+## Issues & Lessons Learned
+
+### Challenges Overcome
+One of the primary challenges was bridging the gap between my formal training in backend-heavy languages (such as Java, Python, and C++) and the frontend development required for this project. With only one Web Design & Development course as a foundation, I had to proactively brush up on modern HTML, CSS, and JavaScript best practices. This involved not only building the core functionality but also ensuring that all interactive components, like the accordion elements and the contact form, are receptive by assistive technologies, fully keyboard-accessible, and provided a seamless experience for all users.
+
+### Reflections
+This project has been a valuable exercise that has given me a deeper understanding of the interplay between design principles and development realities. By approaching the project as an **MVP** (Minimum Viable Product), I was able to deliver a professional-grade product in a compressed timeline. This reinforced a key lesson: the most effective solutions are not always the most complex, but are instead those that are grounded in thoughtful planning, resourcefulness, and pragmatism. The project is a testament to the idea that a growth mindset and a commitment to continuous learning can overcome gaps in formal training. It also provided me an opportunity to practice my belief that transparency—as demonstrated in this documentation—is not a sign of weakness, but an act of integrity that invites constructive criticism and fosters continuous improvement.
+
+[Back to Top](#dlseitz.dev-a-frontend-demonstration)
+---

src/index.njk

@@ -21,7 +21,7 @@ pageScripts:
     <h2>What a Well-Designed Website Can Do</h2>
     <p>There are countless benefits to having a professionally developed website. Some of the most impactful may be in areas where your business struggles the most.</p>
 
-    <div class="benefits-visual">
+    <div id="benefits-visual" class="benefits-visual">
         <div class="benefits-card" id="card-growth">
             <h3>Expand Your Business</h3>
             <div class="hover-list">
@@ -66,7 +66,7 @@ pageScripts:
 </div>
 
 <!-- ↓  Start Services Module  ↓ -->
-<div class="services-section module">
+<divid="services-section" class="services-section module">
     <div class="accordion-container">
         <h2>How I Can Help</h2>
         <p>Click each button below to see ways I can help!</p>
@@ -111,7 +111,7 @@ pageScripts:
 
 
 <!-- ↓  Start CTA Module  ↓ -->
-<div class="cta-section module">
+<div id="cta-section" class="cta-section module">
     <h2 class="inspiration">Perhaps you need a little inspiration...</h2>
     <p><a href="/demos/" class="demos-link" target="_blank"> Explore My Work!</a></p>