Spaces:

cab566
/

brewer-bio

Running

App Files Files Community

cab566 commited on Jun 24, 2025

Commit

1c35719

verified ·

1 Parent(s): fa004c4

Project Overview Create a personal, semi-professional landing page for Alec Brewer that showcases professional achievements, projects, aspirations, and various content feeds in a clean, minimalist design. The page should function as a central hub for professional identity and creative pursuits. Core Website Sections Hero Section: Name, professional title ("Developer • Creator • Innovator"), brief introduction, and call-to-action buttons About Section: Professional background, skills list with tags, and brief personal description Projects/GitHub Section: Dynamic display of repositories with filtering options by technology (web, mobile, other) Apple Music Section: Embeddable playlist widgets showcasing curated music collections Blog Posts Section: Recent articles with thumbnails, excerpts, and publication dates LinkedIn Updates: Professional posts and career highlights Affiliate Links: Recommended products/tools with proper disclosure Contact Form: Name, email, message fields with form validation Design Specifications Style: Minimalist and clean with ample white space Color Scheme: Primary (#3a86ff), Secondary (#8338ec), Accent (#ff006e), Dark (#1a1a2e), Light (#ffffff) Typography: 'Inter' as primary font with responsive sizing Layout: Container-based with max-width 1200px Components: Card-based UI for projects, blog posts, and other content items Responsive: Fully responsive across all device sizes with strategic breakpoints Visual Elements: Subtle animations on scroll, gradient accents, and interactive hover effects Technical Requirements Frontend Only: Pure HTML, CSS, and vanilla JavaScript (no frameworks) External API Integration: GitHub API, potentially Apple Music API Dynamic Content: JavaScript-loaded content for repositories, playlists, and feed items Interactive Elements: Project filters, mobile navigation toggle, contact form validation Directory Structure: Organized into css/, js/, and images/ subdirectories Performance: Image optimization, lazy loading for media content Notes and Considerations The page should load dynamically to show "loading" states before content appears Include proper disclosure for affiliate links Ensure all external links have proper security attributes (rel="noopener noreferrer") Add features to filter and sort project repositories Consider dark/light mode toggle with local storage for user preference Ensure the design maintains professional appearance while showcasing personality - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +746 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Brewer Bio
-emoji: 🌖
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: brewer-bio
+emoji: 🐳
+colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,746 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alec Brewer | Developer • Creator • Innovator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3a86ff',
+                        secondary: '#8338ec',
+                        accent: '#ff006e',
+                        dark: '#1a1a2e',
+                        light: '#ffffff',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom CSS for elements that can't be done with Tailwind */
+        .gradient-text {
+            background: linear-gradient(90deg, #3a86ff, #8338ec, #ff006e);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .loading-spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid #3a86ff;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Dark mode styles */
+        .dark {
+            background-color: #1a1a2e;
+            color: #ffffff;
+        }
+        .dark .bg-white {
+            background-color: #16213e !important;
+            color: #ffffff !important;
+        }
+        .dark .text-gray-800 {
+            color: #ffffff !important;
+        }
+        .dark .border-gray-200 {
+            border-color: #2d3748 !important;
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50 text-gray-800 transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm sticky top-0 z-50 dark:bg-dark">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <a href="#" class="text-xl font-bold gradient-text">Alec Brewer</a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#about" class="text-gray-700 hover:text-primary transition dark:text-gray-300">About</a>
+                    <a href="#projects" class="text-gray-700 hover:text-primary transition dark:text-gray-300">Projects</a>
+                    <a href="#music" class="text-gray-700 hover:text-primary transition dark:text-gray-300">Music</a>
+                    <a href="#blog" class="text-gray-700 hover:text-primary transition dark:text-gray-300">Blog</a>
+                    <a href="#contact" class="text-gray-700 hover:text-primary transition dark:text-gray-300">Contact</a>
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
+                        <i class="fas fa-moon dark:hidden"></i>
+                        <i class="fas fa-sun hidden dark:block"></i>
+                    </button>
+                </div>
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark shadow-lg">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">About</a>
+                <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">Projects</a>
+                <a href="#music" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">Music</a>
+                <a href="#blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">Blog</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">Contact</a>
+                <button id="theme-toggle-mobile" class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700">
+                    Toggle Dark Mode
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="md:flex items-center justify-between">
+                <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
+                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Alec Brewer</h1>
+                    <h2 class="text-2xl md:text-3xl font-semibold mb-6">Developer • Creator • Innovator</h2>
+                    <p class="text-lg mb-8 opacity-90">Building digital experiences that inspire and solve real-world problems through clean code and thoughtful design.</p>
+                    <div class="flex space-x-4">
+                        <a href="#projects" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition">View Work</a>
+                        <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Get In Touch</a>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center fade-in">
+                    <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
+                        <div class="absolute inset-0 rounded-full border-4 border-white border-opacity-30 animate-ping"></div>
+                        <div class="absolute inset-4 rounded-full border-4 border-white border-opacity-20 animate-ping" style="animation-delay: 0.2s;"></div>
+                        <div class="absolute inset-8 rounded-full border-4 border-white border-opacity-10 animate-ping" style="animation-delay: 0.4s;"></div>
+                        <div class="bg-white w-48 h-48 md:w-60 md:h-60 rounded-full flex items-center justify-center overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="Alec Brewer" class="w-full h-full object-cover">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white dark:bg-dark">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
+            <div class="md:flex items-start space-y-8 md:space-y-0 md:space-x-12">
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-semibold mb-4">Professional Background</h3>
+                    <p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+                        With over 8 years of experience in software development, I've worked with startups and Fortune 500 companies to build scalable, user-friendly applications. My journey began with web development and has since expanded to mobile apps, cloud architecture, and emerging technologies.
+                    </p>
+                    <p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
+                        I'm passionate about creating solutions that bridge the gap between technology and human needs. When I'm not coding, you can find me mentoring junior developers, contributing to open-source projects, or exploring new frameworks and languages.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="flex items-center text-primary hover:text-secondary transition">
+                            <i class="fab fa-linkedin text-xl mr-2"></i>
+                            LinkedIn
+                        </a>
+                        <a href="#" class="flex items-center text-primary hover:text-secondary transition">
+                            <i class="fab fa-github text-xl mr-2"></i>
+                            GitHub
+                        </a>
+                        <a href="#" class="flex items-center text-primary hover:text-secondary transition">
+                            <i class="fas fa-file-alt text-xl mr-2"></i>
+                            Resume
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-semibold mb-4">Skills & Expertise</h3>
+                    <div class="flex flex-wrap gap-3 mb-8">
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">JavaScript</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">TypeScript</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">React</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">Node.js</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">Python</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">AWS</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">Docker</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">GraphQL</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">Swift</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">Kotlin</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">UI/UX Design</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium">CI/CD</span>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-4">Currently Learning</h3>
+                    <div class="flex flex-wrap gap-3">
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium border border-primary">Rust</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium border border-primary">WebAssembly</span>
+                        <span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-full text-sm font-medium border border-primary">Machine Learning</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section id="projects" class="py-20 bg-gray-50 dark:bg-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Projects</h2>
+            <div class="flex justify-center mb-8">
+                <div class="inline-flex rounded-md shadow-sm" role="group">
+                    <button type="button" data-filter="all" class="project-filter px-4 py-2 text-sm font-medium rounded-l-lg bg-primary text-white">
+                        All Projects
+                    </button>
+                    <button type="button" data-filter="web" class="project-filter px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50">
+                        Web
+                    </button>
+                    <button type="button" data-filter="mobile" class="project-filter px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50">
+                        Mobile
+                    </button>
+                    <button type="button" data-filter="other" class="project-filter px-4 py-2 text-sm font-medium rounded-r-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50">
+                        Other
+                    </button>
+                </div>
+            </div>
+            <div id="projects-loading" class="flex justify-center items-center py-20">
+                <div class="loading-spinner"></div>
+            </div>
+            <div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Projects will be loaded here via JavaScript -->
+            </div>
+        </div>
+    </section>
+    <!-- Music Section -->
+    <section id="music" class="py-20 bg-white dark:bg-dark">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Music I Love</h2>
+            <p class="text-center text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-12">
+                Music fuels my creativity. Here are some of my favorite playlists that keep me inspired while coding, designing, and creating.
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-gray-50 dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-accent to-secondary flex items-center justify-center">
+                        <i class="fas fa-music text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Coding Focus</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">Instrumental beats to help you concentrate and enter the flow state.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium flex items-center">
+                            <i class="fab fa-apple mr-2"></i> Listen on Apple Music
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-primary to-accent flex items-center justify-center">
+                        <i class="fas fa-headphones text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Creative Energy</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">Upbeat tracks to spark inspiration during brainstorming sessions.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium flex items-center">
+                            <i class="fab fa-apple mr-2"></i> Listen on Apple Music
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-secondary to-primary flex items-center justify-center">
+                        <i class="fas fa-compact-disc text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Chill Vibes</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">Relaxing melodies for those late-night coding sessions.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium flex items-center">
+                            <i class="fab fa-apple mr-2"></i> Listen on Apple Music
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Blog Section -->
+    <section id="blog" class="py-20 bg-gray-50 dark:bg-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Latest Writings</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                        <i class="fas fa-pen-fancy text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
+                            <span>June 15, 2023</span>
+                            <span class="mx-2">•</span>
+                            <span>5 min read</span>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">The Future of Web Development in 2023</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">Exploring emerging trends and technologies that are shaping the future of web development and how to stay ahead of the curve.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium">Read More →</a>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-accent to-primary flex items-center justify-center">
+                        <i class="fas fa-code text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
+                            <span>May 28, 2023</span>
+                            <span class="mx-2">•</span>
+                            <span>8 min read</span>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Optimizing React Performance</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">Practical techniques and patterns to significantly improve the performance of your React applications.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium">Read More →</a>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover">
+                    <div class="h-48 bg-gradient-to-r from-secondary to-accent flex items-center justify-center">
+                        <i class="fas fa-lightbulb text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
+                            <span>April 10, 2023</span>
+                            <span class="mx-2">•</span>
+                            <span>6 min read</span>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Building a Developer Mindset</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">How to cultivate the problem-solving skills and mental frameworks that make great developers.</p>
+                        <a href="#" class="text-primary hover:text-secondary font-medium">Read More →</a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-flex items-center px-6 py-3 border border-primary text-primary rounded-lg font-medium hover:bg-primary hover:text-white transition">
+                    View All Articles
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Affiliate Section -->
+    <section class="py-20 bg-white dark:bg-dark">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Tools I Recommend</h2>
+            <p class="text-center text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-12">
+                These are products and services I genuinely use and recommend. Some links are affiliate links which means I may earn a commission if you purchase through them (at no extra cost to you).
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-laptop-code text-primary text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">DigitalOcean</h3>
+                    <p class="text-gray-600 dark:text-gray-300 mb-4">Cloud hosting made simple with great developer experience.</p>
+                    <a href="#" class="mt-auto text-primary hover:text-secondary font-medium">Get $100 credit →</a>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-keyboard text-secondary text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">Keychron Keyboards</h3>
+                    <p class="text-gray-600 dark:text-gray-300 mb-4">Mechanical keyboards perfect for developers and writers.</p>
+                    <a href="#" class="mt-auto text-primary hover:text-secondary font-medium">Shop Keyboards →</a>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl shadow-sm flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-accent bg-opacity-10 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-book text-accent text-2xl"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">O'Reilly Learning</h3>
+                    <p class="text-gray-600 dark:text-gray-300 mb-4">The best technical books and video courses for developers.</p>
+                    <a href="#" class="mt-auto text-primary hover:text-secondary font-medium">Start Learning ��</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>
+            <div class="bg-white dark:bg-dark rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto">
+                <div class="md:flex">
+                    <div class="md:w-1/2 bg-primary bg-opacity-10 p-8 md:p-12 flex flex-col justify-center">
+                        <h3 class="text-2xl font-bold mb-4">Let's Connect</h3>
+                        <p class="mb-6 opacity-90">Have a project in mind or want to discuss potential opportunities? Feel free to reach out!</p>
+                        <div class="space-y-4">
+                            <div class="flex items-center">
+                                <i class="fas fa-envelope text-primary mr-4"></i>
+                                <span>alec@example.com</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-map-marker-alt text-primary mr-4"></i>
+                                <span>San Francisco, CA</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-phone-alt text-primary mr-4"></i>
+                                <span>+1 (555) 123-4567</span>
+                            </div>
+                        </div>
+                        <div class="mt-8 flex space-x-4">
+                            <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition">
+                                <i class="fab fa-twitter"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition">
+                                <i class="fab fa-github"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 p-8 md:p-12 dark:bg-gray-800">
+                        <form id="contact-form" class="space-y-6">
+                            <div>
+                                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
+                                <input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition dark:bg-gray-700 dark:border-gray-600">
+                                <p id="name-error" class="mt-1 text-sm text-red-500 hidden">Please enter your name</p>
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                                <input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition dark:bg-gray-700 dark:border-gray-600">
+                                <p id="email-error" class="mt-1 text-sm text-red-500 hidden">Please enter a valid email</p>
+                            </div>
+                            <div>
+                                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
+                                <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition dark:bg-gray-700 dark:border-gray-600"></textarea>
+                                <p id="message-error" class="mt-1 text-sm text-red-500 hidden">Please enter your message</p>
+                            </div>
+                            <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center">
+                                <span id="submit-text">Send Message</span>
+                                <div id="submit-spinner" class="hidden ml-2">
+                                    <div class="loading-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
+                                </div>
+                            </button>
+                        </form>
+                        <div id="form-success" class="hidden mt-4 p-4 bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-100 rounded-lg">
+                            <i class="fas fa-check-circle mr-2"></i> Your message has been sent successfully!
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="md:flex md:items-center md:justify-between">
+                <div class="flex justify-center md:justify-start mb-8 md:mb-0">
+                    <a href="#" class="text-xl font-bold gradient-text">Alec Brewer</a>
+                </div>
+                <div class="flex justify-center md:justify-end space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-linkedin text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mt-8 pt-8 border-t border-gray-800 text-center md:text-left">
+                <p class="text-gray-400 text-sm">
+                    &copy; 2023 Alec Brewer. All rights reserved.
+                </p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeToggleMobile = document.getElementById('theme-toggle-mobile');
+        function toggleTheme() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        }
+        themeToggle.addEventListener('click', toggleTheme);
+        themeToggleMobile.addEventListener('click', toggleTheme);
+        // Check for saved theme preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+        }
+        // Project filtering
+        const projectFilters = document.querySelectorAll('.project-filter');
+        projectFilters.forEach(filter => {
+            filter.addEventListener('click', () => {
+                // Update active state
+                projectFilters.forEach(f => {
+                    if (f === filter) {
+                        f.classList.remove('bg-white', 'dark:bg-gray-800', 'text-gray-700', 'dark:text-gray-300');
+                        f.classList.add('bg-primary', 'text-white');
+                    } else {
+                        f.classList.add('bg-white', 'dark:bg-gray-800', 'text-gray-700', 'dark:text-gray-300');
+                        f.classList.remove('bg-primary', 'text-white');
+                    }
+                });
+                // Filter projects (simulated here, would normally filter real data)
+                const filterValue = filter.getAttribute('data-filter');
+                console.log(`Filtering by: ${filterValue}`);
+            });
+        });
+        // Simulate loading projects from GitHub API
+        setTimeout(() => {
+            const projectsLoading = document.getElementById('projects-loading');
+            const projectsContainer = document.getElementById('projects-container');
+            projectsLoading.classList.add('hidden');
+            // Simulated project data (would normally come from GitHub API)
+            const projects = [
+                {
+                    title: "E-Commerce Platform",
+                    description: "A full-stack e-commerce solution with React, Node.js, and MongoDB.",
+                    tags: ["web", "react", "node"],
+                    stars: 42,
+                    url: "#"
+                },
+                {
+                    title: "Fitness Tracker App",
+                    description: "Mobile application for tracking workouts and nutrition (React Native).",
+                    tags: ["mobile", "react-native"],
+                    stars: 28,
+                    url: "#"
+                },
+                {
+                    title: "Dev Tools CLI",
+                    description: "Command line interface for common developer tasks built with Rust.",
+                    tags: ["other", "rust"],
+                    stars: 15,
+                    url: "#"
+                },
+                {
+                    title: "Portfolio Template",
+                    description: "Open-source portfolio template for developers and designers.",
+                    tags: ["web", "html", "css"],
+                    stars: 76,
+                    url: "#"
+                },
+                {
+                    title: "Weather Dashboard",
+                    description: "Real-time weather dashboard with interactive maps and forecasts.",
+                    tags: ["web", "javascript", "api"],
+                    stars: 33,
+                    url: "#"
+                },
+                {
+                    title: "AI Image Generator",
+                    description: "Web interface for generating AI art with stable diffusion.",
+                    tags: ["web", "python", "ai"],
+                    stars: 91,
+                    url: "#"
+                }
+            ];
+            projects.forEach(project => {
+                const projectCard = document.createElement('div');
+                projectCard.className = `bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md card-hover ${project.tags.includes('web') ? 'web' : ''} ${project.tags.includes('mobile') ? 'mobile' : ''} ${project.tags.includes('other') ? 'other' : ''}`;
+                projectCard.innerHTML = `
+                    <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                        <i class="fas fa-code text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">${project.title}</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">${project.description}</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            ${project.tags.filter(tag => tag !== 'web' && tag !== 'mobile' && tag !== 'other').map(tag =>
+                                `<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-medium">${tag}</span>`
+                            ).join('')}
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center text-gray-500 dark:text-gray-400">
+                                <i class="fas fa-star mr-1"></i>
+                                <span>${project.stars}</span>
+                            </div>
+                            <a href="${project.url}" class="text-primary hover:text-secondary font-medium">View Project →</a>
+                        </div>
+                    </div>
+                `;
+                projectsContainer.appendChild(projectCard);
+            });
+        }, 1500);
+        // Contact form validation
+        const contactForm = document.getElementById('contact-form');
+        const nameInput = document.getElementById('name');
+        const emailInput = document.getElementById('email');
+        const messageInput = document.getElementById('message');
+        const nameError = document.getElementById('name-error');
+        const emailError = document.getElementById('email-error');
+        const messageError = document.getElementById('message-error');
+        const submitText = document.getElementById('submit-text');
+        const submitSpinner = document.getElementById('submit-spinner');
+        const formSuccess = document.getElementById('form-success');
+        contactForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            let isValid = true;
+            // Validate name
+            if (nameInput.value.trim() === '') {
+                nameError.classList.remove('hidden');
+                isValid = false;
+            } else {
+                nameError.classList.add('hidden');
+            }
+            // Validate email
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(emailInput.value.trim())) {
+                emailError.classList.remove('hidden');
+                isValid = false;
+            } else {
+                emailError.classList.add('hidden');
+            }
+            // Validate message
+            if (messageInput.value.trim() === '') {
+                messageError.classList.remove('hidden');
+                isValid = false;
+            } else {
+                messageError.classList.add('hidden');
+            }
+            if (isValid) {
+                // Simulate form submission
+                submitText.classList.add('hidden');
+                submitSpinner.classList.remove('hidden');
+                setTimeout(() => {
+                    submitText.classList.remove('hidden');
+                    submitSpinner.classList.add('hidden');
+                    formSuccess.classList.remove('hidden');
+                    contactForm.reset();
+                    setTimeout(() => {
+                        formSuccess.classList.add('hidden');
+                    }, 5000);
+                }, 1500);
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+        // Scroll animation for sections
+        const observerOptions = {
+            threshold: 0.1
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('fade-in');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('section').forEach(section => {
+            observer.observe(section);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cab566/brewer-bio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>