0% found this document useful (0 votes)

16 views14 pages

1

The document outlines a modern portfolio website for a developer named Alex Carter, featuring sections such as Home, About, Skills, and Projects. It utilizes Tailwind CSS for styling and includes animations for loading screens and content transitions. The site emphasizes Alex's expertise in full-stack development, showcasing skills in various technologies and offering options to view work and contact him.

Uploaded by

Jahin Abrar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

16 views14 pages

1

Uploaded by

Jahin Abrar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 14

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Portfolio | Modern Developer</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>
/* Custom CSS for animations and effects */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.animate-fadeIn {
animation: fadeIn 1s ease-out forwards;
}

.animate-slideUp {
animation: slideUp 0.8s ease-out forwards;
}

.animate-pulse {
animation: pulse 2s infinite;
}

.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0f172a;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-out;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #3b82f6;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.card-hover-effect {
transition: all 0.3s ease;
}

.card-hover-effect:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.nav-link {
position: relative;
}

.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3b82f6;
transition: width 0.3s ease;
}

.nav-link:hover::after {
width: 100%;
}

.section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans antialiased">

<div id="loadingScreen" class="loading-screen">
<div class="loader mb-4"></div>
<h1 class="text-2xl font-bold text-blue-400 animate-pulse">Loading
Portfolio...</h1>
</div>

<div id="mainContent" class="opacity-0">

<nav class="fixed w-full bg-gray-900/80 backdrop-blur-md z-50 border-b
border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold gradient-
text">Portfolio</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#home" class="nav-link px-3 py-2 text-sm font-
medium hover:text-blue-400 transition-colors">Home</a>
<a href="#about" class="nav-link px-3 py-2 text-sm
font-medium hover:text-blue-400 transition-colors">About</a>
<a href="#skills" class="nav-link px-3 py-2 text-sm
font-medium hover:text-blue-400 transition-colors">Skills</a>
<a href="#projects" class="nav-link px-3 py-2 text-sm
font-medium hover:text-blue-400 transition-colors">Projects</a>
<a href="#contact" class="nav-link px-3 py-2 text-sm
font-medium hover:text-blue-400 transition-colors">Contact</a>
</div>
</div>
<div class="md:hidden">
<button id="mobileMenuButton" class="text-gray-400
hover:text-white focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>

<div id="mobileMenu" class="hidden md:hidden bg-gray-800">
<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
hover:text-blue-400 transition-colors">Home</a>
<a href="#about" class="block px-3 py-2 text-base font-medium
hover:text-blue-400 transition-colors">About</a>
<a href="#skills" class="block px-3 py-2 text-base font-medium
hover:text-blue-400 transition-colors">Skills</a>
<a href="#projects" class="block px-3 py-2 text-base font-
medium hover:text-blue-400 transition-colors">Projects</a>
<a href="#contact" class="block px-3 py-2 text-base font-medium
hover:text-blue-400 transition-colors">Contact</a>
</div>
</div>
</nav>

<section id="home" class="section min-h-screen flex items-center justify-
center pt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="animate-slideUp">
<h1 class="text-4xl md:text-6xl font-bold mb-6">
Hi, I'm <span class="gradient-text">Alex Carter</span>
</h1>
<h2 class="text-2xl md:text-3xl font-semibold text-blue-400
mb-6">
Full Stack Developer
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-lg">
I build exceptional digital experiences that are fast,
accessible, and visually appealing.
Let's create something amazing together.
</p>
<div class="flex space-x-4">
<a href="#projects" class="px-6 py-3 bg-blue-600
hover:bg-blue-700 rounded-md font-medium transition-colors">
View My Work
</a>
<a href="#contact" class="px-6 py-3 border border-blue-
400 text-blue-400 hover:bg-blue-400/10 rounded-md font-medium transition-colors">
Contact Me
</a>
</div>
</div>
<div class="animate-slideUp">
<div class="relative w-full max-w-md mx-auto">
<div class="absolute -inset-4 bg-gradient-to-r from-
blue-600 to-purple-600 rounded-full blur opacity-75 animate-pulse"></div>
<div class="relative bg-gray-800 rounded-full overflow-
hidden border-4 border-gray-700">
<img src="https://images.unsplash.com/photo-
1571171637578-41bc2dd41cd2?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=800&q=80"
alt="Developer" class="w-full h-auto object-
cover">
</div>
</div>
</div>
</div>
</div>
</section>

<section id="about" class="section py-20 bg-gray-800/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
<span class="gradient-text">About Me</span>
</h2>
<div class="w-20 h-1 bg-blue-500 mx-auto"></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

<div>
<h3 class="text-2xl font-semibold mb-6">Who I Am</h3>
<p class="text-gray-400 mb-6">
I'm a passionate Full Stack Developer with over 5 years
of experience creating web applications
and digital experiences. I specialize in JavaScript
technologies across the whole stack.
</p>
<p class="text-gray-400 mb-6">
My journey in web development started when I was in
college, and since then I've worked with
startups and established companies to build products
that solve real problems.
</p>
<p class="text-gray-400 mb-8">
When I'm not coding, you can find me hiking, reading
sci-fi novels, or experimenting with
new technologies in my home lab.
</p>
<div class="flex space-x-4">
<a href="#" class="flex items-center px-4 py-2 bg-gray-
700 hover:bg-gray-600 rounded-md transition-colors">
<i class="fas fa-file-pdf mr-2"></i> Download CV
</a>
<a href="#" class="flex items-center px-4 py-2 bg-gray-
700 hover:bg-gray-600 rounded-md transition-colors">
<i class="fab fa-github mr-2"></i> GitHub
</a>
</div>
</div>

<div class="grid grid-cols-2 gap-4">

<div class="bg-gray-800 p-6 rounded-lg card-hover-effect">
<div class="text-blue-400 text-4xl mb-4">
<i class="fas fa-code"></i>
</div>
<h4 class="text-xl font-semibold mb-2">Clean Code</h4>
<p class="text-gray-400 text-sm">
I write maintainable, efficient code following best
practices and design patterns.
</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg card-hover-effect">
<div class="text-purple-400 text-4xl mb-4">
<i class="fas fa-mobile-alt"></i>
</div>
<h4 class="text-xl font-semibold mb-2">Responsive
Design</h4>
<p class="text-gray-400 text-sm">
All my projects work flawlessly on any device, from
mobile to desktop.
</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg card-hover-effect">
<div class="text-green-400 text-4xl mb-4">
<i class="fas fa-rocket"></i>
</div>
<h4 class="text-xl font-semibold mb-2">Performance</h4>
<p class="text-gray-400 text-sm">
Fast loading times and smooth interactions are my
top priorities.
</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg card-hover-effect">
<div class="text-yellow-400 text-4xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h4 class="text-xl font-semibold mb-2">Problem
Solving</h4>
<p class="text-gray-400 text-sm">
I love tackling complex challenges and finding
elegant solutions.
</p>
</div>
</div>
</div>
</div>
</section>

<section id="skills" class="section py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
<span class="gradient-text">My Skills</span>
</h2>
<div class="w-20 h-1 bg-blue-500 mx-auto"></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">

<div>
<h3 class="text-2xl font-semibold mb-6">Technologies I Work
With</h3>
<p class="text-gray-400 mb-8">
I've worked with a variety of technologies in the web
development world.
Here are the ones I'm most proficient in:
</p>

<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm
font-medium">JavaScript/TypeScript</span>
<span class="text-sm text-gray-400">95%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full"
style="width: 95%"></div>
</div>
</div>

<div>
<div class="flex justify-between mb-1">
<span class="text-sm
font-medium">React/Next.js</span>
<span class="text-sm text-gray-400">90%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full"
style="width: 90%"></div>
</div>
</div>

<div>
<div class="flex justify-between mb-1">
<span class="text-sm
font-medium">Node.js/Express</span>
<span class="text-sm text-gray-400">85%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full"
style="width: 85%"></div>
</div>
</div>

<div>
<div class="flex justify-between mb-1">
<span class="text-sm
font-medium">HTML/CSS/Tailwind</span>
<span class="text-sm text-gray-400">92%</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full"
style="width: 92%"></div>
</div>
</div>
</div>
</div>

<div>
<h3 class="text-2xl font-semibold mb-6">Other Skills</h3>

<div class="flex flex-wrap gap-3">

<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">REST APIs</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">GraphQL</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">MongoDB</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">PostgreSQL</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">Docker</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">AWS</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">Git</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">CI/CD</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">Testing</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">Agile</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">UI/UX</span>
<span class="px-4 py-2 bg-gray-800 rounded-full text-
sm">SEO</span>
</div>

<div class="mt-8">
<h4 class="text-xl font-semibold mb-4">Languages</h4>
<div class="flex space-x-8">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-800
flex items-center justify-center mr-3">
<span class="text-xl">🇬🇧</span>
</div>
<div>
<div class="font-medium">English</div>
<div class="text-sm text-gray-
400">Fluent</div>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-800
flex items-center justify-center mr-3">
<span class="text-xl">🇪🇸</span>
</div>
<div>
<div class="font-medium">Spanish</div>
<div class="text-sm text-gray-
400">Intermediate</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="projects" class="section py-20 bg-gray-800/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
<span class="gradient-text">My Projects</span>
</h2>
<div class="w-20 h-1 bg-blue-500 mx-auto"></div>
<p class="text-gray-400 max-w-2xl mx-auto mt-6">
Here are some of my recent projects. Each one was built to
solve a specific problem or explore new technologies.
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="bg-gray-800 rounded-lg overflow-hidden card-hover-
effect">
<div class="h-48 bg-gradient-to-r from-blue-600 to-purple-
600 flex items-center justify-center">
<i class="fas fa-project-diagram text-6xl text-white
opacity-80"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">E-commerce
Platform</h3>
<p class="text-gray-400 text-sm mb-4">
A full-featured online store with payment
integration, inventory management, and admin dashboard.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">React</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Node.js</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">MongoDB</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Stripe</span>
</div>
<div class="flex space-x-3">
<a href="#" class="text-blue-400 hover:text-blue-
300">
<i class="fas fa-external-link-alt"></i> Live
Demo
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github"></i> Code
</a>
</div>
</div>
</div>

<div class="bg-gray-800 rounded-lg overflow-hidden card-hover-
effect">
<div class="h-48 bg-gradient-to-r from-purple-600 to-pink-
600 flex items-center justify-center">
<i class="fas fa-chart-line text-6xl text-white
opacity-80"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Analytics
Dashboard</h3>
<p class="text-gray-400 text-sm mb-4">
Real-time data visualization tool with customizable
widgets and historical data analysis.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Next.js</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">TypeScript</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">D3.js</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">PostgreSQL</span>
</div>
<div class="flex space-x-3">
<a href="#" class="text-blue-400 hover:text-blue-
300">
<i class="fas fa-external-link-alt"></i> Live
Demo
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github"></i> Code
</a>
</div>
</div>
</div>

<div class="bg-gray-800 rounded-lg overflow-hidden card-hover-
effect">
<div class="h-48 bg-gradient-to-r from-pink-600 to-red-600
flex items-center justify-center">
<i class="fas fa-mobile-alt text-6xl text-white
opacity-80"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Fitness App</h3>
<p class="text-gray-400 text-sm mb-4">
Mobile-first workout tracker with exercise library,
progress tracking, and social features.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">React Native</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Firebase</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Redux</span>
<span class="px-2 py-1 bg-gray-700 rounded text-
xs">Expo</span>
</div>
<div class="flex space-x-3">
<a href="#" class="text-blue-400 hover:text-blue-
300">
<i class="fas fa-external-link-alt"></i> App
Store
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github"></i> Code
</a>
</div>
</div>
</div>
</div>

<div class="text-center mt-12">

<a href="#" class="inline-flex items-center px-6 py-3 border
border-blue-400 text-blue-400 hover:bg-blue-400/10 rounded-md font-medium
transition-colors">
<i class="fab fa-github mr-2"></i> View All Projects on
GitHub
</a>
</div>
</div>
</section>

<section id="contact" class="section py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
<span class="gradient-text">Get In Touch</span>
</h2>
<div class="w-20 h-1 bg-blue-500 mx-auto"></div>
<p class="text-gray-400 max-w-2xl mx-auto mt-6">
Have a project in mind or want to discuss potential
opportunities? Feel free to reach out!
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">

<div>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium
mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-
3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2
focus:ring-blue-500">
</div>
<div>
<label for="email" class="block text-sm font-medium
mb-1">Email</label>
<input type="email" id="email" class="w-full px-4
py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2
focus:ring-blue-500">
</div>
<div>
<label for="subject" class="block text-sm font-
medium mb-1">Subject</label>
<input type="text" id="subject" class="w-full px-4
py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2
focus:ring-blue-500">
</div>
<div>
<label for="message" class="block text-sm font-
medium mb-1">Message</label>
<textarea id="message" rows="5" class="w-full px-4
py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2
focus:ring-blue-500"></textarea>
</div>
<button type="submit" class="w-full px-6 py-3 bg-blue-
600 hover:bg-blue-700 rounded-md font-medium transition-colors">
Send Message
</button>
</form>
</div>

<div>
<div class="bg-gray-800 p-8 rounded-lg h-full">
<h3 class="text-xl font-semibold mb-6">Contact
Information</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="text-blue-400 text-xl mr-4 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium">Location</h4>
<p class="text-gray-400">San Francisco,
CA</p>
</div>
</div>

<div class="flex items-start">

<div class="text-purple-400 text-xl mr-4 mt-1">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-medium">Email</h4>
<p class="text-gray-
400">hello@alexcarter.dev</p>
</div>
</div>

<div class="flex items-start">

<div class="text-green-400 text-xl mr-4 mt-1">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-medium">Phone</h4>
<p class="text-gray-400">+1 (555) 123-
4567</p>
</div>
</div>

<div class="flex items-start">

<div class="text-yellow-400 text-xl mr-4 mt-1">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-medium">Availability</h4>
<p class="text-gray-400">Monday - Friday,
9AM - 5PM PST</p>
</div>
</div>
</div>

<div class="mt-8">
<h4 class="font-medium mb-4">Follow Me</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-700
hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700
hover:bg-gray-600 rounded-full flex items-center justify-center transition-colors">
<i class="fab fa-github"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700
hover:bg-blue-400 rounded-full flex items-center justify-center transition-colors">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-700
hover:bg-pink-600 rounded-full flex items-center justify-center transition-colors">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<footer class="bg-gray-800/80 py-12 border-t border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-
center">
<div class="text-2xl font-bold gradient-text mb-4 md:mb-0">Alex
Carter</div>
<div class="text-gray-400 text-sm">
© 2023 All Rights Reserved. Designed & Built by Alex
Carter.
</div>
</div>
</div>
</footer>
</div>

loadingScreen.style.opacity = '0';

setTimeout(function() {
loadingScreen.style.display = 'none';
mainContent.style.opacity = '1';

// Initialize intersection observer for section animations

const sections = document.querySelectorAll('.section');

const observerOptions = {
threshold: 0.1
};

const observer = new IntersectionObserver(function(entries,

observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
}, 500);
}, 1500);

// Mobile menu toggle

const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');

mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});

// 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'
});

// Close mobile menu if open

if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
});
</script>
</body>
</html>

Activity 13
No ratings yet
Activity 13
20 pages
Almas
No ratings yet
Almas
1 page
HML
No ratings yet
HML
9 pages
File 5
No ratings yet
File 5
2 pages
Noman Code
No ratings yet
Noman Code
4 pages
My Portfolio: "En" "UTF-8" "Viewport" "Width Device-Width, Initial-Scale 1"
No ratings yet
My Portfolio: "En" "UTF-8" "Viewport" "Width Device-Width, Initial-Scale 1"
14 pages
Cs304 Blackboc
No ratings yet
Cs304 Blackboc
5 pages
New Text Document
No ratings yet
New Text Document
16 pages
Homepage
No ratings yet
Homepage
5 pages
Document 42
No ratings yet
Document 42
11 pages
Gtfdyhgytfyuh
No ratings yet
Gtfdyhgytfyuh
4 pages
Gdgs
No ratings yet
Gdgs
3 pages
1 HTML
No ratings yet
1 HTML
4 pages
Coding Practice 10 Answers
No ratings yet
Coding Practice 10 Answers
11 pages
Portfolio Code
No ratings yet
Portfolio Code
66 pages
Web Tech 1
No ratings yet
Web Tech 1
7 pages
FSWD
No ratings yet
FSWD
16 pages
Htmlbasiccodeforxstoragewebsite
No ratings yet
Htmlbasiccodeforxstoragewebsite
14 pages
Assessment 2 Web
No ratings yet
Assessment 2 Web
30 pages
Index HTML
No ratings yet
Index HTML
12 pages
Group9 45,53,54,55,57
No ratings yet
Group9 45,53,54,55,57
21 pages
My Website
No ratings yet
My Website
3 pages
New Text Document
No ratings yet
New Text Document
6 pages
Landipagev 2
No ratings yet
Landipagev 2
5 pages
Computer Project Class 12
No ratings yet
Computer Project Class 12
85 pages
Frontend of App
No ratings yet
Frontend of App
7 pages
Laporan UAS P.Web II - Muhammad Achalendra Feroz - 09031282126050 - SI Reg 4B
No ratings yet
Laporan UAS P.Web II - Muhammad Achalendra Feroz - 09031282126050 - SI Reg 4B
27 pages
Rakesh's Web Development Portfolio
No ratings yet
Rakesh's Web Development Portfolio
33 pages
Index
No ratings yet
Index
23 pages
Message
No ratings yet
Message
7 pages
Study Tracker Pro (Ca Students)
No ratings yet
Study Tracker Pro (Ca Students)
11 pages
Sasasasas
No ratings yet
Sasasasas
55 pages
Exp 14
No ratings yet
Exp 14
7 pages
Waiter SRC
No ratings yet
Waiter SRC
19 pages
Interface
No ratings yet
Interface
18 pages
Practical 12
No ratings yet
Practical 12
34 pages
Aisha Nasir - 47
No ratings yet
Aisha Nasir - 47
15 pages
Codsoft
No ratings yet
Codsoft
23 pages
Index
No ratings yet
Index
20 pages
Web Design Style Guide
No ratings yet
Web Design Style Guide
26 pages
Portfolio
No ratings yet
Portfolio
2 pages
Give Your Doc A Title: Double-Click or Double-Tap To Edit
No ratings yet
Give Your Doc A Title: Double-Click or Double-Tap To Edit
21 pages
Web 5 First
No ratings yet
Web 5 First
2 pages
Index
No ratings yet
Index
19 pages
App Code
No ratings yet
App Code
34 pages
Admin Dashboard-Record
No ratings yet
Admin Dashboard-Record
27 pages
Code
No ratings yet
Code
12 pages
Graphics Design Code HTML - 240831 - 155221
No ratings yet
Graphics Design Code HTML - 240831 - 155221
3 pages
TXT
No ratings yet
TXT
23 pages
Portfolio Web Interactif Guide
No ratings yet
Portfolio Web Interactif Guide
16 pages
Create Marketing Hero Section Using HTML and CSS
No ratings yet
Create Marketing Hero Section Using HTML and CSS
6 pages
Prototype CRM
No ratings yet
Prototype CRM
101 pages
Banking Management SystemPages - HTML
No ratings yet
Banking Management SystemPages - HTML
20 pages
Index
No ratings yet
Index
6 pages
Lab Task 6 Ahsan
No ratings yet
Lab Task 6 Ahsan
6 pages
Import React
No ratings yet
Import React
15 pages
Index Page
No ratings yet
Index Page
16 pages
Code
No ratings yet
Code
70 pages
Death's Door Walkthrough Guide
No ratings yet
Death's Door Walkthrough Guide
90 pages
3.3 Schematic Diagram (Gm-8706Zt/Uc)
No ratings yet
3.3 Schematic Diagram (Gm-8706Zt/Uc)
12 pages
Research Skills Test for Students
No ratings yet
Research Skills Test for Students
5 pages
Eia Tia 569 A PDF
100% (1)
Eia Tia 569 A PDF
5 pages
In-House Cash
No ratings yet
In-House Cash
5 pages
Matrices Practice
No ratings yet
Matrices Practice
87 pages
01 Luzon Grid Loepp-11302022
No ratings yet
01 Luzon Grid Loepp-11302022
4 pages
21-6135 Harris County Equity Guidelines
No ratings yet
21-6135 Harris County Equity Guidelines
3 pages
Energy-Efficient Data Center Guide
100% (1)
Energy-Efficient Data Center Guide
48 pages
Tiktok
No ratings yet
Tiktok
4 pages
A Decade of Progress in Wearable Sensors For Fall Detection (2015-2024) : A Network-Based Visualization Review
No ratings yet
A Decade of Progress in Wearable Sensors For Fall Detection (2015-2024) : A Network-Based Visualization Review
19 pages
Infographics 101: JANUARY 2019 Noce Office of Institutional Research & Planning
No ratings yet
Infographics 101: JANUARY 2019 Noce Office of Institutional Research & Planning
18 pages
Pointers I
No ratings yet
Pointers I
33 pages
Manual Telefono C435HD
No ratings yet
Manual Telefono C435HD
115 pages
Reservoir Monitoring Workshop
No ratings yet
Reservoir Monitoring Workshop
4 pages
P 3.1.3 Hierarchical
No ratings yet
P 3.1.3 Hierarchical
30 pages
White Paper Industry 4.0
100% (1)
White Paper Industry 4.0
28 pages
Ingénieurie
No ratings yet
Ingénieurie
31 pages
ML-Based Network Intrusion Detection
No ratings yet
ML-Based Network Intrusion Detection
3 pages
How Do I Use The Options and Help Menus? Before You Start
No ratings yet
How Do I Use The Options and Help Menus? Before You Start
3 pages
A European Urban Atlas
No ratings yet
A European Urban Atlas
54 pages
Engineering Management Insights
No ratings yet
Engineering Management Insights
9 pages
IT-210 Final Project Template
0% (2)
IT-210 Final Project Template
10 pages
Lesson 5 Python For Loops While Loops
No ratings yet
Lesson 5 Python For Loops While Loops
7 pages
Online Discussion Engagement Guide
No ratings yet
Online Discussion Engagement Guide
63 pages
A Three-Phase Inverter For A Standalone Distributed Generation System-Adaptive Voltage Control Design and Stability Analysis - 201403
No ratings yet
A Three-Phase Inverter For A Standalone Distributed Generation System-Adaptive Voltage Control Design and Stability Analysis - 201403
11 pages
Electronic Control Module: Ref No Part Number Part Name Req Remarks
No ratings yet
Electronic Control Module: Ref No Part Number Part Name Req Remarks
1 page
Analysis and Design of Analog Integrated Circuits 5th Edition Paul R. Gray Download
100% (1)
Analysis and Design of Analog Integrated Circuits 5th Edition Paul R. Gray Download
59 pages
Home Assignment # 6: (Heat & Mass Transfer)
No ratings yet
Home Assignment # 6: (Heat & Mass Transfer)
2 pages
Project Management Essentials
No ratings yet
Project Management Essentials
6 pages

1

Uploaded by

1

Uploaded by

<!

<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

<div class="grid grid-cols-2 gap-4">

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">

<div class="flex flex-wrap gap-3">

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="text-center mt-12">

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">

<div class="flex items-start">

<div class="flex items-start">

<div class="flex items-start">

// Initialize intersection observer for section animations

const observer = new IntersectionObserver(function(entries,

// Mobile menu toggle

// Smooth scrolling for navigation links

const targetId = this.getAttribute('href');

// Close mobile menu if open

You might also like