Frontend Development
Built the site using semantic HTML, reusable CSS patterns, and lightweight JavaScript rather than introducing a framework where one was not necessary.
Engineering Case Study
Kevin Crandall Developer Hub Engineering a professional presence.
A responsive professional website built to bring together software projects, technical experience, engineering case studies, résumé content, and professional contact information in one cohesive destination.
Overview
More than a portfolio page.
The Developer Hub was created as a long-term professional home for my software engineering work. Rather than relying on a single résumé, GitHub profile, or academic portfolio, the site brings those pieces together into one cohesive experience.
The project combines frontend development, responsive design, accessibility, cloud hosting, DNS configuration, custom domains, content strategy, and ongoing software delivery. It is designed to evolve alongside my career rather than remain a static graduation portfolio.
The Problem
Bring multiple professional identities into one place.
My professional work was distributed across GitHub repositories, an academic CS capstone portfolio, a traditional résumé, live applications, and professional networking platforms.
The goal was to create a central destination that could present those resources coherently while still giving each one a clear purpose. The site needed to work equally well for recruiters, hiring managers, engineers, and professional contacts.
My Role
Design, development, infrastructure, and content.
I designed and built the site from the ground up while also managing its hosting, domain configuration, responsive behavior, accessibility, and ongoing content strategy.
Responsive UX
Developed layouts that adapt across desktop, tablet, and mobile devices while preserving readability, navigation, and hierarchy.
Accessibility
Added keyboard-friendly navigation, focus management, ARIA state handling, Escape behavior, and accessible mobile-menu interactions.
Cloud Infrastructure
Configured Azure hosting, custom domains, DNS records, HTTPS, email infrastructure, and deployment workflows supporting the broader professional platform.
Architecture
Keep the site simple while the content grows.
The architecture intentionally favors a lightweight static implementation while allowing project applications and external resources to remain independently deployed.
Presentation
HTML + CSS
Semantic pages, responsive layouts, cards, navigation, and visual system.
Interaction
JavaScript
Mobile navigation, focus management, menus, and small UI behaviors.
Hosting
Azure
Cloud delivery for kevincrandall.dev and associated project services.
Project Ecosystem
GitHub + Live Apps
Source repositories, case studies, applications, and academic work.
Engineering Decisions
Choosing simplicity deliberately.
Static First
The site uses HTML, CSS, and JavaScript directly because its current size does not justify the complexity of a frontend framework or static-site generator.
Reusable Design System
Shared CSS variables, cards, buttons, spacing, typography, navigation, and page structures create consistency across independently authored pages.
Progressive Responsiveness
Desktop layouts progressively collapse into touch-friendly mobile experiences rather than simply shrinking the desktop presentation.
Accessibility by Design
The mobile navigation maintains ARIA state, traps focus while open, supports Escape, restores focus, and collapses nested project navigation appropriately.
Project Evolution
Building the site iteratively.
The Developer Hub began as a simple landing page and gradually expanded as the goals for the site became clearer. Each new section was added in response to a specific need rather than designing an oversized solution upfront.
- Established a reusable visual design system.
- Added About, Projects, Resume, and Contact experiences.
- Integrated live applications and source repositories.
- Introduced engineering case studies for deeper technical context.
- Separated the professional site from the CS capstone portfolio.
- Added responsive layouts across the full site.
- Built an accessible mobile navigation system.
- Added nested mobile navigation for project case studies.
- Standardized page headers, footers, metadata, and navigation.
Challenges & Lessons
A small site still requires engineering decisions.
Consistency
Repeated page components reinforced the importance of maintaining common patterns even when using static HTML without reusable framework components.
Responsive Navigation
Mobile navigation evolved from simple link wrapping into a purpose-built interaction with nested project navigation, focus control, and keyboard support.
Scope Control
The project reinforced that modern tooling should solve an actual problem rather than being introduced simply because it is available.
Content Is Architecture
Organizing projects, case studies, professional history, and academic work required the same attention to hierarchy and user needs as the technical implementation.
Technology
Lightweight frontend. Cloud-hosted delivery.
HTML5
CSS3
JavaScript
Responsive Design
Accessibility
Azure
Git
GitHub
DNS
HTTPS
Custom Domains
VS Code
Explore the Project
You're already using it.
Continue exploring the Developer Hub to see the projects, professional experience, and engineering work the site was designed to bring together.