A portfolio website is essential for showcasing your skills, projects, and experience. In this article, we’ll break down the HTML, CSS, and JavaScript of the portfolio website you created, explaining each section with code examples.
📌 1. Project Overview
This portfolio website includes:
✅ A modern navigation bar with smooth scrolling
✅ A hero section with animated text
✅ An about section with a professional introduction
✅ A skills section with progress bars
✅ A projects section showcasing work
✅ A contact section with a form
✅ Smooth animations and interactive UI elements
📌 2. HTML Structure (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | Web Developer</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght
@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Add typed.js for text animation -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-left">
<a href="#home" class="nav-logo">
<span class="logo-text">Port<span class="logo-highlight">
folio</span></span>
</a>
</div>
<div class="nav-right">
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link active">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">
<i class="fas fa-user"></i>
<span>About</span>
</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">
<i class="fas fa-cog"></i>
<span>Skills</span>
</a>
</li>
<li class="nav-item">
<a href="#projects" class="nav-link">
<i class="fas fa-project-diagram"></i>
<span>Projects</span>
</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">
<i class="fas fa-envelope"></i>
<span>Contact</span>
</a>
</li>
</ul>
<div class="nav-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-text">
<span class="welcome-text">👋 Welcome to my portfolio</span>
<h1>Creative <span class="gradient-text">Full Stack</span>
Developer</h1>
<p class="hero-description">I craft beautiful, user-friendly
websites and applications with modern technologies</p>
<div class="hero-buttons">
<a href="#projects" class="cta-button primary">My Work</a>
<a href="#contact" class="cta-button secondary">Let's Talk</a>
</div>
<div class="hero-stats">
<div class="stat-item">
<h3>3+</h3>
<p>Years Experience</p>
</div>
<div class="stat-item">
<h3>50+</h3>
<p>Projects Done</p>
</div>
<div class="stat-item">
<h3>30+</h3>
<p>Happy Clients</p>
</div>
</div>
</div>
<div class="hero-image">
<img src="assets/hero.jpg" alt="Profile Image">
<div class="experience-card">
<span class="card-icon">💻</span>
<p>Full Stack Developer</p>
</div>
<div class="tech-stack-card">
<span class="card-icon">⚡</span>
<p>React | Node.js | MongoDB</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="about-container">
<h2 class="section-title" data-aos="fade-up">About Me</h2>
<div class="about-content">
<div class="about-image" data-aos="fade-right">
<img src="assets/about.jpg" alt="Profile Picture">
<div class="about-shape"></div>
<div class="about-badge">
<span>🟢 Available for Work</span>
</div>
</div>
<div class="about-text" data-aos="fade-left">
<p class="about-description">I'm a passionate Full
Stack Developer with expertise in creating responsive and
user-friendly websites. With a strong foundation in modern
web technologies, I bring ideas to life through clean and
efficient code.</p>
<div class="about-info">
<div class="info-item">
<i class="fas fa-award"></i>
<span class="info-title">Experience</span>
<span class="info-desc">3+ Years</span>
</div>
<div class="info-item">
<i class="fas fa-check-circle"></i>
<span class="info-title">Completed</span>
<span class="info-desc">50+ Projects</span>
</div>
<div class="info-item">
<i class="fas fa-headset"></i>
<span class="info-title">Support</span>
<span class="info-desc">24/7 Online</span>
</div>
</div>
<div class="about-buttons">
<a href="#contact" class="cta-button primary">
<i class="fas fa-paper-plane"></i> Hire Me
</a>
<a href="your-cv.pdf" class="cta-button secondary" download>
<i class="fas fa-download"></i> Download CV
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<div class="skills-container">
<h2 class="section-title">Professional Skills</h2>
<div class="skills-content">
<div class="skills-box">
<h3>Frontend Development</h3>
<div class="skills-group">
<div class="skill-item">
<i class="fab fa-html5"></i>
<div class="skill-info">
<h4>HTML</h4>
<div class="progress-bar">
<div class="progress" style="width: 95%">
<span>95%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-css3-alt"></i>
<div class="skill-info">
<h4>CSS</h4>
<div class="progress-bar">
<div class="progress" style="width: 90%">
<span>90%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-js"></i>
<div class="skill-info">
<h4>JavaScript</h4>
<div class="progress-bar">
<div class="progress" style="width: 85%">
<span>85%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-react"></i>
<div class="skill-info">
<h4>React</h4>
<div class="progress-bar">
<div class="progress" style="width: 80%">
<span>80%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="skills-box">
<h3>Backend Development</h3>
<div class="skills-group">
<div class="skill-item">
<i class="fab fa-node-js"></i>
<div class="skill-info">
<h4>Node.js</h4>
<div class="progress-bar">
<div class="progress" style="width: 85%">
<span>85%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fas fa-database"></i>
<div class="skill-info">
<h4>MongoDB</h4>
<div class="progress-bar">
<div class="progress" style="width: 80%">
<span>80%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fas fa-server"></i>
<div class="skill-info">
<h4>Express.js</h4>
<div class="progress-bar">
<div class="progress" style="width: 85%">
<span>85%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fas fa-database"></i>
<div class="skill-info">
<h4>SQL</h4>
<div class="progress-bar">
<div class="progress" style="width: 75%">
<span>75%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="skills-box">
<h3>Tools & Technologies</h3>
<div class="skills-group">
<div class="skill-item">
<i class="fab fa-git-alt"></i>
<div class="skill-info">
<h4>Git</h4>
<div class="progress-bar">
<div class="progress" style="width: 90%">
<span>90%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-aws"></i>
<div class="skill-info">
<h4>AWS</h4>
<div class="progress-bar">
<div class="progress" style="width: 70%">
<span>70%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fab fa-docker"></i>
<div class="skill-info">
<h4>Docker</h4>
<div class="progress-bar">
<div class="progress" style="width: 75%">
<span>75%</span>
</div>
</div>
</div>
</div>
<div class="skill-item">
<i class="fas fa-mobile-alt"></i>
<div class="skill-info">
<h4>React Native</h4>
<div class="progress-bar">
<div class="progress" style="width: 80%">
<span>80%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-container">
<!-- Project 1 -->
<div class="project-item">
<div class="project-left">
<span class="project-number">01</span>
<div class="project-content">
<h3>E-Learning Platform</h3>
<p>A comprehensive online learning platform with live
classes, course management, and interactive quizzes.
Features include video streaming, real-time chat, and
progress tracking.</p>
<div class="project-tech-stack">
<span>React.js</span>
<span>Node.js</span>
<span>MongoDB</span>
<span>WebRTC</span>
<span>Socket.io</span>
</div>
<div class="project-links">
<a href="#" class="link-with-icon">
<i class="fas fa-external-link-alt"></i>
Live Preview
</a>
<a href="#" class="link-with-icon">
<i class="fab fa-github"></i>
Source Code
</a>
</div>
</div>
</div>
<div class="project-right">
<div class="project-image">
<img src="assets/elerning.avif" alt="E-Learning Platform">
<div class="project-overlay"></div>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-item reverse">
<div class="project-left">
<span class="project-number">02</span>
<div class="project-content">
<h3>Real Estate Platform</h3>
<p>A modern real estate platform with virtual tours,
advanced property search, and agent dashboard. Includes
map integration and automated property
recommendations.</p>
<div class="project-tech-stack">
<span>Next.js</span>
<span>Express</span>
<span>PostgreSQL</span>
<span>Google Maps API</span>
</div>
<div class="project-links">
<a href="#" class="link-with-icon">
<i class="fas fa-external-link-alt"></i>
Live Preview
</a>
<a href="#" class="link-with-icon">
<i class="fab fa-github"></i>
Source Code
</a>
</div>
</div>
</div>
<div class="project-right">
<div class="project-image">
<img src="assets/real state.jpg" alt="Real Estate Platform">
<div class="project-overlay"></div>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-item">
<div class="project-left">
<span class="project-number">03</span>
<div class="project-content">
<h3>Social Media Dashboard</h3>
<p>A responsive dashboard that aggregates social media
metrics using React and Chart.js. Includes real-time data
updates and customizable widgets.</p>
<div class="project-tech-stack">
<span>React</span>
<span>Chart.js</span>
<span>Firebase</span>
<span>Material-UI</span>
</div>
<div class="project-links">
<a href="#" class="link-with-icon">
<i class="fas fa-external-link-alt"></i>
Live Preview
</a>
<a href="#" class="link-with-icon">
<i class="fab fa-github"></i>
Source Code
</a>
</div>
</div>
</div>
<div class="project-right">
<div class="project-image">
<img src="assets/social.jpg" alt="Social Media Dashboard">
<div class="project-overlay"></div>
</div>
</div>
</div>
<!-- Project 4 -->
<div class="project-item reverse">
<div class="project-left">
<span class="project-number">04</span>
<div class="project-content">
<h3>Task Management App</h3>
<p>A collaborative task management application with real-time
updates, drag-and-drop functionality, and team
collaboration features.</p>
<div class="project-tech-stack">
<span>Vue.js</span>
<span>Express</span>
<span>Socket.io</span>
<span>PostgreSQL</span>
</div>
<div class="project-links">
<a href="#" class="link-with-icon">
<i class="fas fa-external-link-alt"></i>
Live Preview
</a>
<a href="#" class="link-with-icon">
<i class="fab fa-github"></i>
Source Code
</a>
</div>
</div>
</div>
<div class="project-right">
<div class="project-image">
<img src="assets/task.jpg" alt="Task Management App">
<div class="project-overlay"></div>
</div>
</div>
</div>
<!-- Project 5 -->
<div class="project-item">
<div class="project-left">
<span class="project-number">05</span>
<div class="project-content">
<h3>AI Chat Application</h3>
<p>An AI-powered chat application that uses natural language
processing to provide intelligent responses. Features include
voice recognition and multi-language support.</p>
<div class="project-tech-stack">
<span>Python</span>
<span>TensorFlow</span>
<span>WebSocket</span>
<span>React</span>
</div>
<div class="project-links">
<a href="#" class="link-with-icon">
<i class="fas fa-external-link-alt"></i>
Live Preview
</a>
<a href="#" class="link-with-icon">
<i class="fab fa-github"></i>
Source Code
</a>
</div>
</div>
</div>
<div class="project-right">
<div class="project-image">
<img src="assets/ai.jpg" alt="AI Chat Application">
<div class="project-overlay"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="contact-wrapper">
<div class="contact-left">
<h2 class="section-title">Let's Work Together</h2>
<p class="contact-description">I'm always open to discussing new
projects, creative ideas or opportunities to be part of your
visions.</p>
<div class="contact-methods">
<div class="contact-method">
<div class="method-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="method-details">
<h3>Location</h3>
<p>Jharkhand, India</p>
</div>
</div>
<div class="contact-method">
<div class="method-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="method-details">
<h3>Mail</h3>
<p>codewithpanda28@gmail.com</p>
</div>
</div>
<div class="contact-method">
<div class="method-icon">
<i class="fas fa-phone"></i>
</div>
<div class="method-details">
<h3>Phone</h3>
<p>+91 8252472186</p>
</div>
</div>
</div>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-github">
</i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin">
</i></a>
<a href="#" class="social-link"><i class="fab fa-twitter">
</i></a>
<a href="#" class="social-link"><i class="fab fa-instagram">
</i></a>
</div>
</div>
<div class="contact-right">
<div class="contact-form-wrapper">
<form class="contact-form">
<div class="input-row">
<div class="input-group">
<label>Your Name</label>
<input type="text" placeholder="John Doe" required>
</div>
<div class="input-group">
<label>Your Email</label>
<input type="email" placeholder="codewithpanda28
@gmail.com" required>
</div>
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" placeholder="Project Discussion"
required>
</div>
<div class="input-group">
<label>Message</label>
<textarea placeholder="Write your message here..."
required></textarea>
</div>
<button type="submit" class="submit-btn">
Send Message
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<div class="footer-content">
<div class="footer-section">
<h3 class="footer-title">Let's Connect</h3>
<p class="footer-description">Feel free to reach out for
collaborations or just a friendly hello</p>
<div class="footer-social">
<a href="#" class="social-icon"><i class="fab fa-github">
</i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin">
</i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter">
</i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram">
</i></a>
</div>
</div>
<div class="footer-section">
<h3 class="footer-title">Quick Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-title">Contact Info</h3>
<div class="footer-contact">
<p><i class="fas fa-envelope"></i> codewithpanda28@gmail.
com</p>
<p><i class="fas fa-phone"></i> +91 8252472186</p>
<p><i class="fas fa-map-marker-alt"></i> Jharkhand, India</p>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="footer-copyright">
<p>© 2025 NexCodeUI. All rights reserved.</p>
</div>
<div class="footer-extra">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
📌 3. CSS Styling (styles.css)
The CSS file defines styles, animations, and responsiveness.
:root { --primary-color: #2563eb; --secondary-color: #3b82f6; --accent-color: #60a5fa; --text-primary: #1f2937; --text-secondary: #4b5563; --background-light: #f8fafc; --white: #ffffff; --gradient: linear-gradient(135deg, #2563eb, #60a5fa);}
/* Reset and Base Styles */* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--background-light);}
/* Navigation starts */.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
.nav-container { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center;}
.nav-left { display: flex; align-items: center;}
.nav-logo { text-decoration: none; display: flex; align-items: center; gap: 0.5rem;}
.logo-text { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px;}
.logo-highlight { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.nav-right { display: flex; align-items: center;}
.nav-menu { display: flex; gap: 2rem; list-style: none;}
.nav-item { position: relative;}
.nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: all 0.3s ease; border-radius: 8px;}
.nav-link i { font-size: 1.1rem;}
.nav-link:hover,.nav-link.active { color: var(--primary-color); background: rgba(37, 99, 235, 0.1);}
.nav-link::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gradient); transition: width 0.3s ease;}
.nav-link:hover::before,.nav-link.active::before { width: 80%;}
.nav-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; padding: 0.5rem;}
.nav-toggle span { display: block; width: 25px; height: 2px; background: var(--text-primary); transition: all 0.3s ease;}
/* Mobile Navigation */@media (max-width: 768px) { .nav-menu { position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px); background: var(--white); flex-direction: column; align-items: center; padding: 2rem; gap: 2rem; transition: 0.3s ease; }
.nav-menu.active { left: 0; }
.nav-toggle { display: flex; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
.nav-link { font-size: 1.1rem; padding: 1rem 2rem; width: 100%; text-align: center; justify-content: center; }}
/* Scrolled Navbar */.navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
/* Navigation ends */
/* Hero Section starts */.hero { padding: 8rem 5% 5rem; min-height: 100vh; background: var(--white);}
.hero-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;}
.welcome-text { display: inline-block; padding: 0.5rem 1rem; background: rgba(37, 99, 235, 0.1); color: var(--primary-color); border-radius: 50px; font-size: 0.9rem; margin-bottom: 1.5rem;}
.hero-text h1 { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem;}
.gradient-text { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hero-description { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 500px;}
.hero-buttons { display: flex; gap: 1rem; margin-bottom: 3rem;}
.cta-button { padding: 1rem 2rem; border-radius: 8px; font-weight: 500; text-decoration: none; transition: all 0.3s ease;}
.cta-button.primary { background: var(--gradient); color: var(--white);}
.cta-button.secondary { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color);}
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.1);}
.stat-item h3 { font-size: 2rem; color: var(--primary-color); margin-bottom: 0.5rem;}
.stat-item p { color: var(--text-secondary); font-size: 0.9rem;}
.hero-image { position: relative;}
.hero-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}
.experience-card,.tech-stack-card { position: absolute; background: var(--white); padding: 1rem; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
.experience-card { top: 20%; left: -10%;}
.tech-stack-card { bottom: 20%; right: -10%;}
.card-icon { font-size: 1.5rem; margin-bottom: 0.5rem;}
.cta-button { transition: all 0.2s ease-in-out;}.cta-button:hover { transform: scale(1.1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08);}.cta-button:active { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11), 0 4px 10px rgba(0, 0, 0, 0.08);}.cta-button:hover .link-with-icon i { animation: spin 1s ease-in-out infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
/* Hero Section ends */
/* Skills Section starts */.skills { padding: 8rem 5% 5rem; background: var(--white);}
.skills-container { max-width: 1200px; margin: 0 auto;}
.skills-content { display: flex; flex-direction: column; gap: 4rem;}
.skills-box { background: var(--background-light); padding: 2.5rem; border-radius: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.skills-box h3 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(0, 0, 0, 0.05);}
.skills-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;}
.skill-item { display: flex; align-items: center; gap: 1.5rem;}
.skill-item i { font-size: 2rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.skill-info { flex: 1;}
.skill-info h4 { font-size: 1rem; color: var(--text-primary); margin-bottom: 0.5rem;}
.progress-bar { width: 100%; height: 8px; background: rgba(0, 0, 0, 0.05); border-radius: 4px; overflow: hidden;}
.progress { height: 100%; background: var(--gradient); border-radius: 4px; position: relative; transition: width 1.5s ease-in-out;}
.progress span { position: absolute; right: 0; top: -25px; font-size: 0.8rem; font-weight: 600; color: var(--primary-color);}
/* Animation for skills */.skill-item { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s ease forwards;}
.skill-item:nth-child(1) { animation-delay: 0.1s; }.skill-item:nth-child(2) { animation-delay: 0.2s; }.skill-item:nth-child(3) { animation-delay: 0.3s; }.skill-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); }}
/* Responsive adjustments */@media (max-width: 768px) { .skills-box { padding: 1.5rem; }
.skills-group { grid-template-columns: 1fr; gap: 1.5rem; }
.skill-item { gap: 1rem; }
.skill-item i { font-size: 1.5rem; }}
/* Skills Section ends */
/* Projects Section starts */.projects { padding: 8rem 5% 5rem; background: var(--white);}
.projects-container { max-width: 1200px; margin: 0 auto;}
.project-item { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 8rem; align-items: center;}
.project-item.reverse { direction: rtl;}
.project-item.reverse .project-content { direction: ltr;}
.project-number { font-size: 1.5rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1rem; display: block;}
.project-content h3 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--text-primary);}
.project-content p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem;}
.project-tech-stack { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;}
.project-tech-stack span { padding: 0.5rem 1rem; background: var(--background-light); border-radius: 50px; font-size: 0.9rem; color: var(--primary-color); font-weight: 500;}
.project-links { display: flex; gap: 2rem;}
.link-with-icon { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); text-decoration: none; font-weight: 500; transition: color 0.3s ease;}
.link-with-icon:hover { color: var(--primary-color);}
.project-image { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}
.project-image img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.5s ease;}
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.1), rgba(96, 165, 250, 0.1));}
.project-image:hover img { transform: scale(1.05);}
/* Projects Section ends */
/* About Section starts */.about { padding: 8rem 5% 5rem; background: var(--white);}
.about-container { max-width: 1200px; margin: 0 auto;}
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;}
.about-image { position: relative; width: 100%; max-width: 450px; height: 500px; margin: 0 auto;}
.about-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; position: relative; z-index: 2;}
.about-shape { width: calc(100% - 40px); height: calc(100% - 40px); background: var(--gradient); position: absolute; top: 40px; left: 40px; border-radius: 20px; z-index: 1;}
.about-badge { position: absolute; top: 20px; right: -10px; background: var(--gradient); color: white; padding: 0.8rem 1.5rem; border-radius: 50px; font-size: 0.9rem; font-weight: 500; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 3;}
.about-description { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2.5rem; line-height: 1.8;}
.about-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem;}
.info-item { display: flex; flex-direction: column; gap: 0.5rem;}
.info-title { font-size: 1rem; color: var(--text-secondary);}
.info-desc { font-size: 1.2rem; font-weight: 600; color: var(--text-primary);}
.about-buttons { display: flex; gap: 1rem;}
/* About Section ends */
/* Contact Section starts */.contact { padding: 8rem 5% 5rem; background: var(--background-light);}
.contact-wrapper { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;}
.contact-description { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 3rem; max-width: 500px;}
.contact-methods { display: grid; gap: 2rem; margin-bottom: 3rem;}
.contact-method { display: flex; align-items: center; gap: 1.5rem;}
.method-icon { width: 50px; height: 50px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.method-icon i { font-size: 1.2rem; color: var(--primary-color);}
.method-details h3 { font-size: 1.1rem; margin-bottom: 0.3rem; color: var(--text-primary);}
.method-details p { color: var(--text-secondary);}
.social-links { display: flex; gap: 1.5rem;}
.social-link { width: 40px; height: 40px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); text-decoration: none; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.social-link:hover { transform: translateY(-3px); color: var(--white); background: var(--gradient);}
.contact-form-wrapper { background: var(--white); padding: 3rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;}
.input-group { margin-bottom: 1.5rem;}
.input-group label { display: block; margin-bottom: 0.5rem; color: var(--text-primary); font-weight: 500;}
.input-group input,.input-group textarea { width: 100%; padding: 1rem; border: 2px solid #eee; border-radius: 10px; font-family: inherit; font-size: 1rem; transition: all 0.3s ease;}
.input-group textarea { height: 150px; resize: none;}
.input-group input:focus,.input-group textarea:focus { outline: none; border-color: var(--primary-color);}
.submit-btn { width: 100%; padding: 1rem; background: var(--gradient); color: var(--white); border: none; border-radius: 10px; font-size: 1rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease;}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37, 99, 235, 0.2);}
/* Contact Section ends */
/* Footer Section starts */footer { text-align: center; padding: 2rem; background: #2d2d2d; color: white;}
/* Responsive Design */@media (max-width: 968px) { .hero-content { grid-template-columns: 1fr; text-align: center; }
.hero-text h1 { font-size: 2.5rem; }
.hero-description { margin: 0 auto 2rem; }
.hero-buttons { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-image { order: -1; margin-bottom: 2rem; }
.experience-card { top: 10%; left: 0; transform: scale(0.8); padding: 0.75rem; }
.tech-stack-card { bottom: 10%; right: 0; transform: scale(0.8); padding: 0.75rem; }
.about-content, .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
.about-shape { display: none; }
.about-buttons, .about-info { justify-content: center; }
.contact-description { max-width: 100%; }
.project-item { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
.project-item.reverse { direction: ltr; }
.project-image img { height: 300px; }
@media (max-width: 480px) { .experience-card, .tech-stack-card { transform: scale(0.7); padding: 0.5rem; }
.experience-card { top: 5%; left: -5%; }
.tech-stack-card { bottom: 5%; right: -5%; } }}
@media (max-width: 768px) { .about-content { grid-template-columns: 1fr; gap: 2rem; }
.about-image { height: 400px; max-width: 300px; }
.about-shape { width: calc(100% - 20px); height: calc(100% - 20px); top: 20px; left: 20px; }
.about-description { margin: 0 auto 2rem; }
.about-info { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.info-item { text-align: center; padding: 1rem; background: var(--background-light); border-radius: 12px; transition: transform 0.3s ease; }
.info-item:hover { transform: translateY(-5px); }
.info-item i { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 0.5rem; }
.about-buttons { flex-direction: column; gap: 1rem; }
.cta-button { width: 100%; text-align: center; }
.nav-links { display: none; }
.hamburger { display: block; }
.contact-description { max-width: 100%; }
.input-row { grid-template-columns: 1fr; }
.contact-form-wrapper { padding: 1.5rem; }
.skills-box { padding: 1.5rem; }
.skills-group { grid-template-columns: 1fr; gap: 1.5rem; }
.skill-item { gap: 1rem; }
.skill-item i { font-size: 1.5rem; }
.project-tech-stack { gap: 0.5rem; }
.project-links { flex-direction: column; gap: 1rem; }}
@media (max-width: 480px) { .about-info { grid-template-columns: 1fr; text-align: center; }
.contact-description { max-width: 100%; }
.input-row { grid-template-columns: 1fr; }
.contact-form-wrapper { padding: 1.5rem; }
.project-tech-stack { gap: 0.5rem; }
.project-links { flex-direction: column; gap: 1rem; }
.about-image { height: 350px; max-width: 250px; }
.about-shape { width: calc(100% - 15px); height: calc(100% - 15px); top: 15px; left: 15px; }}
/* Enhanced Footer Styles */.footer { background: var(--text-primary); color: var(--white); padding: 4rem 5% 2rem;}
.footer-container { max-width: 1200px; margin: 0 auto;}
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem;}
.footer-section { display: flex; flex-direction: column; gap: 1.5rem;}
.footer-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; position: relative;}
.footer-title::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 40px; height: 2px; background: var(--gradient);}
.footer-description { color: rgba(255, 255, 255, 0.7); line-height: 1.6;}
.footer-social { display: flex; gap: 1rem;}
.social-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: all 0.3s ease;}
.social-icon:hover { background: var(--gradient); transform: translateY(-3px);}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 1rem;}
.footer-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; display: flex; align-items: center; gap: 0.5rem;}
.footer-links a:hover { color: var(--white); padding-left: 0.5rem;}
.footer-contact p { display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem;}
.footer-contact i { color: var(--accent-color);}
.footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;}
.footer-copyright { color: rgba(255, 255, 255, 0.7);}
.footer-extra { display: flex; gap: 2rem;}
.footer-extra a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease;}
.footer-extra a:hover { color: var(--white);}
/* Footer Mobile Responsiveness */@media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; text-align: center; gap: 1.5rem; }
.footer-extra { justify-content: center; }
.footer-section { align-items: center; text-align: center; }
.footer-title::after { left: 50%; transform: translateX(-50%); }
.footer-social { justify-content: center; }
.footer-links { align-items: center; }
.footer-contact p { justify-content: center; }}
/* Add these styles for section titles */.section-title { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; text-align: center; position: relative; padding-bottom: 1rem;}
.section-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80px; height: 3px; background: var(--gradient); border-radius: 2px;}
.section-subtitle { text-align: center; color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 3rem;}
/* Add responsive styles for section titles */@media (max-width: 768px) { .section-title { font-size: 2rem; } .section-subtitle { font-size: 1rem; }}
:root {
--primary-color: #2563eb;
--secondary-color: #3b82f6;
--accent-color: #60a5fa;
--text-primary: #1f2937;
--text-secondary: #4b5563;
--background-light: #f8fafc;
--white: #ffffff;
--gradient: linear-gradient(135deg, #2563eb, #60a5fa);
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--background-light);
}
/* Navigation starts */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-left {
display: flex;
align-items: center;
}
.nav-logo {
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo-text {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.5px;
}
.logo-highlight {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-right {
display: flex;
align-items: center;
}
.nav-menu {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 8px;
}
.nav-link i {
font-size: 1.1rem;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
background: rgba(37, 99, 235, 0.1);
}
.nav-link::before {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--gradient);
transition: width 0.3s ease;
}
.nav-link:hover::before,
.nav-link.active::before {
width: 80%;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
padding: 0.5rem;
}
.nav-toggle span {
display: block;
width: 25px;
height: 2px;
background: var(--text-primary);
transition: all 0.3s ease;
}
/* Mobile Navigation */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background: var(--white);
flex-direction: column;
align-items: center;
padding: 2rem;
gap: 2rem;
transition: 0.3s ease;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.nav-link {
font-size: 1.1rem;
padding: 1rem 2rem;
width: 100%;
text-align: center;
justify-content: center;
}
}
/* Scrolled Navbar */
.navbar.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Navigation ends */
/* Hero Section starts */
.hero {
padding: 8rem 5% 5rem;
min-height: 100vh;
background: var(--white);
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.welcome-text {
display: inline-block;
padding: 0.5rem 1rem;
background: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.hero-text h1 {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.gradient-text {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-description {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 2rem;
max-width: 500px;
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.cta-button {
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.cta-button.primary {
background: var(--gradient);
color: var(--white);
}
.cta-button.secondary {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.stat-item h3 {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.stat-item p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.hero-image {
position: relative;
}
.hero-image img {
width: 100%;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.experience-card,
.tech-stack-card {
position: absolute;
background: var(--white);
padding: 1rem;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.experience-card {
top: 20%;
left: -10%;
}
.tech-stack-card {
bottom: 20%;
right: -10%;
}
.card-icon {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.cta-button {
transition: all 0.2s ease-in-out;
}
.cta-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08);
}
.cta-button:active {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.11), 0 4px 10px rgba(0, 0, 0, 0.08);
}
.cta-button:hover .link-with-icon i {
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hero Section ends */
/* Skills Section starts */
.skills {
padding: 8rem 5% 5rem;
background: var(--white);
}
.skills-container {
max-width: 1200px;
margin: 0 auto;
}
.skills-content {
display: flex;
flex-direction: column;
gap: 4rem;
}
.skills-box {
background: var(--background-light);
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.skills-box h3 {
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.skills-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.skill-item {
display: flex;
align-items: center;
gap: 1.5rem;
}
.skill-item i {
font-size: 2rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.skill-info {
flex: 1;
}
.skill-info h4 {
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
overflow: hidden;
}
.progress {
height: 100%;
background: var(--gradient);
border-radius: 4px;
position: relative;
transition: width 1.5s ease-in-out;
}
.progress span {
position: absolute;
right: 0;
top: -25px;
font-size: 0.8rem;
font-weight: 600;
color: var(--primary-color);
}
/* Animation for skills */
.skill-item {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
}
.skill-item:nth-child(1) { animation-delay: 0.1s; }
.skill-item:nth-child(2) { animation-delay: 0.2s; }
.skill-item:nth-child(3) { animation-delay: 0.3s; }
.skill-item:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.skills-box {
padding: 1.5rem;
}
.skills-group {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skill-item {
gap: 1rem;
}
.skill-item i {
font-size: 1.5rem;
}
}
/* Skills Section ends */
/* Projects Section starts */
.projects {
padding: 8rem 5% 5rem;
background: var(--white);
}
.projects-container {
max-width: 1200px;
margin: 0 auto;
}
.project-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 8rem;
align-items: center;
}
.project-item.reverse {
direction: rtl;
}
.project-item.reverse .project-content {
direction: ltr;
}
.project-number {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
display: block;
}
.project-content h3 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.project-content p {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 2rem;
}
.project-tech-stack {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.project-tech-stack span {
padding: 0.5rem 1rem;
background: var(--background-light);
border-radius: 50px;
font-size: 0.9rem;
color: var(--primary-color);
font-weight: 500;
}
.project-links {
display: flex;
gap: 2rem;
}
.link-with-icon {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.link-with-icon:hover {
color: var(--primary-color);
}
.project-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.project-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.1),
rgba(96, 165, 250, 0.1));
}
.project-image:hover img {
transform: scale(1.05);
}
/* Projects Section ends */
/* About Section starts */
.about {
padding: 8rem 5% 5rem;
background: var(--white);
}
.about-container {
max-width: 1200px;
margin: 0 auto;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
position: relative;
width: 100%;
max-width: 450px;
height: 500px;
margin: 0 auto;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
position: relative;
z-index: 2;
}
.about-shape {
width: calc(100% - 40px);
height: calc(100% - 40px);
background: var(--gradient);
position: absolute;
top: 40px;
left: 40px;
border-radius: 20px;
z-index: 1;
}
.about-badge {
position: absolute;
top: 20px;
right: -10px;
background: var(--gradient);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.about-description {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2.5rem;
line-height: 1.8;
}
.about-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 2.5rem;
}
.info-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.info-title {
font-size: 1rem;
color: var(--text-secondary);
}
.info-desc {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
}
.about-buttons {
display: flex;
gap: 1rem;
}
/* About Section ends */
/* Contact Section starts */
.contact {
padding: 8rem 5% 5rem;
background: var(--background-light);
}
.contact-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-description {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 3rem;
max-width: 500px;
}
.contact-methods {
display: grid;
gap: 2rem;
margin-bottom: 3rem;
}
.contact-method {
display: flex;
align-items: center;
gap: 1.5rem;
}
.method-icon {
width: 50px;
height: 50px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.method-icon i {
font-size: 1.2rem;
color: var(--primary-color);
}
.method-details h3 {
font-size: 1.1rem;
margin-bottom: 0.3rem;
color: var(--text-primary);
}
.method-details p {
color: var(--text-secondary);
}
.social-links {
display: flex;
gap: 1.5rem;
}
.social-link {
width: 40px;
height: 40px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-link:hover {
transform: translateY(-3px);
color: var(--white);
background: var(--gradient);
}
.contact-form-wrapper {
background: var(--white);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-weight: 500;
}
.input-group input,
.input-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid #eee;
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
}
.input-group textarea {
height: 150px;
resize: none;
}
.input-group input:focus,
.input-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.submit-btn {
width: 100%;
padding: 1rem;
background: var(--gradient);
color: var(--white);
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.2);
}
/* Contact Section ends */
/* Footer Section starts */
footer {
text-align: center;
padding: 2rem;
background: #2d2d2d;
color: white;
}
/* Responsive Design */
@media (max-width: 968px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text h1 {
font-size: 2.5rem;
}
.hero-description {
margin: 0 auto 2rem;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-image {
order: -1;
margin-bottom: 2rem;
}
.experience-card {
top: 10%;
left: 0;
transform: scale(0.8);
padding: 0.75rem;
}
.tech-stack-card {
bottom: 10%;
right: 0;
transform: scale(0.8);
padding: 0.75rem;
}
.about-content,
.contact-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-shape {
display: none;
}
.about-buttons,
.about-info {
justify-content: center;
}
.contact-description {
max-width: 100%;
}
.project-item {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
.project-item.reverse {
direction: ltr;
}
.project-image img {
height: 300px;
}
@media (max-width: 480px) {
.experience-card,
.tech-stack-card {
transform: scale(0.7);
padding: 0.5rem;
}
.experience-card {
top: 5%;
left: -5%;
}
.tech-stack-card {
bottom: 5%;
right: -5%;
}
}
}
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-image {
height: 400px;
max-width: 300px;
}
.about-shape {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 20px;
left: 20px;
}
.about-description {
margin: 0 auto 2rem;
}
.about-info {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.info-item {
text-align: center;
padding: 1rem;
background: var(--background-light);
border-radius: 12px;
transition: transform 0.3s ease;
}
.info-item:hover {
transform: translateY(-5px);
}
.info-item i {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.about-buttons {
flex-direction: column;
gap: 1rem;
}
.cta-button {
width: 100%;
text-align: center;
}
.nav-links {
display: none;
}
.hamburger {
display: block;
}
.contact-description {
max-width: 100%;
}
.input-row {
grid-template-columns: 1fr;
}
.contact-form-wrapper {
padding: 1.5rem;
}
.skills-box {
padding: 1.5rem;
}
.skills-group {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skill-item {
gap: 1rem;
}
.skill-item i {
font-size: 1.5rem;
}
.project-tech-stack {
gap: 0.5rem;
}
.project-links {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 480px) {
.about-info {
grid-template-columns: 1fr;
text-align: center;
}
.contact-description {
max-width: 100%;
}
.input-row {
grid-template-columns: 1fr;
}
.contact-form-wrapper {
padding: 1.5rem;
}
.project-tech-stack {
gap: 0.5rem;
}
.project-links {
flex-direction: column;
gap: 1rem;
}
.about-image {
height: 350px;
max-width: 250px;
}
.about-shape {
width: calc(100% - 15px);
height: calc(100% - 15px);
top: 15px;
left: 15px;
}
}
/* Enhanced Footer Styles */
.footer {
background: var(--text-primary);
color: var(--white);
padding: 4rem 5% 2rem;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
position: relative;
}
.footer-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 2px;
background: var(--gradient);
}
.footer-description {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.footer-social {
display: flex;
gap: 1rem;
}
.social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: var(--gradient);
transform: translateY(-3px);
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-links a:hover {
color: var(--white);
padding-left: 0.5rem;
}
.footer-contact p {
display: flex;
align-items: center;
gap: 1rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
}
.footer-contact i {
color: var(--accent-color);
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright {
color: rgba(255, 255, 255, 0.7);
}
.footer-extra {
display: flex;
gap: 2rem;
}
.footer-extra a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-extra a:hover {
color: var(--white);
}
/* Footer Mobile Responsiveness */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.footer-extra {
justify-content: center;
}
.footer-section {
align-items: center;
text-align: center;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-social {
justify-content: center;
}
.footer-links {
align-items: center;
}
.footer-contact p {
justify-content: center;
}
}
/* Add these styles for section titles */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
text-align: center;
position: relative;
padding-bottom: 1rem;
}
.section-title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient);
border-radius: 2px;
}
.section-subtitle {
text-align: center;
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 3rem;
}
/* Add responsive styles for section titles */
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.section-subtitle {
font-size: 1rem;
}
}
📌 4. JavaScript Functionality (script.js)
The JavaScript file adds animations, smooth scrolling, and interactive elements.
// Initialize AOSAOS.init({ duration: 1000, once: true, offset: 100});
// Smooth scrollingdocument.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); });});
// Navbar scroll effectwindow.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = 'none'; }});
// Skill cards animationconst observerOptions = { threshold: 0.5, rootMargin: '0px'};
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } });}, observerOptions);
document.querySelectorAll('.skill-card').forEach(card => { observer.observe(card);});
// Mobile Menu Toggleconst navToggle = document.querySelector('.nav-toggle');const navMenu = document.querySelector('.nav-menu');
navToggle.addEventListener('click', () => { navToggle.classList.toggle('active'); navMenu.classList.toggle('active');});
// Close mobile menu when clicking a linkdocument.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', () => { navToggle.classList.remove('active'); navMenu.classList.remove('active'); });});
// Active link on scrollconst sections = document.querySelectorAll('section[id]');
function scrollActive() { const scrollY = window.pageYOffset;
sections.forEach(current => { const sectionHeight = current.offsetHeight; const sectionTop = current.offsetTop - 100; const sectionId = current.getAttribute('id'); if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { document.querySelector(`.nav-link[href*=${sectionId}]`).classList.add( 'active'); } else { document.querySelector(`.nav-link[href*=${sectionId}]`).classList.remove( 'active'); } });}
window.addEventListener('scroll', scrollActive);
// Initialize AOS
AOS.init({
duration: 1000,
once: true,
offset: 100
});
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Navbar scroll effect
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = 'none';
}
});
// Skill cards animation
const observerOptions = {
threshold: 0.5,
rootMargin: '0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
}, observerOptions);
document.querySelectorAll('.skill-card').forEach(card => {
observer.observe(card);
});
// Mobile Menu Toggle
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
navToggle.addEventListener('click', () => {
navToggle.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navToggle.classList.remove('active');
navMenu.classList.remove('active');
});
});
// Active link on scroll
const sections = document.querySelectorAll('section[id]');
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 100;
const sectionId = current.getAttribute('id');
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector(`.nav-link[href*=${sectionId}]`).classList.add(
'active');
} else {
document.querySelector(`.nav-link[href*=${sectionId}]`).classList.remove(
'active');
}
});
}
window.addEventListener('scroll', scrollActive);
🚀 Conclusion
This portfolio website is fully responsive, optimized, and interactive.
✅ Showcases your work professionally.
✅ Uses modern animations and effects.
✅ Includes smooth scrolling and responsive design.
Post a Comment