Modern Responsive Portfolio Website Using HTML & CSS
Categories: Portfolio Website
In today’s digital world, having strong technical skills is not enough. Whether you are a web developer, designer, freelancer, or student, you must show your work professionally. This is where a portfolio website becomes extremely important.
A well-designed portfolio website HTML CSS project allows you to present your skills, projects, experience, and personality in one place. Instead of explaining what you can do, you show it. Recruiters, clients, and companies prefer developers who have a clean, functional, and responsive portfolio website.
In this detailed blog post, we will explore a modern portfolio website created using HTML, CSS, and JavaScript. You will understand how the design works, how the code is structured, and why this type of developer portfolio source code is perfect for real-world use.
Also Read:
Watch the Video : Modern Responsive Portfolio Website preview
Why Every Developer Needs a Portfolio Website
A portfolio website is more than just a personal page. It is your digital identity.
Key Benefits of a Personal Portfolio Website
- Shows your real skills instead of just claims
- Builds trust with recruiters and clients
- Helps you stand out from other developers
- Works as a live resume available 24/7
- Improves your chances of getting hired or freelance work
A personal portfolio website is often the first thing someone checks before contacting you. That is why the design, performance, and responsiveness matter a lot.
Also Read:
What Makes This Portfolio Website Different From Others?
Most portfolio websites on the internet look similar and follow the same layout. This project is created with a different mindset. Instead of focusing only on appearance, the goal is to build a practical and professional HTML CSS portfolio design that works well in real situations.
Every section of this portfolio is planned carefully so that visitors can easily understand who you are, what skills you have, and what kind of work you do. The design is clean, lightweight, and fast, which helps both users and search engines.
One important thing about this modern portfolio website is that it does not rely on heavy libraries or unnecessary effects. Everything is kept simple, readable, and easy to manage, even for beginners.
Key Highlights of This Portfolio Website
- The layout follows a clean structure that looks professional on first glance
- The design adjusts smoothly on mobile, tablet, and desktop screens
- Animations are subtle and used only where they improve user experience
- Dark mode is included to provide better readability and user comfort
- Sections are properly organized for skills, services, and projects
- Code is written in a clear format so developers can understand and edit it easily
Because of these reasons, this project works perfectly as a responsive portfolio website that can be used by developers, freelancers, and job seekers for real-world purposes.
Also Read:
Technologies Used in This Project
This portfolio website uses only essential and powerful technologies. No unnecessary frameworks are added, which keeps the website lightweight and fast.
1. HTML5
HTML is used to create the structure of the website. Semantic tags improve readability and SEO, helping search engines understand the content better.
2. CSS3
CSS is responsible for the layout, colors, animations, responsiveness, and overall visual appearance. CSS variables are used to manage themes efficiently.
3. JavaScript
JavaScript adds interactivity such as:
- Dark mode toggle
- Menu behavior on mobile
- Scroll effects
- Dynamic UI updates
This combination makes the website modern while remaining easy to maintain.
Folder Structure of the Portfolio Website
portfolio-website/
│
├── images/
├── index.html
├── style.css
└── script.jsWhy This Structure Is Important
- Keeps code organized
- Makes debugging easier
- Improves scalability
Recruiters often check your repository, and clean structure creates a strong impression.
HTML Layout Explained Simply
The HTML file is divided into logical sections:
- Header / Sidebar
- Hero section
- About section
- Skills section
- Services section
- Portfolio gallery
- Contact section
Each section uses meaningful tags like section, nav, header, and footer. This improves accessibility and SEO, which is crucial for ranking a portfolio website HTML CSS project.
CSS Design: Clean, Modern, and Scalable
The design focuses on clarity and user experience.
Use of CSS Variables
CSS variables allow you to control the theme easily.
:root {
--portfolio-primary: #FFA500;
--portfolio-primary-light: #FFB733;
--portfolio-primary-dark: #E6940A;
--portfolio-bg: #F5F5F5;
--portfolio-card-bg: #FFFFFF;
--portfolio-text: #333333;
--portfolio-text-light: #666666;
--portfolio-text-lighter: #999999;
--portfolio-shadow: rgba(0, 0, 0, 0.1);
--portfolio-shadow-hover: rgba(0, 0, 0, 0.15);
}
When dark mode is enabled, these values change dynamically.
This method is:
- Efficient
- Easy to maintain
- Professional
It is one of the reasons this project qualifies as a portfolio website with dark mode.
Also Read:
Why Dark Mode Matters in a Modern Portfolio Website
Dark mode is no longer just a design trend. It has become a real user preference, especially for people who spend long hours browsing websites or working on screens. Many developers, designers, and recruiters actively prefer websites that offer a dark theme because it feels easier on the eyes.
In a modern portfolio website, dark mode also helps highlight content better by reducing unnecessary brightness. Text, icons, and sections become more focused, which improves readability and overall user experience.
From a practical point of view, dark mode can also help reduce battery usage on certain devices. More importantly, it gives users control over how they want to view the website, which builds trust and comfort.
In this portfolio website with dark mode, the feature is implemented using a simple JavaScript toggle combined with CSS variables. Once a user selects their preferred theme, the choice is saved so the website opens in the same mode the next time they visit.
This small but thoughtful feature makes the portfolio feel more personal, professional, and aligned with modern web standards.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Portfolio Website in HTML, CSS & JS (Responsive)</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="portfolio-container">
<!-- Left Sidebar -->
<aside class="left-sidebar">
<div class="left-sidebar-content">
<!-- Profile Section -->
<div class="profile-section">
<div class="profile-image">
<img src="images/profile-image.jpg" alt="Ravi Prakash">
</div>
<h1 class="profile-name">Ravi Prakash</h1>
<p class="profile-title">Front-End Developer</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- End Profile Section -->
<!-- General Skills -->
<div class="skills-section">
<div class="skill-item">
<span class="skill-name">Apps</span>
<div class="progress-bar">
<div class="progress-fill" data-width="74"></div>
</div>
<span class="skill-percentage">74%</span>
</div>
<div class="skill-item">
<span class="skill-name">Photography</span>
<div class="progress-bar">
<div class="progress-fill" data-width="80"></div>
</div>
<span class="skill-percentage">80%</span>
</div>
<div class="skill-item">
<span class="skill-name">Freelance</span>
<span class="skill-status">Available</span>
</div>
<div class="skill-item">
<span class="skill-name">Address</span>
<span class="skill-status">Patna, India</span>
</div>
</div>
<!-- End General Skills -->
<!-- Languages Section -->
<div class="section">
<h3 class="section-title">Languages</h3>
<div class="skill-item">
<span class="skill-name">Bhojpuri</span>
<div class="progress-bar">
<div class="progress-fill" data-width="100"></div>
</div>
<span class="skill-percentage">100%</span>
</div>
<div class="skill-item">
<span class="skill-name">Hindi</span>
<div class="progress-bar">
<div class="progress-fill" data-width="90"></div>
</div>
<span class="skill-percentage">90%</span>
</div>
<div class="skill-item">
<span class="skill-name">English</span>
<div class="progress-bar">
<div class="progress-fill" data-width="70"></div>
</div>
<span class="skill-percentage">70%</span>
</div>
</div>
<!-- End Languages Section -->
<!-- Technical Skills Section -->
<div class="section">
<h3 class="section-title">Skills</h3>
<div class="skill-item">
<span class="skill-name">HTML</span>
<div class="progress-bar">
<div class="progress-fill" data-width="90"></div>
</div>
<span class="skill-percentage">90%</span>
</div>
<div class="skill-item">
<span class="skill-name">CSS</span>
<div class="progress-bar">
<div class="progress-fill" data-width="80"></div>
</div>
<span class="skill-percentage">80%</span>
</div>
<div class="skill-item">
<span class="skill-name">JS</span>
<div class="progress-bar">
<div class="progress-fill" data-width="80"></div>
</div>
<span class="skill-percentage">80%</span>
</div>
<div class="skill-item">
<span class="skill-name">PHP</span>
<div class="progress-bar">
<div class="progress-fill" data-width="75"></div>
</div>
<span class="skill-percentage">75%</span>
</div>
<div class="skill-item">
<span class="skill-name">WordPress</span>
<div class="progress-bar">
<div class="progress-fill" data-width="65"></div>
</div>
<span class="skill-percentage">65%</span>
</div>
</div>
<!--End Technical Skills Section -->
<!-- Extra Skills Section -->
<div class="section">
<h3 class="section-title">Extra Skills</h3>
<ul class="extra-skills">
<li>Bootstrap, Materialize</li>
<li>Stylus, Sass, Less</li>
<li>Gulp, Webpack, Grunt</li>
<li>GIT Knowledge</li>
</ul>
</div>
<!-- End Extra Skills Section -->
<!-- Download CV Button -->
<button class="download-cv-btn">
<i class="fas fa-download"></i>
DOWNLOAD CV
</button>
</div>
</aside>
<!-- ====End Left Sidebr=== -->
<!-- Main Content -->
<main class="main-content">
<!-- Hero Section -->
<section class="hero-section" id="home">
<div class="hero-content">
<h1 class="hero-title">I'm Ravi Prakash <br> <span class="highlight" id="typing">Front-end
Developer</span></h1>
<p class="hero-description">
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Et Voluptati Feugiati Placerat
Lobortis,
Nanoque Rutrum Semper Sed Suspendisse Nunc Lectus.
</p>
<button class="hire-me-btn">HIRE ME</button>
</div>
<div class="hero-image">
<img src="images/hero-image.png" alt="Ravi Prakash">
<div class="geometric-shapes">
<div class="shape circle"></div>
<div class="shape triangle"></div>
<div class="shape square"></div>
<div class="shape circle-small"></div>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Services Section -->
<section class="services-section" id="services">
<h2 class="section-title">My Services</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<h3 class="service-title">Web Development</h3>
<p class="service-description">Blog, E-Commerce</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="service-title">UI/UX Design</h3>
<p class="service-description">Mobile App, Website Design</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-microphone"></i>
</div>
<h3 class="service-title">Sound Design</h3>
<p class="service-description">Voice Over, Beat Making</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-gamepad"></i>
</div>
<h3 class="service-title">Game Design</h3>
<p class="service-description">Character Design, Props & Objects</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-camera"></i>
</div>
<h3 class="service-title">Photography</h3>
<p class="service-description">Portrait, Product Photography</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-bullhorn"></i>
</div>
<h3 class="service-title">Advertising</h3>
<p class="service-description">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Velit
Officis Consequat Duis Enim Velit Mollit.</p>
</div>
</div>
</section>
<!-- End Services Section -->
<!-- Price Plans Section -->
<section class="price-plans-section" id="price">
<h2 class="section-title">Price Plans</h2>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-header">
<h3 class="plan-name">STARTER PLAN</h3>
<div class="plan-price">
<span class="price">$19</span>
<span class="period">/month</span>
</div>
</div>
<div class="pricing-features">
<div class="feature included">
<i class="fas fa-check"></i>
<span>10 GB Storage</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Basic Support</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>1 Website</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Limited Features</span>
</div>
<div class="feature not-included">
<i class="fas fa-times"></i>
<span>Free SSL</span>
</div>
<div class="feature not-included">
<i class="fas fa-times"></i>
<span>Priority Support</span>
</div>
</div>
<button class="order-btn">Order Now</button>
</div>
<div class="pricing-card recommended">
<div class="recommended-badge">RECOMMENDED</div>
<div class="pricing-header">
<h3 class="plan-name">PROFESSIONAL PLAN</h3>
<div class="plan-price">
<span class="price">$49</span>
<span class="period">/month</span>
</div>
</div>
<div class="pricing-features">
<div class="feature included">
<i class="fas fa-check"></i>
<span>100 GB Storage</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Priority Support</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>10 Websites</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Advanced Features</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Free SSL</span>
</div>
<div class="feature not-included">
<i class="fas fa-times"></i>
<span>24/7 Support</span>
</div>
</div>
<button class="order-btn">Order Now</button>
</div>
<div class="pricing-card">
<div class="pricing-header">
<h3 class="plan-name">ULTIMATE PLAN</h3>
<div class="plan-price">
<span class="price">$99</span>
<span class="period">/month</span>
</div>
</div>
<div class="pricing-features">
<div class="feature included">
<i class="fas fa-check"></i>
<span>Unlimited Storage</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>24/7 Support</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Unlimited Websites</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>All Features</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Free SSL & CDN</span>
</div>
<div class="feature included">
<i class="fas fa-check"></i>
<span>Custom Development</span>
</div>
</div>
<button class="order-btn">Order Now</button>
</div>
</div>
</section>
<!-- End Price Plans Section -->
<!-- Testimonials Section -->
<section class="testimonials-section" id="clients">
<h2 class="section-title">What Clients Say</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-header">
<div class="client-photo">
<img src="images/sarah-johnson.jpg"
alt="Sarah Johnson">
</div>
<div class="client-info">
<h4 class="client-name">Sarah Johnson</h4>
<p class="client-position">CEO, TechStart</p>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="testimonial-text">
"Rayan delivered exceptional work on our website. His attention to detail and technical
expertise exceeded our expectations."
</p>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<div class="client-photo">
<img src="images/michael-chen.jpeg"
alt="Michael Chen">
</div>
<div class="client-info">
<h4 class="client-name">Michael Chen</h4>
<p class="client-position">Founder, DigitalCorp</p>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="testimonial-text">
"Working with Rayan was a pleasure. He understood our vision and created a beautiful,
functional website that drives results."
</p>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<div class="client-photo">
<img src="images/emily-rodriguez.jpeg"
alt="Emily Rodriguez">
</div>
<div class="client-info">
<h4 class="client-name">Emily Rodriguez</h4>
<p class="client-position">Marketing Director, CreativeAgency</p>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="testimonial-text">
"Rayan's front-end development skills are outstanding. Our new website performs perfectly
across all devices."
</p>
</div>
</div>
</section>
<!-- End Testimonials Section -->
<!-- Recent Work Section -->
<section class="portfolio-section" id="works">
<h2 class="section-title">Recent Work</h2>
<div class="portfolio-grid">
<div class="portfolio-card">
<div class="portfolio-image">
<img src="images/e-commerce-platform.jpeg"
alt="E-Commerce Platform">
<div class="portfolio-overlay">
<button class="view-details-btn">View Details</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">E-Commerce Platform</h3>
<p class="portfolio-description">Modern online shopping experience with advanced features
</p>
<span class="portfolio-category">Web Development</span>
</div>
</div>
<div class="portfolio-card">
<div class="portfolio-image">
<img src="images/mobile-banking-app.jpeg"
alt="Mobile Banking App">
<div class="portfolio-overlay">
<button class="view-details-btn">View Details</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">Mobile Banking App</h3>
<p class="portfolio-description">User-friendly banking application with secure transactions
</p>
<span class="portfolio-category">UI/UX Design</span>
</div>
</div>
<div class="portfolio-card">
<div class="portfolio-image">
<img src="images/corporate-website.jpeg"
alt="Corporate Website">
<div class="portfolio-overlay">
<button class="view-details-btn">View Details</button>
</div>
</div>
<div class="portfolio-content">
<h3 class="portfolio-title">Corporate Website</h3>
<p class="portfolio-description">Professional business website with modern design elements
</p>
<span class="portfolio-category">Web Design</span>
</div>
</div>
</div>
</section>
<!-- Recent Work Section -->
<!-- Contact Section -->
<section class="contact-section" id="contact">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-content">
<div class="contact-form-container">
<form class="contact-form" id="contact-form">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Your Name"
required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control"
placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="message" name="message" class="form-control" rows="6"
placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="send-message-btn">
<i class="fas fa-paper-plane"></i>
Send Message
</button>
</form>
</div>
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-details">
<h4>Address</h4>
<p>Patna, India</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-details">
<h4>Email</h4>
<p>contact@raviwebcodes.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-details">
<h4>Phone</h4>
<p>+880 123-456-789</p>
</div>
</div>
<div class="social-links">
<a href="#" target="_blank" class="social-link">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" target="_blank" class="social-link">
<i class="fab fa-twitter"></i>
</a>
<a href="#" target="_blank" class="social-link">
<i class="fab fa-github"></i>
</a>
<a href="#" target="_blank" class="social-link">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
</div>
</section>
<!--End Contact Section -->
</main>
<!-- End Main Content -->
<!-- ====Right Sidebar Menu=== -->
<aside class="right-side">
<ul class="right-menubar">
<li>
<a href="#home" class="active tooltip">
<i class="fa-solid fa-house"></i>
<span class="tooltip-content">Home</span>
</a>
</li>
<li>
<a href="#services" class="tooltip">
<i class="fa-solid fa-screwdriver-wrench"></i>
<span class="tooltip-content">Services</span>
</a>
</li>
<li>
<a href="#price" class="tooltip">
<i class="fa-solid fa-tags"></i>
<span class="tooltip-content">Price</span>
</a>
</li>
<li>
<a href="#clients" class="tooltip">
<i class="fa-solid fa-users"></i>
<span class="tooltip-content">Clients</span>
</a>
</li>
<li>
<a href="#works" class="tooltip">
<i class="fa-solid fa-briefcase"></i>
<span class="tooltip-content">Works</span>
</a>
</li>
<li>
<a href="#contact" class="tooltip">
<i class="fa-solid fa-envelope"></i>
<span class="tooltip-content">Contact</span>
</a>
</li>
</ul>
</aside>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-left">
<p>© 2025 <a href="https://www.raviwebcodes.com/" target="_blank">Ravi Web</a>. All rights
reserved.</p>
</div>
<div class="footer-center">
<nav class="footer-nav">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#price">Price</a>
<a href="#price">Clients</a>
<a href="#works">Works</a>
<a href="#contact">Contact</a>
</nav>
</div>
<div class="footer-right">
<div class="footer-social">
<a href="#" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a href="#" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="#" target="_blank">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
</div>
</footer>
<!--End Footer -->
<!-- Mobile Menu left Toggle -->
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<!-- Dark and Light -->
<div class="darklight">
<a href="#" class="darkmode-toggle">
<i class="fa-solid fa-sun"></i>
</a>
</div>
<!-- ----Cursor ----- -->
<div class="cursor">
<div class="dot"></div>
</div>
<!-- Scroll-to-top -->
<a href="#" class="scroll-to-top">
<i class="fas fa-arrow-up"></i>
</a>
<!-- =====JavaScript==== -->
<script src="script.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
:root {
--portfolio-primary: #FFA500;
--portfolio-primary-light: #FFB733;
--portfolio-primary-dark: #E6940A;
--portfolio-bg: #F5F5F5;
--portfolio-card-bg: #FFFFFF;
--portfolio-text: #333333;
--portfolio-text-light: #666666;
--portfolio-text-lighter: #999999;
--portfolio-shadow: rgba(0, 0, 0, 0.1);
--portfolio-shadow-hover: rgba(0, 0, 0, 0.15);
}
/* Dark theme override */
body.dark-mode {
--portfolio-bg: #1E1E1E;
--portfolio-card-bg: #2A2A2A;
--portfolio-text: #F5F5F5;
--portfolio-text-light: #CCCCCC;
--portfolio-text-lighter: #AAAAAA;
--portfolio-shadow: rgba(255, 255, 255, 0.05);
--portfolio-shadow-hover: rgba(255, 255, 255, 0.1);
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--portfolio-bg);
color: var(--portfolio-text);
overflow-x: hidden;
font-family: "Inter", sans-serif;
}
.portfolio-container {
display: flex;
min-height: 100vh;
}
.left-sidebar {
width: 25%;
background-color: var(--portfolio-card-bg);
box-shadow: 2px 0 10px var(--portfolio-shadow);
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 100;
transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.left-sidebar-content {
padding: 32px;
}
.profile-section {
text-align: center;
margin-bottom: 32px;
}
.profile-image {
width: 120px;
height: 120px;
margin: 0 auto 16px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px var(--portfolio-shadow);
transition: all 0.3s ease;
}
.profile-image img {
width: 100%;
object-fit: cover;
}
.profile-name {
font-size: 20px;
font-weight: 600;
margin: 0 0 8px 0;
color: var(--portfolio-text);
}
.profile-title {
font-size: 14px;
color: var(--portfolio-text-light);
margin: 0 0 16px 0;
}
.rating {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 24px;
}
.rating i {
color: var(--portfolio-primary);
font-size: 12px;
}
.skills-section {
margin-bottom: 32px;
}
.skill-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
font-size: 12px;
padding: 4px;
margin: 4px 4px 12px 4px;
border-radius: 6px;
transition: all 0.2s ease;
}
.skill-item:hover {
background: rgba(255, 165, 0, 0.05);
}
.skill-name {
color: var(--portfolio-text-light);
font-weight: 500;
min-width: 80px;
}
.progress-bar {
flex: 1;
height: 6px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 9999px;
margin: 0 12px;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(--portfolio-primary);
border-radius: 9999px;
width: 0%;
transition: width 1.5s ease-in-out;
}
.skill-percentage {
color: var(--portfolio-text-light);
font-weight: 500;
min-width: 35px;
text-align: right;
}
.skill-status {
color: var(--portfolio-primary);
font-weight: 500;
}
.section {
margin-bottom: 32px;
}
.section-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
color: var(--portfolio-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.extra-skills {
list-style: none;
padding: 0px;
margin: 0px;
}
.extra-skills li {
position: relative;
padding-left: 16px;
margin-bottom: 8px;
color: var(--portfolio-text-light);
font-size: 12px;
}
.extra-skills li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: var(--portfolio-primary);
border-radius: 50%;
}
.download-cv-btn {
width: 100%;
background-color: var(--portfolio-primary);
color: white;
border: none;
padding: 12px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.25 cubic-bezier(0.16, 1, 0.3, 1);
;
}
/* Scrollbar styling for sidebar */
.left-sidebar::-webkit-scrollbar {
width: 4px;
}
.left-sidebar::-webkit-scrollbar-track {
background: var(--portfolio-bg);
}
.left-sidebar::-webkit-scrollbar-thumb {
background: var(--portfolio-primary);
border-radius: 2px;
}
.left-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--portfolio-primary-dark);
}
/* Main Content */
.main-content {
margin-left: 25%;
width: 70%;
padding: 32px;
background-color: var(--portfolio-bg);
}
/* Hero Section */
.hero-section {
display: flex;
align-items: end;
gap: 32px;
margin-bottom: 80px;
min-height: 400px;
position: relative;
background-color: var(--portfolio-card-bg);
padding: 32px 32px 0 32px;
border-radius: 15px;
}
.hero-content {
flex: 1;
padding-bottom: 32px;
}
.hero-title {
font-size: clamp(24px, 4vw, 48px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
color: var(--portfolio-text);
}
.hero-title .highlight {
color: var(--portfolio-primary);
display: inline-block;
}
.hero-title #typing {
border-right: 2px solid var(--portfolio-primary);
/* cursor */
padding-right: 5px;
display: inline-block;
min-height: 5px;
animation: blink 0.9s infinite;
}
@keyframes blink {
0% {
border-color: var(--portfolio-primary);
}
50% {
border-color: transparent;
}
100% {
border-color: var(--portfolio-primary);
}
}
.hero-description {
font-size: 14px;
line-height: 1.6;
color: var(--portfolio-text-light);
margin-bottom: 32px;
max-width: 500px;
}
.hire-me-btn {
background-color: var(--portfolio-primary);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.25 cubic-bezier(0.16, 1, 0.3, 1);
;
}
.hire-me-btn:hover {
background-color: var(--portfolio-primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 165, 0, 0.3);
}
.hero-image {
flex: 0 0 300px;
position: relative;
display: flex;
align-items: center;
justify-content: end;
}
.hero-image img {
width: 280px;
height: 320px;
object-fit: cover;
border-radius: 12px;
z-index: 2;
position: relative;
}
/* Geometric Shapes */
.geometric-shapes {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.shape {
position: absolute;
opacity: 0.7;
}
.shape.circle {
width: 60px;
height: 60px;
background-color: var(--portfolio-primary);
border-radius: 50%;
top: 20px;
right: 40px;
animation: float 6s ease-in-out infinite;
}
.shape.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 43px solid var(--portfolio-primary);
bottom: 80px;
left: 0;
animation: float 8s ease-in-out infinite;
}
.shape.square {
width: 40px;
height: 40px;
background-color: var(--portfolio-primary);
transform: rotate(45deg);
bottom: 90px;
right: 0;
animation: float 7s ease-in-out infinite;
}
.shape.circle-small {
width: 30px;
height: 30px;
background-color: var(--portfolio-primary);
border-radius: 50%;
top: 70px;
left: 0;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Services Section */
.services-section {
margin-bottom: 80px;
}
.section-title {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-bottom: 60px;
color: var(--portfolio-text);
text-transform: none;
letter-spacing: normal;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.service-card {
background-color: var(--portfolio-card-bg);
padding: 24px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px var(--portfolio-shadow);
transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 165, 0, 0.1);
transform: translateY(10px) scale(1);
}
.service-card:hover {
transform: translateY(-5px) scale(0.98);
box-shadow: 0 8px 25px var(--portfolio-shadow-hover);
border-color: var(--portfolio-primary);
}
.service-icon {
width: 60px;
height: 60px;
background-color: rgba(255, 165, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-icon i {
font-size: 18px;
color: var(--portfolio-primary);
}
.service-card:hover .service-icon {
background-color: var(--portfolio-primary);
transform: scale(1.1);
}
.service-card:hover .service-icon i {
color: #fff;
}
.service-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: var(--portfolio-text);
}
.service-description {
font-size: 12px;
color: var(--portfolio-text-light);
line-height: 1.5;
margin: 0;
}
/* Price Plans Section */
.price-plans-section {
margin-bottom: 80px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.pricing-card {
background-color: var(--portfolio-card-bg);
border-radius: 12px;
box-shadow: 0 4px 15px var(--portfolio-shadow);
overflow: hidden;
border: 1px solid rgba(255, 165, 0, 0.1);
transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
display: block;
opacity: 1;
visibility: visible;
transform: translateY(30px) scale(1);
}
.pricing-card:hover {
transform: translateY(-5px) scale(0.98);
box-shadow: 0 8px 25px var(--portfolio-shadow-hover);
border-color: var(--portfolio-primary);
}
.pricing-card.recommended {
border-color: var(--portfolio-primary);
transform: translateY(-5px);
}
.recommended-badge {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: var(--portfolio-primary);
color: white;
padding: 6px 16px;
font-size: 11px;
font-weight: 500;
border-radius: 0 0 8px 8px;
z-index: 1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.05);
}
100% {
transform: translateX(-50%) scale(1);
}
}
.pricing-header {
padding: 32px 24px 16px;
text-align: center;
border-bottom: 1px solid rgba(255, 165, 0, 0.1);
}
.plan-name {
font-size: 14px;
font-weight: 500;
color: var(--portfolio-text);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
}
.price {
font-size: 30px;
font-weight: 600;
color: var(--portfolio-primary);
}
.period {
font-size: 14px;
color: var(--portfolio-text-light);
}
.pricing-features {
padding: 24px;
}
.feature {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 12px;
}
.feature i {
font-size: 12px;
min-width: 16px;
}
.feature.included i {
color: var(--portfolio-primary);
}
.feature.not-included {
opacity: 0.5;
}
.feature.not-included i {
color: var(--portfolio-text-lighter);
}
.order-btn {
width: calc(100% - 48px);
margin: 0 24px 24px;
background-color: var(--portfolio-primary);
color: white;
border: none;
padding: 12px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-btn:hover {
background-color: var(--portfolio-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}
/* Testimonials Section */
.testimonials-section {
margin-bottom: 80px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.testimonial-card {
background-color: var(--portfolio-card-bg);
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 15px var(--portfolio-shadow);
border: 1px solid rgba(255, 165, 0, 0.1);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: block;
opacity: 1;
visibility: visible;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px var(--portfolio-shadow-hover);
border-color: var(--portfolio-primary);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.client-photo {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.client-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.client-info {
flex: 1;
}
.client-name {
font-size: 14px;
font-weight: 600;
color: var(--portfolio-text);
margin: 0 0 4px 0;
}
.client-position {
font-size: 12px;
color: var(--portfolio-text-light);
margin: 0 0 8px 0;
}
.testimonial-rating {
display: flex;
gap: 2;
}
.testimonial-rating i {
color: var(--portfolio-primary);
font-size: 11px;
}
.testimonial-text {
font-size: 12px;
line-height: 1.6;
color: var(--portfolio-text-light);
font-style: italic;
margin: 0;
}
/* Portfolio Section */
.portfolio-section {
margin-bottom: 80px;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
}
.portfolio-card {
background-color: var(--portfolio-card-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px var(--portfolio-shadow);
border: 1px solid rgba(255, 165, 0, 0.1);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: block;
opacity: 1;
visibility: visible;
}
.portfolio-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px var(--portfolio-shadow-hover);
border-color: var(--portfolio-primary);
}
.portfolio-image {
position: relative;
height: 200px;
overflow: hidden;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 165, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-card:hover .portfolio-image img {
transform: scale(1.1);
}
.view-details-btn {
background-color: #fff;
color: var(--portfolio-primary);
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.view-details-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.portfolio-content {
padding: 20px;
}
.portfolio-title {
font-size: 16px;
font-weight: 600;
color: var(--portfolio-text);
margin: 0 0 8px 0;
}
.portfolio-description {
font-size: 12px;
color: var(--portfolio-text-light);
line-height: 1.5;
margin: 0 0 12px 0;
}
.portfolio-category {
display: inline-block;
font-size: 11px;
color: var(--portfolio-primary);
background-color: rgba(255, 165, 0, 0.1);
padding: 4px 8px;
border-radius: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Contact Section */
.contact-section {
margin-bottom: 80px;
}
.contact-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
align-items: start;
}
.contact-form {
background-color: var(--portfolio-card-bg);
padding: 32px;
border-radius: 12px;
box-shadow: 0 4px 15px var(--portfolio-shadow);
border: 1px solid rgba(255, 165, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
.contact-form .form-control {
width: 100%;
padding: 12px;
border: 1px solid rgba(255, 165, 0, 0.2);
border-radius: 8px;
font-size: 14px;
background-color: var(--portfolio-card-bg);
color: var(--portfolio-text);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.contact-form .form-control:focus {
border-color: var(--portfolio-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1);
}
.contact-form .form-control::placeholder {
color: var(--portfolio-text-lighter);
}
.send-message-btn {
width: 100%;
background-color: var(--portfolio-primary);
color: white;
border: none;
padding: 12px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.send-message-btn:hover {
background-color: var(--portfolio-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateX(5px);
}
.contact-icon {
width: 50px;
height: 50px;
background-color: rgba(255, 165, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-item:hover .contact-icon {
background-color: var(--portfolio-primary);
}
.contact-icon i {
color: var(--portfolio-primary);
font-size: 16px;
}
.contact-item:hover .contact-icon i {
color: #fff;
}
.contact-details h4 {
font-size: 14px;
font-weight: 600;
color: var(--portfolio-text);
margin: 0 0 4px 0;
}
.contact-details p {
font-size: 12px;
color: var(--portfolio-text-light);
margin: 0;
}
.social-links {
display: flex;
gap: 12px;
margin-top: 16px;
}
.social-link {
width: 40px;
height: 40px;
background-color: rgba(255, 165, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--portfolio-primary);
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-link:hover {
background-color: var(--portfolio-primary);
color: white;
transform: translateY(-2px);
}
/* Footer */
.footer {
background-color: var(--portfolio-card-bg);
border-top: 1px solid rgba(255, 165, 0, 0.1);
padding: 32px 0;
width: 75%;
margin-top: 80px;
margin-left: auto;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.footer-left p {
margin: 0;
color: var(--portfolio-text-light);
font-size: 12px;
}
.footer-left p a{
text-decoration: none;
color: var(--portfolio-primary);
}
.footer-nav {
display: flex;
gap: 24px;
}
.footer-nav a {
color: var(--portfolio-text-light);
text-decoration: none;
font-size: 12px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-nav a:hover {
color: var(--portfolio-primary);
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 36px;
height: 36px;
background-color: rgba(255, 165, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--portfolio-primary);
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-social a:hover {
background-color: var(--portfolio-primary);
color: white;
transform: translateY(-2px);
}
/* ====Right side==== */
.right-side {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
background-color: var(--portfolio-card-bg);
margin-top: 100px;
border-radius: 10px 0 0 10px;
right: 0;
padding: 0px 5px 0 5px;
position: fixed;
z-index: 100;
box-shadow: 2px 0 10px var(--portfolio-shadow)
}
.right-menubar {
list-style: none;
padding: 0;
}
.right-menubar li a {
width: 35px;
height: 35px;
margin: 20px 0;
color: var(--portfolio-primary);
background-color: rgba(255, 165, 0, 0.1);
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.right-menubar li a:hover,
.right-menubar li a:focus,
.right-menubar .active {
background-color: var(--portfolio-primary);
color: #fff;
}
.right-menubar .tooltip {
position: relative;
width: 35px;
height: 35px;
border-radius: 8px;
box-shadow: 0 4px 15px var(--portfolio-shadow);
}
.right-menubar .tooltip .tooltip-content::after {
content: "";
position: absolute;
top: 50%;
right: 0%;
margin-right: -20px;
margin-top: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent var(--portfolio-primary);
}
.right-menubar .tooltip .tooltip-content {
visibility: hidden;
background-color: var(--portfolio-primary);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px 12px;
position: absolute;
z-index: 1;
right: 45px;
}
.right-menubar .tooltip:hover .tooltip-content {
visibility: visible;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
position: fixed;
top: 16px;
left: 16px;
z-index: 1000;
background-color: var(--portfolio-primary);
border: none;
border-radius: 8px;
padding: 8px;
cursor: pointer;
flex-direction: column;
gap: 4px;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
}
.mobile-menu-toggle span {
width: 20px;
height: 2px;
background-color: #fff;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.darklight {
position: fixed;
z-index: 1001;
width: 50px;
padding: 5px;
border-radius: 5px 0 0 5px;
right: 0;
top: 16px;
background-color: var(--portfolio-card-bg);
box-shadow: 0 4px 15px var(--portfolio-shadow);
}
.darklight a {
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 6px;
background-color: var(--portfolio-card-bg);
color: var(--portfolio-primary);
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.darklight a:hover {
background-color: var(--portfolio-primary);
color: #fff;
}
.darklight a i.fa-sun {
display: inline-block;
transition: transform 0.5s ease;
animation: rotateIcon 2s linear infinite;
}
/* Keyframes for rotation */
@keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media(max-width:1024px) {
.portfolio-container {
flex-direction: column;
}
.left-sidebar {
width: 40%;
position: fixed;
left: -40%;
transition: left var(--duration-normal) var(--ease-standard);
z-index: 1000;
}
.left-sidebar.active {
left: 0;
}
.mobile-menu-toggle {
display: flex;
}
.main-content {
margin-left: 0;
width: 100%;
}
.services-grid,
.pricing-grid,
.testimonials-grid,
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer {
margin-left: 0;
width: 100%;
}
}
@media(max-width:992px) {
.hero-section {
flex-direction: column;
text-align: center;
align-items: center;
}
.hero-image {
order: -1;
flex: none;
}
.contact-content {
grid-template-columns: 1fr;
gap: 24px;
}
.pricing-card.recommended {
transform: translateY(35px);
}
.pricing-card:hover {
transform: translateY(20px);
}
.pricing-card.recommended:hover {
transform: translateY(20px);
}
.footer-content {
flex-direction: column;
text-align: center;
gap: 24px;
}
}
@media(max-width:768px) {
.left-sidebar.active {
width: 100%;
}
.main-content {
padding: 16px;
}
.hero-section {
margin-bottom: 60px;
min-height: auto;
}
.hero-image img {
width: 200px;
height: 240px;
}
.services-grid,
.pricing-grid,
.testimonials-grid,
.portfolio-grid {
grid-template-columns: 1fr;
}
.right-side {
bottom: 0;
margin: 0;
width: 100%;
border-radius: 10px 10px 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.right-menubar {
width: 100%;
display: flex;
flex-direction: row;
gap: 20px;
justify-content: space-around;
}
.right-menubar li a {
margin: 10px 0;
}
.right-menubar .tooltip .tooltip-content {
display: none;
}
.footer {
padding: 32px 0 100px 0;
}
.footer-nav{
flex-wrap: wrap;
justify-content: center;
}
}
.progress-fill.animate {
width: var(--target-width) !important;
}
/* custom cursor */
.cursor {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 2px solid var(--portfolio-primary);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999999;
}
.cursor .dot {
width: 8px;
height: 8px;
background: var(--portfolio-primary);
border-radius: 50%;
}
/* ====Scroll-to-top==== */
.scroll-to-top {
text-decoration: none;
position: fixed;
bottom: 60px;
right: 10px;
width: 50px;
height: 50px;
background: var(--portfolio-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
opacity: 1;
visibility: visible;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(255, 165, 0, 0.3) 0px 4px 15px;
}JavaScript Code:
document.addEventListener("DOMContentLoaded", function () {
// ===== Mobile menu functionality =====
const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
const leftSidebar = document.querySelector(".left-sidebar");
mobileMenuToggle.addEventListener("click", () => {
leftSidebar.classList.toggle("active");
mobileMenuToggle.classList.toggle("active");
});
// ===== Progress bar animations =====
function animateProgressBars() {
const progressFills = document.querySelectorAll(".progress-fill");
progressFills.forEach((fill) => {
const targetWidth = fill.getAttribute("data-width");
if (targetWidth) {
fill.style.setProperty("--target-width", targetWidth + "%");
// Add animation class after a small delay
setTimeout(() => {
fill.classList.add("animate");
fill.style.width = targetWidth + "%";
}, 100);
}
});
}
// Animate progress bars after a short delay
setTimeout(animateProgressBars, 500);
// ===== Dark/Light Mode Toggle =====
const toggleBtn = document.querySelector(".darkmode-toggle i");
const body = document.body;
// Load saved mode (if exists)
if (localStorage.getItem("theme") === "dark") {
body.classList.add("dark-mode");
toggleBtn.classList.remove("fa-sun");
toggleBtn.classList.add("fa-moon");
}
// Toggle dark/light mode
document.querySelector(".darkmode-toggle").addEventListener("click", (e) => {
e.preventDefault();
body.classList.toggle("dark-mode");
if (body.classList.contains("dark-mode")) {
toggleBtn.classList.remove("fa-sun");
toggleBtn.classList.add("fa-moon");
localStorage.setItem("theme", "dark");
} else {
toggleBtn.classList.remove("fa-moon");
toggleBtn.classList.add("fa-sun");
localStorage.setItem("theme", "light");
}
});
// ===== Section Smooth Scroll & Active Link =====
const sections = document.querySelectorAll("section[id]");
const navLinks = document.querySelectorAll(".right-menubar a");
navLinks.forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop - 100;
if (window.pageYOffset >= sectionTop) {
current = section.getAttribute("id");
}
});
navLinks.forEach((link) => {
link.classList.remove("active");
if (link.getAttribute("href") === "#" + current) {
link.classList.add("active");
}
});
});
// ===== Typing Effect =====
const texts = ["Front-end Developer ", "Web Designer ", "Freelancer "];
const typingElement = document.getElementById("typing");
let textIndex = 0;
let charIndex = 0;
let isDeleting = false;
let speed = 100;
function typeEffect() {
const currentText = texts[textIndex];
if (isDeleting) {
typingElement.textContent = currentText.substring(0, charIndex--);
speed = 50; // faster delete
} else {
typingElement.textContent = currentText.substring(0, charIndex++);
speed = 300; // typing speed
}
if (!isDeleting && charIndex === currentText.length) {
isDeleting = true;
speed = 1000; // pause at full text
} else if (isDeleting && charIndex < 0) {
isDeleting = false;
textIndex = (textIndex + 1) % texts.length;
speed = 200; // pause before next text
}
setTimeout(typeEffect, speed);
}
typeEffect();
// ===== Custom Cursor =====
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.style.top = e.clientY + "px";
cursor.style.left = e.clientX + "px";
});
// ====Scroll to top====
document.addEventListener("DOMContentLoaded", function () {
const scrollBtn = document.querySelector(".scroll-to-top");
// Show/hide button based on scroll position
window.addEventListener("scroll", () => {
if (window.pageYOffset > 300) {
// Show button after scrolling 300px
scrollBtn.classList.add("visible");
} else {
scrollBtn.classList.remove("visible");
}
});
// Smooth scroll to top when button is clicked
scrollBtn.addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
});
});
});
Responsive Portfolio Website Design
Responsiveness is one of the most critical factors in modern web design.
This website is designed using a mobile-first approach, ensuring that it works perfectly on:
- Mobile phones
- Tablets
- Laptops
- Large desktop screens
Responsive Techniques Used
- Flexible grid layouts
- Media queries
- Scalable font sizes
- Adaptive navigation
Because of this, the website performs well on all devices, which is essential for SEO and user retention.
JavaScript Functionality Overview
JavaScript is used only where necessary to keep the website fast.
Key JavaScript Features
- Dark mode toggle
- Mobile navigation menu
- Scroll-based animations
- Interactive UI elements
No heavy libraries are used, making the website load faster and score better on performance tools.
Conclusion
Building a strong online presence has become essential for developers, designers, and freelancers. A well-structured portfolio website HTML CSS project is no longer optional—it is a necessity. This modern portfolio website shows how clean design, responsive layout, and practical features can work together to create a professional digital identity.
Through this project, we explored how a responsive portfolio website can be built using simple yet powerful technologies like HTML, CSS, and JavaScript. Features such as smooth navigation, dark mode support, and organized content sections improve both user experience and visual appeal. More importantly, the code structure remains easy to understand, making it suitable for beginners as well as experienced developers.
If you are looking for a developer portfolio source code that is practical, customizable, and future-proof, this project is a solid starting point. Customize it, improve it, and make it truly yours. A well-crafted portfolio can open doors to job opportunities, freelance projects, and professional growth—sometimes even more effectively than a traditional resume.
