File size: 9,456 Bytes
2f9a6bd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!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>CodeCanvas Chronicles | Developer Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
}
}
}
}
}
</script>
</head>
<body class="bg-white text-secondary-900 font-sans antialiased">
<custom-navbar></custom-navbar>
<main class="max-w-4xl mx-auto px-6 py-12">
<section class="mb-20">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="flex-1">
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-primary-700">Hi, I'm Alex</h1>
<h2 class="text-2xl md:text-3xl font-semibold mb-6 text-secondary-600">Full Stack Developer & UI Enthusiast</h2>
<p class="text-lg text-secondary-700 mb-8 leading-relaxed">
I build delightful digital experiences with React, Node.js, and thoughtful design. Currently crafting magic at PixelForge.
</p>
<div class="flex gap-4">
<a href="#projects" class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium">
View Projects
</a>
<a href="#contact" class="px-6 py-3 border border-secondary-300 rounded-lg hover:bg-secondary-50 transition-colors font-medium">
Get in Touch
</a>
</div>
</div>
<div class="flex-1">
<img src="http://static.photos/technology/640x360/42" alt="Developer workspace" class="rounded-xl shadow-lg w-full">
</div>
</div>
</section>
<section id="projects" class="mb-20">
<h2 class="text-3xl font-bold mb-8 text-primary-700 border-b pb-2">Featured Projects</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-primary-700">React Dashboard</h3>
<p class="text-secondary-600 mb-4">Interactive analytics dashboard with real-time data visualization</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">React</span>
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">D3.js</span>
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">Node.js</span>
</div>
<a href="#" class="text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<img src="http://static.photos/technology/640x360/2" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-primary-700">E-commerce Platform</h3>
<p class="text-secondary-600 mb-4">Full-featured online store with payment integration</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">Next.js</span>
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">Stripe</span>
<span class="px-3 py-1 bg-secondary-100 text-secondary-800 rounded-full text-sm">MongoDB</span>
</div>
<a href="#" class="text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<section id="writing" class="mb-20">
<h2 class="text-3xl font-bold mb-8 text-primary-700 border-b pb-2">Latest Articles</h2>
<div class="space-y-6">
<article class="border-b border-secondary-200 pb-6">
<h3 class="text-xl font-bold mb-2 text-primary-700 hover:text-primary-800">
<a href="#">The Art of React Component Composition</a>
</h3>
<p class="text-secondary-600 mb-2">Exploring patterns for building flexible and maintainable React components</p>
<div class="flex items-center text-sm text-secondary-500">
<span>May 15, 2023</span>
<span class="mx-2">•</span>
<span>8 min read</span>
</div>
</article>
<article class="border-b border-secondary-200 pb-6">
<h3 class="text-xl font-bold mb-2 text-primary-700 hover:text-primary-800">
<a href="#">CSS Grid vs Flexbox: When to Use Each</a>
</h3>
<p class="text-secondary-600 mb-2">Practical guidelines for choosing the right layout tool for your project</p>
<div class="flex items-center text-sm text-secondary-500">
<span>April 28, 2023</span>
<span class="mx-2">•</span>
<span>6 min read</span>
</div>
</article>
</div>
</section>
<section id="contact" class="mb-20">
<h2 class="text-3xl font-bold mb-8 text-primary-700 border-b pb-2">Get in Touch</h2>
<div class="bg-secondary-50 rounded-xl p-8">
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-secondary-700 mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:ring-primary-500 focus:border-primary-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-secondary-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:ring-primary-500 focus:border-primary-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-secondary-700 mb-1">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"></textarea>
</div>
<button type="submit" class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium">
Send Message
</button>
</form>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |