lucasstahl.com

Overview

A modern, developer-focused personal website showcasing projects, blog posts, and technical resources. Built with a dark mode theme and code-aesthetic design throughout.

Features

Pages

• Homepage: Hero section with featured work, recent articles, and project highlights
• Blog: Curated collection of articles on web development, CMS platforms, AI tools, and developer marketing
• Builds: Portfolio of 20+ projects spanning React, Next.js, TypeScript, and full-stack applications
• About: Professional bio, skills, and contact information
• Gems: Timeline-style resource collection with code-themed presentation

Design System

• Dark Mode Theme: Developer-focused color palette with custom CSS variables
• Typography: Fira Code and Inter fonts for code aesthetic
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Code Styling: Terminal prompts, syntax highlighting, and monospace fonts throughout
• Animations: Smooth transitions, hover effects, and gradient animations

Technical Details

• Pure HTML, CSS, and JavaScript
• Bootstrap 4 for responsive grid
• Font Awesome 6 for icons
• Custom CSS architecture with modular stylesheets
• SEO optimized with Open Graph and Twitter Card meta tags
• Performance optimized with modern web standards

Structure

lucasstahl/
├── index.html              # Homepage
├── blog.html              # Blog feed
├── builds.html            # Project portfolio
├── about.html             # About page
├── gems.html              # Resources timeline
├── assets/
│   ├── css/
│   │   ├── dark-mode.css  # Main theme and global styles
│   │   ├── style.css      # Base styles
│   │   ├── blog.css       # Blog-specific styles
│   │   ├── builds.css     # Portfolio styles
│   │   ├── about.css      # About page styles
│   │   └── gems.css       # Timeline styles with code aesthetic
│   └── images/            # Site images and assets
└── README.md

Design Highlights

Color Palette

• Primary Background: #0a0e27
• Secondary Background: #151932
• Text Primary: #e4e4e7
• Accent Blue: #60a5fa
• Accent Purple: #818cf8
• Code Keyword: #c792ea
• Code String: #c3e88d

Key Components

• Boxed social icons with hover effects
• Timeline layout with vertical markers and line numbers
• Code-style resource titles (let ResourceName = {)
• Comment-style descriptions (// description... };)
• Gradient backgrounds with animated shapes
• Responsive navigation with mobile hamburger menu

Maintenance

This project is actively maintained by Luke Stahl.

License

© 2025 Luke Stahl. All rights reserved.