dlseitz.dev: A Frontend Demonstration

Table of Contents

• dlseitz.dev: A Frontend Demonstration
  • Introduction
    • The Problem
    • The Solution
    • The Vision
• Design & Accessibility
  • Core Principles
  • Color Palette and Typography
  • Responsive Design
  • User Interface
  • Overall User Flow
• Website Structure & Functionality
  • Client-Side Form Processing
  • Key Features
• Key Technology Decisions
  • Eleventy (SSG)
  • Client-Side JavaScript
  • Consistent Page Structure
  • Modular CSS Architecture
• Issues & Lessons Learned
  • Challenges Overcome
  • 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" 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

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 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" and "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," "Demos," and "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, the "benefits" and "services" cards use hover effects to reveal more information about each point. The design also includes a strong call-to-action 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 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 page, which provides more detailed information and the contact form 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

Website Structure & Functionality

Client-Side Form Processing

The contact form on the "About" 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," "Demos," and "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" page and to list services on the "Home" page.
• Contact Form: A detailed and functional contact form is embedded on the "About" 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

Key Technology Decisions

Eleventy (SSG)

The website was built using the Static Site Generator (SSG) Eleventy 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" and "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

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