|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>About Me | CodeCraft Portfolio</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#8B5CF6', |
|
|
secondary: '#06D6A0' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen transition-colors duration-300"> |
|
|
|
|
|
<nav class="fixed w-full bg-gray-900/90 backdrop-blur-lg z-50 border-b border-gray-800"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="index.html" class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">CodeCraft<span class="text-secondary">.dev</span></a> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="hover:text-primary transition-colors">Home</a> |
|
|
<a href="about.html" class="text-primary font-semibold">About</a> |
|
|
<a href="projects.html" class="hover:text-primary transition-colors">Projects</a> |
|
|
<a href="contact.html" class="hover:text-primary transition-colors">Contact</a> |
|
|
</div> |
|
|
<button id="themeToggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="moon" class="hidden"></i> |
|
|
<i data-feather="sun" class="hidden"></i> |
|
|
</button> |
|
|
<button class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="pt-32 pb-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Hello, I'm <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Alex Developer</span></h1> |
|
|
<p class="text-lg text-gray-300 mb-6 leading-relaxed"> |
|
|
A passionate full-stack developer with over 5 years of experience crafting digital solutions |
|
|
that blend creativity with technical excellence. I specialize in transforming complex ideas |
|
|
into elegant, user-friendly applications. |
|
|
</p> |
|
|
<p class="text-lg text-gray-300 mb-8 leading-relaxed"> |
|
|
When I'm not coding, you'll find me exploring new technologies, contributing to open-source |
|
|
projects, or sharing knowledge through technical writing and community workshops. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="projects.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-all">View My Work</a> |
|
|
<a href="contact.html" class="border border-secondary text-secondary hover:bg-secondary/10 px-6 py-3 rounded-lg font-semibold transition-all">Get In Touch</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 transform rotate-3"> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="Profile" class="rounded-xl shadow-2xl transform -rotate-3"> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 -right-4 bg-secondary text-gray-900 px-4 py-2 rounded-lg font-semibold"> |
|
|
Available for freelance |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-800/50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Technical Skills</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="text-center"> |
|
|
</body> |
|
|
</html> |
