diff --git a/README.md b/README.md index b8950ba..88c3e13 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,121 @@ -# dereklseitz.github.io -Portfolio website +# [dlseitz.dev](https://dlseitz.dev/): A Frontend Demonstration - \ No newline at end of file +### 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 `
` and `