Hugging Face's logo

Spaces:
Hoof2
/
my-awesome-portfolio
Running

App Files Community
my-awesome-portfolio / index.html
Hoof2's picture
Hoof2
Add 3 files
c77dfe3 verified
raw
history blame contribute delete
37.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Carter | Web Developer</title>
<script src="https://cdn.tailwindcss.com"></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&family=Space+Grotesk:wght@400;500;600;700&display=swap"
rel="stylesheet">
<style>
:root {
--primary: #3b82f6;
--primary-dark: #2563eb;
--secondary: #10b981;
--dark: #1e293b;
--light: #f8fafc;
}
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
background-color: var(--light);
scroll-behavior: smooth;
}
.font-display {
font-family: 'Space Grotesk', sans-serif;
}
.section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.skill-pill {
transition: all 0.3s ease;
}
.skill-pill:hover {
transform: scale(1.05);
background-color: var(--primary-dark);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: var(--primary);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hero-image {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
.project-image {
transition: all 0.5s ease;
}
.project:hover .project-image {
transform: scale(1.03);
}
.contact-input {
transition: all 0.3s ease;
}
.contact-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.btn-primary {
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
transition: all 0.3s ease;
}
.btn-secondary:hover {
background-color: #059669;
transform: translateY(-2px);
}
</style>
</head>
<body class="antialiased">
<header class="fixed w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="#" class="text-2xl font-display font-bold text-blue-500">AC.</a>
<nav class="hidden md:flex space-x-8">
<a href="#about" class="nav-link text-gray-700 hover:text-blue-500">About</a>
<a href="#projects" class="nav-link text-gray-700 hover:text-blue-500">Projects</a>
<a href="#skills" class="nav-link text-gray-700 hover:text-blue-500">Skills</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-500">Contact</a>
</nav>
<button class="md:hidden focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="min-h-screen flex items-center pt-20">
<div class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="text-4xl md:text-6xl font-display font-bold mb-6">
<span class="text-blue-500">Hello,</span> I'm Alex Carter
</h1>
<h2 class="text-2xl md:text-3xl font-medium text-gray-600 mb-8">
A passionate <span class="text-blue-500">Web Developer</span> crafting digital experiences
</h2>
<p class="text-lg text-gray-600 mb-8 max-w-lg">
I turn ideas into elegant, functional websites with clean code and thoughtful design. Let's build something
amazing together.
</p>
<div class="flex space-x-4">
<a href="#projects"
class="btn-primary px-6 py-3 bg-blue-500 text-white rounded-lg font-medium shadow-md">View My Work</a>
<a href="#contact"
class="btn-secondary px-6 py-3 bg-emerald-500 text-white rounded-lg font-medium shadow-md">Get In
Touch</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="hero-image relative">
<div class="w-64 h-64 md:w-80 md:h-80 bg-blue-100 rounded-full overflow-hidden shadow-xl">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#10b981" />
</linearGradient>
</defs>
<path fill="url(#gradient)"
d="M44.6,-59.3C57.1,-52.3,66.2,-38.2,70.7,-22.7C75.2,-7.2,75.1,9.7,67.9,23.3C60.7,36.9,46.4,47.3,31.1,55.3C15.8,63.3,-0.6,68.9,-15.3,64.9C-30.1,60.9,-43.2,47.3,-53.8,32.1C-64.4,16.9,-72.5,0.1,-70.4,-15.6C-68.3,-31.3,-56,-45.9,-40.3,-52.3C-24.6,-58.7,-5.5,-56.9,11.9,-52.7C29.3,-48.5,58.6,-41.9,66.5,-31.1C74.4,-20.3,60.9,-5.3,56.1,10.8C51.3,26.9,55.2,44.1,48.3,53.6C41.4,63.1,23.7,64.9,6.3,66.1C-11.1,67.3,-22.2,67.9,-34.5,62.8C-46.8,57.7,-60.3,46.9,-68.3,32.6C-76.3,18.3,-78.8,0.6,-74.4,-14.8C-70,-30.2,-58.7,-43.3,-45.1,-50.1C-31.5,-56.9,-15.7,-57.4,0.3,-57.9C16.4,-58.4,32.8,-58.9,44.6,-59.3Z"
transform="translate(100 100)" />
</svg>
</div>
<div class="absolute -bottom-6 -right-6 bg-emerald-100 w-24 h-24 rounded-full shadow-lg"></div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-gray-50 section">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-display font-bold text-center mb-16">
<span class="text-blue-500">My</span> Story
</h2>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
<p class="text-lg text-gray-600 mb-6">
I've always been fascinated by how things work. As a kid, I would take apart electronics just to see the
circuits inside. That curiosity led me to programming when I was 15, and I've been hooked ever since.
</p>
<p class="text-lg text-gray-600 mb-6">
After studying Computer Science at Stanford, I worked at several tech startups where I honed my skills in
web development. I love the creative problem-solving that comes with building digital products.
</p>
<p class="text-lg text-gray-600 mb-6">
When I'm not coding, you'll find me hiking in the mountains, reading sci-fi novels, or experimenting with
new cooking recipes. I believe a balanced life makes me a better developer.
</p>
<div class="flex space-x-4 mt-8">
<div class="bg-blue-100 p-4 rounded-lg">
<h3 class="font-display font-bold text-blue-500 mb-2">5+</h3>
<p class="text-gray-600">Years Experience</p>
</div>
<div class="bg-emerald-100 p-4 rounded-lg">
<h3 class="font-display font-bold text-emerald-500 mb-2">40+</h3>
<p class="text-gray-600">Projects Completed</p>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-xl font-display font-bold mb-6 text-gray-800">My Development Philosophy</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Clean Code</h4>
<p class="text-gray-600">I write maintainable, efficient code that stands the test of time.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">User-First Design</h4>
<p class="text-gray-600">Every decision is made with the end-user experience in mind.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Continuous Learning</h4>
<p class="text-gray-600">The tech world evolves fast, and I'm committed to staying ahead.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 section">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-display font-bold text-center mb-4">
<span class="text-blue-500">Featured</span> Projects
</h2>
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
Here are some of my recent projects that showcase my skills and approach to development.
</p>
<div class="grid md:grid-cols-2 gap-12">
<!-- Project 1 -->
<div class="project card bg-white rounded-xl overflow-hidden shadow-lg">
<div class="project-image overflow-hidden">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Project 1" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-display font-bold text-gray-800">EcoTrack</h3>
<span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Full Stack</span>
</div>
<p class="text-gray-600 mb-4">
A sustainability dashboard that helps businesses track and reduce their environmental impact with
real-time analytics.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Node.js</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">MongoDB</span>
</div>
<a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Case Study →</a>
</div>
</div>
<!-- Project 2 -->
<div class="project card bg-white rounded-xl overflow-hidden shadow-lg">
<div class="project-image overflow-hidden">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Project 2" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-display font-bold text-gray-800">Artisan Market</h3>
<span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">E-commerce</span>
</div>
<p class="text-gray-600 mb-4">
An online marketplace connecting local artisans with buyers worldwide, featuring secure payments and
inventory management.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Vue.js</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Firebase</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Stripe API</span>
</div>
<a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Case Study →</a>
</div>
</div>
<!-- Project 3 -->
<div class="project card bg-white rounded-xl overflow-hidden shadow-lg">
<div class="project-image overflow-hidden">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Project 3" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-display font-bold text-gray-800">TeamFlow</h3>
<span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">SaaS</span>
</div>
<p class="text-gray-600 mb-4">
A collaboration platform that enhances team productivity with integrated task management, chat, and
video conferencing.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">TypeScript</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">GraphQL</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">WebRTC</span>
</div>
<a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Case Study →</a>
</div>
</div>
<!-- Project 4 -->
<div class="project card bg-white rounded-xl overflow-hidden shadow-lg">
<div class="project-image overflow-hidden">
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Project 4" class="w-full h-64 object-cover">
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-display font-bold text-gray-800">Mindful</h3>
<span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Mobile App</span>
</div>
<p class="text-gray-600 mb-4">
A mental wellness app offering guided meditations, mood tracking, and personalized recommendations for
stress relief.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React Native</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Redux</span>
<span class="skill-pill bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">AWS Amplify</span>
</div>
<a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Case Study →</a>
</div>
</div>
</div>
<div class="text-center mt-16">
<a href="#"
class="btn-primary inline-block px-8 py-3 bg-blue-500 text-white rounded-lg font-medium shadow-md hover:shadow-lg">
View All Projects
</a>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 bg-gray-50 section">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-display font-bold text-center mb-4">
<span class="text-blue-500">Technical</span> Skills
</h2>
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
I've worked with a variety of technologies across the full stack. Here's what I bring to the table.
</p>
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<!-- Frontend Skills -->
<div class="card bg-white p-6 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-xl font-display font-bold text-gray-800">Frontend</h3>
</div>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-700">React & Vue.js</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-700">JavaScript/TypeScript</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-700">HTML5 & CSS3</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-700">Tailwind CSS</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-700">Responsive Design</span>
</div>
</div>
</div>
<!-- Backend Skills -->
<div class="card bg-white p-6 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<div class="bg-emerald-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
</div>
<h3 class="text-xl font-display font-bold text-gray-800">Backend</h3>
</div>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></div>
<span class="text-gray-700">Node.js & Express</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></div>
<span class="text-gray-700">Python & Django</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></div>
<span class="text-gray-700">RESTful APIs</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></div>
<span class="text-gray-700">GraphQL</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></div>
<span class="text-gray-700">Authentication</span>
</div>
</div>
</div>
<!-- Other Skills -->
<div class="card bg-white p-6 rounded-xl shadow-lg">
<div class="flex items-center mb-6">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<h3 class="text-xl font-display font-bold text-gray-800">Other</h3>
</div>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<span class="text-gray-700">Git & GitHub</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<span class="text-gray-700">Docker</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<span class="text-gray-700">AWS & Firebase</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<span class="text-gray-700">CI/CD Pipelines</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
<span class="text-gray-700">Agile Methodologies</span>
</div>
</div>
</div>
</div>
<div class="mt-16 max-w-4xl mx-auto">
<div class="card bg-gradient-to-r from-blue-500 to-emerald-500 p-8 rounded-xl shadow-lg text-white">
<h3 class="text-2xl font-display font-bold mb-4">Always Learning</h3>
<p class="mb-6">
Technology never stands still, and neither do I. I'm currently diving deeper into WebAssembly and
exploring the possibilities of AI in web development.
</p>
<a href="#" class="inline-block px-6 py-2 bg-white text-blue-500 rounded-lg font-medium hover:bg-gray-100">
See My Learning Path
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 section">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-display font-bold text-center mb-4">
<span class="text-blue-500">Get In</span> Touch
</h2>
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
Have a project in mind or want to chat about web development? I'd love to hear from you!
</p>
<div class="flex flex-col md:flex-row gap-12 max-w-6xl mx-auto">
<div class="md:w-1/2">
<form class="space-y-6">
<div>
<label for="name" class="block text-gray-700 mb-2">Your Name</label>
<input type="text" id="name" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
</div>
<div>
<label for="email" class="block text-gray-700 mb-2">Email Address</label>
<input type="email" id="email" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
</div>
<div>
<label for="subject" class="block text-gray-700 mb-2">Subject</label>
<input type="text" id="subject" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none">
</div>
<div>
<label for="message" class="block text-gray-700 mb-2">Message</label>
<textarea id="message" rows="5" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"></textarea>
</div>
<button type="submit" class="btn-primary w-full px-6 py-3 bg-blue-500 text-white rounded-lg font-medium shadow-md">
Send Message
</button>
</form>
</div>
<div class="md:w-1/2">
<div class="bg-gray-50 p-8 rounded-xl h-full">
<h3 class="text-xl font-display font-bold text-gray-800 mb-6">Contact Information</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Location</h4>
<p class="text-gray-600">San Francisco, CA</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Email</h4>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<h4 class="font-medium text-gray-800 mb-1">Phone</h4>
<p class="text-gray-600">(415) 555-0139</p>
</div>
</div>
</div>
<div class="mt-12">
<h3 class="text-xl font-display font-bold text-gray-800 mb-6">Let's Connect</h3>
<div class="flex space-x-4">
<a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
</svg>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.965.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<a href="#" class="text-2xl font-display font-bold text-white">AC.</a>
<p class="mt-2">Crafting digital experiences with care.</p>
</div>
<div class="flex flex-col items-center md:items-end">
<p>&copy; 2023 Alex Carter. All rights reserved.</p>
<p class="mt-2">Built with ❤️ and clean code.</p>
</div>
</div>
</div>
</footer>
<script>
// Intersection Observer for scroll animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, {
threshold: 0.1
});
document.querySelectorAll('.section').forEach(section => {
observer.observe(section);
});
// Smooth scrolling for navigation 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) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('button.md\\:hidden');
const mobileMenu = document.querySelector('nav.md\\:hidden');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
if (mobileMenu) {
mobileMenu.classList.toggle('hidden');
}
});
}
</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=Hoof2/my-awesome-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>