|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Alex Carter | Undergraduate Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
.delay-1 { animation-delay: 0.2s; } |
|
|
.delay-2 { animation-delay: 0.4s; } |
|
|
.delay-3 { animation-delay: 0.6s; } |
|
|
.delay-4 { animation-delay: 0.8s; } |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background-color: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active-nav::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #3b82f6; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #2563eb; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans text-gray-800"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-md z-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#home" class="text-xl font-bold text-blue-500">Alex Carter</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#about" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">About</a> |
|
|
<a href="#projects" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Projects</a> |
|
|
<a href="#skills" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Skills</a> |
|
|
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-500 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="menu-btn" class="text-gray-700 hover:text-blue-500 focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">About</a> |
|
|
<a href="#projects" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Projects</a> |
|
|
<a href="#skills" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Skills</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-500 hover:bg-gray-100">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-blue-50 to-indigo-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 fade-in"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Hi, I'm <span class="text-blue-500">Alex Carter</span></h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold text-gray-700 mb-6">Computer Science Student</h2> |
|
|
<p class="text-gray-600 mb-8 text-lg">Passionate about building innovative solutions and exploring the intersection of technology and human needs.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#projects" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300">View My Work</a> |
|
|
<a href="#contact" class="border-2 border-blue-500 text-blue-500 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center fade-in delay-1"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" |
|
|
alt="Alex Carter" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12 fade-in">About Me</h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-8"> |
|
|
<div class="md:w-1/3 mb-8 md:mb-0 fade-in delay-1"> |
|
|
<div class="bg-gray-100 p-6 rounded-xl shadow-md h-full"> |
|
|
<h3 class="text-xl font-semibold text-blue-500 mb-4">Education</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Bachelor of Science in Computer Science</h4> |
|
|
<p class="text-gray-600">University of Technology, 2021 - Present</p> |
|
|
<p class="text-gray-600 mt-1">GPA: 3.8/4.0</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Relevant Coursework</h4> |
|
|
<ul class="list-disc list-inside text-gray-600 space-y-1"> |
|
|
<li>Data Structures & Algorithms</li> |
|
|
<li>Database Systems</li> |
|
|
<li>Web Development</li> |
|
|
<li>Machine Learning</li> |
|
|
<li>Software Engineering</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/3 fade-in delay-2"> |
|
|
<div class="bg-gray-100 p-6 rounded-xl shadow-md h-full"> |
|
|
<h3 class="text-xl font-semibold text-blue-500 mb-4">Experience</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Software Development Intern</h4> |
|
|
<p class="text-gray-600">TechSolutions Inc., Summer 2023</p> |
|
|
<ul class="list-disc list-inside text-gray-600 mt-1 space-y-1"> |
|
|
<li>Developed REST APIs for customer portal</li> |
|
|
<li>Implemented automated testing framework</li> |
|
|
<li>Collaborated with cross-functional teams</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Teaching Assistant</h4> |
|
|
<p class="text-gray-600">University of Technology, 2022 - Present</p> |
|
|
<ul class="list-disc list-inside text-gray-600 mt-1 space-y-1"> |
|
|
<li>Assist students with programming concepts</li> |
|
|
<li>Grade assignments and provide feedback</li> |
|
|
<li>Conduct weekly lab sessions</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/3 fade-in delay-3"> |
|
|
<div class="bg-gray-100 p-6 rounded-xl shadow-md h-full"> |
|
|
<h3 class="text-xl font-semibold text-blue-500 mb-4">Personal</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
I'm a passionate computer science student with a strong interest in full-stack development and machine learning. |
|
|
When I'm not coding, you can find me hiking, reading sci-fi novels, or contributing to open-source projects. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<h4 class="font-medium text-gray-800 mb-2">Hobbies & Interests</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Photography</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Chess</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Open Source</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Travel</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">AI Ethics</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">My Projects</h2> |
|
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Here are some of my recent projects that showcase my skills and interests.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-2"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Student Portal</h3> |
|
|
<p class="text-gray-600 mb-4">A comprehensive portal for students to manage courses, assignments, and grades.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">React</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Node.js</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">MongoDB</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-3"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">AI Chatbot</h3> |
|
|
<p class="text-gray-600 mb-4">A conversational AI assistant trained to answer university-related queries.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Python</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">TensorFlow</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">NLP</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover fade-in delay-4"> |
|
|
<div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-cart text-white text-6xl"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">E-commerce Platform</h3> |
|
|
<p class="text-gray-600 mb-4">A full-featured online store with payment integration and admin dashboard.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Vue.js</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Express</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">PostgreSQL</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Stripe API</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> Code</a> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-external-link-alt"></i> Live Demo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12 fade-in delay-4"> |
|
|
<a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-700 font-medium"> |
|
|
View All Projects <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">My Skills</h2> |
|
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Technologies and tools I'm proficient in.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl fade-in delay-2"> |
|
|
<h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center"> |
|
|
<i class="fas fa-code mr-2"></i> Languages |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>JavaScript/TypeScript</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Python</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Java</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>C++</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>SQL</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl fade-in delay-3"> |
|
|
<h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center"> |
|
|
<i class="fas fa-paint-brush mr-2"></i> Frontend |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>React</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Vue.js</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>HTML5/CSS3</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Tailwind CSS</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Redux</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl fade-in delay-4"> |
|
|
<h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center"> |
|
|
<i class="fas fa-server mr-2"></i> Backend |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Node.js</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Express</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Django</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Flask</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>REST APIs</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl fade-in delay-4"> |
|
|
<h3 class="text-lg font-semibold text-blue-500 mb-4 flex items-center"> |
|
|
<i class="fas fa-tools mr-2"></i> Tools & Other |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Git/GitHub</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>Docker</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>PostgreSQL</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>MongoDB</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span>AWS Basics</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 max-w-3xl mx-auto fade-in delay-4"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Proficiency Levels</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">JavaScript/React</span> |
|
|
<span class="text-sm font-medium text-gray-500">90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Python</span> |
|
|
<span class="text-sm font-medium text-gray-500">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Node.js/Express</span> |
|
|
<span class="text-sm font-medium text-gray-500">80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">Database Design</span> |
|
|
<span class="text-sm font-medium text-gray-500">75%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4 fade-in">Get In Touch</h2> |
|
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in delay-1">Feel free to reach out for collaborations or just to say hello!</p> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="md:w-1/2 fade-in delay-2"> |
|
|
<form id="contactForm" class="space-y-6"> |
|
|
<div id="formStatus" class="hidden"></div> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> |
|
|
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 fade-in delay-3"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md h-full"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-envelope text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-500">Email</h4> |
|
|
<a href="mailto:[email protected]" class="text-base text-gray-800 hover:text-blue-500">[email protected]</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-phone-alt text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-500">Phone</h4> |
|
|
<a href="tel:+1234567890" class="text-base text-gray-800 hover:text-blue-500">+1 (234) 567-890</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-map-marker-alt text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-medium text-gray-500">Location</h4> |
|
|
<p class="text-base text-gray-800">San Francisco, CA</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<h4 class="text-sm font-medium text-gray-500 mb-4">Connect with me</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> |
|
|
<i class="fab fa-linkedin-in text-gray-700 hover:text-blue-700"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> |
|
|
<i class="fab fa-github text-gray-700 hover:text-blue-700"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> |
|
|
<i class="fab fa-twitter text-gray-700 hover:text-blue-700"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-100 hover:bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> |
|
|
<i class="fab fa-instagram text-gray-700 hover:text-blue-700"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<a href="#home" class="text-xl font-bold text-white">Alex Carter</a> |
|
|
<p class="text-gray-400 mt-1">Computer Science Student & Developer</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#home" class="text-gray-400 hover:text-white">Home</a> |
|
|
<a href="#about" class="text-gray-400 hover:text-white">About</a> |
|
|
<a href="#projects" class="text-gray-400 hover:text-white">Projects</a> |
|
|
<a href="#contact" class="text-gray-400 hover:text-white">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Alex Carter. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full shadow-lg hidden items-center justify-center"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuBtn = document.getElementById('menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
menuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.classList.remove('active-nav'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (this.classList.contains('nav-link')) { |
|
|
this.classList.add('active-nav'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopBtn = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopBtn.classList.remove('hidden'); |
|
|
backToTopBtn.classList.add('flex'); |
|
|
} else { |
|
|
backToTopBtn.classList.add('hidden'); |
|
|
backToTopBtn.classList.remove('flex'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopBtn.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
|
const navLinks = document.querySelectorAll('.nav-link'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
let current = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
const sectionHeight = section.clientHeight; |
|
|
|
|
|
if (pageYOffset >= sectionTop - 100) { |
|
|
current = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
navLinks.forEach(link => { |
|
|
link.classList.remove('active-nav'); |
|
|
if (link.getAttribute('href') === `#${current}`) { |
|
|
link.classList.add('active-nav'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contactForm'); |
|
|
const formStatus = document.getElementById('formStatus'); |
|
|
|
|
|
if (contactForm) { |
|
|
contactForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const formData = { |
|
|
name: document.getElementById('name').value, |
|
|
email: document.getElementById('email').value, |
|
|
subject: document.getElementById('subject').value, |
|
|
message: document.getElementById('message').value |
|
|
}; |
|
|
|
|
|
|
|
|
formStatus.classList.remove('hidden'); |
|
|
formStatus.textContent = 'Sending message...'; |
|
|
formStatus.className = 'text-blue-500 p-4 rounded-lg bg-blue-50'; |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await fetch('https://your-server.com/send-email', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify({ |
|
|
to: '[email protected]', |
|
|
...formData |
|
|
}) |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (response.ok) { |
|
|
|
|
|
formStatus.textContent = 'Message sent successfully!'; |
|
|
formStatus.className = 'text-green-500 p-4 rounded-lg bg-green-50'; |
|
|
contactForm.reset(); |
|
|
} else { |
|
|
throw new Error(result.message || 'Failed to send message'); |
|
|
} |
|
|
} catch (error) { |
|
|
|
|
|
formStatus.textContent = `Error: ${error.message}`; |
|
|
formStatus.className = 'text-red-500 p-4 rounded-lg bg-red-50'; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
formStatus.classList.add('hidden'); |
|
|
}, 5000); |
|
|
}); |
|
|
} |
|
|
</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=NambAnand/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
