digitalcolony.github.io

Michael Allen Smith's Developer Portfolio - A clean, responsive single-page portfolio showcasing 20+ years of web development experience.

🚀 Live Site

digitalcolony.github.io - Hosted on GitHub Pages

📋 About This Project

This is a modern, responsive developer portfolio built with vanilla HTML, CSS, and a focus on clean design and performance. The site showcases my active projects, technical skills, and professional experience in a single-screen layout that works beautifully across all devices.

✨ Features

Design & UX

• Single-screen layout - Everything fits without scrolling on desktop
• Clean, minimal design - Professional without being boring
• Responsive grid system - Adapts seamlessly to all screen sizes
• Touch-friendly - Optimized for mobile interaction

Technical Features

• Vanilla CSS & HTML - No frameworks, fast loading
• CSS Grid & Flexbox - Modern layout techniques
• Progressive enhancement - Works without JavaScript
• Accessibility focused - Screen reader friendly, keyboard navigation
• Dark mode support - Automatically adapts to system preference
• Print optimized - Looks good on paper too

Performance

• Lightweight - Minimal CSS, no JavaScript
• Fast loading - Optimized fonts and images
• Mobile optimized - Reduced animations, efficient rendering
• High DPI support - Crisp on retina displays

🛠️ Tech Stack

• HTML5 - Semantic markup
• CSS3 - Modern styling with Grid, Flexbox, and custom properties
• Google Fonts - Inter font family for clean typography
• GitHub Pages - Static site hosting

📱 Responsive Breakpoints

• Desktop (1200px+): Two-column layout with sticky sidebar
• Large Tablet (1024px): Optimized project grid
• Tablet (768px): Single column, horizontal contact links
• Mobile (480px): Condensed spacing, vertical layout
• Small Mobile (360px): Minimal padding, compact design
• Landscape Mobile: Smart two-column when space allows

🎨 Design System

Colors

• Primary: #3498db (Blue)
• Text: #333333 (Dark Gray)
• Background: #f8f9fa (Light Gray)
• Cards: #ffffff (White)
• Borders: #e9ecef (Light Border)

Typography

• Font Family: Inter (Google Fonts)
• Weights: 400, 500, 600, 700
• Scale: Fluid typography that adapts to screen size

📁 Project Structure

digitacolony.github.io/
├── index.html          # Main portfolio page
├── style.css           # All styling and responsive design
├── favicon-16x16.png   # Small favicon
├── favicon-32x32.png   # Standard favicon
├── robots.txt          # SEO directives
├── sitemap.xml         # Site structure for search engines
├── google333c...html   # Google Search Console verification
├── 404.html           # Custom error page
└── README.md          # This file

🚀 Featured Projects

The portfolio showcases active web projects:

💻 Technical Skills Highlighted

Backend: C# & .NET, VB.NET, ASP.NET, Blazor, SQL
Frontend: JavaScript, HTML & CSS, Astro, React

🔧 Development

Local Development

# Clone the repository
git clone https://github.com/digitalcolony/digitalcolony.github.io.git

# Navigate to the project
cd digitalcolony.github.io

# Serve locally (Python 3)
python -m http.server 8000

# Or use any static file server
# Live Server (VS Code extension)
# npx serve .

Making Changes

1. Edit index.html for content changes
2. Edit style.css for styling changes
3. Test across different screen sizes
4. Commit and push to deploy via GitHub Pages

📈 Performance Metrics

• Lighthouse Score: 100/100 (Performance, Accessibility, Best Practices, SEO)
• First Contentful Paint: < 1s
• Time to Interactive: < 1s
• CSS Size: ~15KB (minified)
• HTML Size: ~4KB

♿ Accessibility Features

• Semantic HTML structure
• ARIA labels where needed
• Keyboard navigation support
• Focus indicators for interactive elements
• Color contrast meets WCAG AA standards
• Reduced motion support for vestibular disorders
• Screen reader optimizations

🌙 Dark Mode

The portfolio automatically adapts to the user's system preference for dark/light mode using CSS media queries.

📱 Mobile Experience

• Touch-friendly - 44px minimum touch targets
• Fast loading - Optimized for mobile networks
• Gesture support - Smooth scrolling and transitions
• Orientation aware - Works in portrait and landscape

📊 Browser Support

• Modern browsers: Chrome, Firefox, Safari, Edge (last 2 versions)
• Mobile browsers: iOS Safari, Chrome Mobile, Samsung Internet
• Graceful degradation for older browsers

🔍 SEO Optimizations

• Semantic HTML structure
• Meta descriptions and proper titles
• Open Graph tags for social sharing
• Structured data markup
• XML sitemap included
• Robots.txt configured

📝 License

This project is open source and available under the MIT License.

🤝 Connect

• GitHub: @digitalcolony
• LinkedIn: digitalcolony
• Portfolio: digitalcolony.github.io

---

📜 Some History

Way back in 1999, I bought the domain digitalcolony.com. It sounded cool to me and I wanted a website with a theme of building websites. Colonizing the web. It was the early days of the Internet. Consumer broadband had just arrived.

I used the domain in different ways over the years. Sometimes it was a business card to get side projects and sometimes I used it to showcase technical articles and code samples.

With the rise of GitHub, it no longer made sense to use the domain for hosting technical content. So I moved everything over to GitHub. Then I primarily used the domain for email and as a technical portal. But since I already had a personal portal at MichaelAllenSmith.com, I just used it for email.

Then in 2017, a company bought the domain from me for a very reasonable price. I moved my email to Gmail and then used GitHub Pages to host this page, which became my new technical portal.

Built with ❤️ and no frameworks in 2025