Okay, let's build a high-quality, responsive portfolio website with the features you described. We'll start with the HTML structure, then add CSS for styling and layout (including the luxury palette, floating navbar, responsive design, and interactive elements), and finally JavaScript for the mobile menu functionality. My Portfolio

Welcome to My Portfolio

Showcasing my journey in web development.

My Skills

HTML5

Structuring web content.

CSS3

Styling for visual appeal.

JavaScript

Adding interactivity.

React

Building dynamic UIs.

Node.js

Server-side logic.

Databases

Managing data effectively.

My Work

Find Me / Contact Me

Feel free to reach out!

your.email@example.com

GitHub

/* --- Global Styles & Variables --- */ :root { --bg-dark: #0a0f18; /* Very dark blue/black */ --primary: #1c2541; /* Dark slate blue */ --secondary: #3a506b; /* Lighter blue-gray */ --accent1: #5bc0be; /* Teal accent */ --accent2: #f4d35e; /* Gold/Yellow accent */ --text-light: #edf2f4; /* Off-white text */ --text-dark: #0b132b; --navbar-height: 60px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); /* Offset for fixed navbar */ } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-dark); color: var(--text-light); line-height: 1.6; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } h1, h2, h3, h4 { line-height: 1.2; margin-bottom: 1rem; } h2 { font-size: 2.5rem; text-align: center; color: var(--accent1); margin-bottom: 3rem; } section { padding: 6rem 0; } a { text-decoration: none; color: var(--accent1); transition: color 0.3s ease; } a:hover { color: var(--accent2); } ul { list-style: none; } /* --- Navbar --- */ .navbar { background-color: rgba(28, 37, 65, 0.9); /* var(--primary) with transparency */ color: var(--text-light); position: fixed; top: 0; left: 0; width: 100%; height: var(--navbar-height); z-index: 1000; transition: background-color 0.3s ease; backdrop-filter: blur(5px); /* Frosted glass effect */ } .navbar .container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .navbar .logo { font-size: 1.5rem; font-weight: bold; color: var(--accent2); } .navbar .nav-links { display: flex; } .navbar .nav-links li { margin-left: 20px; } .navbar .nav-links a { color: var(--text-light); padding: 5px 10px; border-radius: 4px; } .navbar .nav-links a:hover, .navbar .nav-links a.active { /* Add 'active' class with JS if needed */ background-color: var(--accent1); color: var(--primary); } .menu-btn { display: none; /* Hidden by default */ background: none; border: none; color: var(--text-light); font-size: 1.8rem; cursor: pointer; } /* --- Hero Section --- */ .hero { background: linear-gradient(rgba(11, 19, 43, 0.7), rgba(11, 19, 43, 0.9)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover; /* Example background */ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--text-light); } .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; color: var(--accent2); } .hero p { font-size: 1.5rem; color: var(--accent1); } /* --- Skills Section --- */ .skills-section { background-color: var(--primary); } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; } .skill-item { background-color: var(--secondary); padding: 2rem 1rem; border-radius: 8px; border: 3px solid transparent; transition: transform 0.3s ease, border-color 0.3s ease; } .skill-item:hover { transform: translateY(-10px); border-color: var(--accent1); } .skill-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--accent1); transition: color 0.3s ease; } .skill-item:hover .skill-icon { color: var(--accent2); } .skill-item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text-light); } .skill-item p { font-size: 0.9rem; color: var(--text-light); opacity: 0.8; } /* --- Work Section --- */ .work-section { background: linear-gradient(rgba(11, 19, 43, 0.95), rgba(11, 19, 43, 0.98)), url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80') no-repeat center center/cover; /* Space background */ position: relative; /* Needed for absolute positioning of popups */ } .timeline { position: relative; padding: 2rem 0; display: flex; justify-content: space-around; /* Evenly space items */ align-items: center; } .timeline-line { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background-color: var(--secondary); z-index: 1; } .timeline-item { position: relative; /* Context for the popup */ z-index: 2; display: flex; /* Align icon wrapper */ justify-content: center; /* Center icon wrapper */ } .timeline-icon-wrapper { background-color: var(--accent1); color: var(--primary); width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; border: 3px solid var(--primary); } .timeline-icon { font-size: 1.8rem; } .timeline-item:hover .timeline-icon-wrapper { background-color: var(--accent2); transform: scale(1.1); } .timeline-popup { position: absolute; bottom: 80px; /* Position above the icon */ left: 50%; transform: translateX(-50%); background-color: var(--secondary); color: var(--text-light); padding: 1rem; border-radius: 8px; width: 250px; /* Adjust width as needed */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); text-align: left; z-index: 3; } .timeline-popup::after { /* Arrow pointing down */ content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 10px 0 10px; border-style: solid; border-color: var(--secondary) transparent transparent transparent; } .timeline-item:hover .timeline-popup { opacity: 1; visibility: visible; bottom: 90px; /* Move slightly up on hover */ } .timeline-popup h4 { margin-bottom: 0.5rem; color: var(--accent2); } .timeline-popup p { font-size: 0.9rem; line-height: 1.4; } /* --- Contact Section --- */ .contact-section { background-color: var(--primary); text-align: center; } .contact-info p { margin-bottom: 1rem; font-size: 1.1rem; } .contact-info i { margin-right: 10px; color: var(--accent1); width: 20px; /* Align icons */ text-align: center; } /* --- Footer --- */ .footer { background-color: var(--bg-dark); color: var(--secondary); text-align: center; padding: 2rem 0; border-top: 1px solid var(--primary); } /* --- Responsive Design --- */ @media (max-width: 768px) { h2 { font-size: 2rem; } .navbar .container { padding: 0 15px; } .menu-btn { display: block; /* Show menu button */ } .navbar .nav-links { display: none; /* Hide links by default */ position: absolute; top: var(--navbar-height); left: 0; width: 100%; background-color: var(--primary); flex-direction: column; text-align: center; padding-bottom: 10px; border-top: 1px solid var(--secondary); } .navbar .nav-links.active { display: flex; /* Show links when active */ } .navbar .nav-links li { margin: 15px 0; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.2rem; } .skills-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .skill-item { padding: 1.5rem 0.5rem; } .timeline { flex-direction: column; /* Stack items vertically */ align-items: flex-start; /* Align to the left */ padding: 2rem 1rem; /* Adjust padding */ } .timeline-line { left: 30px; /* Position line to the left */ top: 0; bottom: 0; width: 4px; height: 100%; transform: none; /* Reset transform */ } .timeline-item { width: 100%; margin-bottom: 4rem; /* Space between vertical items */ padding-left: 60px; /* Space for the icon */ display: block; /* Reset flex */ } .timeline-icon-wrapper { position: absolute; left: 0; top: 0; /* Align icon with the top of the item */ transform: translateX(-50%); /* Center on the line */ margin-left: 30px; /* Align with the line's position */ } .timeline-popup { position: relative; /* Change from absolute */ bottom: auto; left: auto; transform: none; opacity: 1; /* Always visible on mobile */ visibility: visible; width: auto; /* Adjust width */ margin-top: 1rem; /* Space below icon */ box-shadow: none; } .timeline-popup::after { display: none; /* Hide arrow on mobile */ } .timeline-item:hover .timeline-icon-wrapper { transform: translateX(-50%) scale(1.1); /* Adjust hover transform */ } .timeline-item:hover .timeline-popup { bottom: auto; /* Keep position relative */ } } @media (max-width: 480px) { .skills-grid { grid-template-columns: 1fr 1fr; /* Two columns on small screens */ } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } } const menuBtn = document.getElementById('menu-btn'); const navLinks = document.getElementById('nav-links'); const navbar = document.querySelector('.navbar'); const navLinksAnchors = navLinks.querySelectorAll('a'); // Toggle mobile menu menuBtn.addEventListener('click', () => { navLinks.classList.toggle('active'); // Toggle icon const icon = menuBtn.querySelector('i'); if (navLinks.classList.contains('active')) { icon.classList.remove('fa-bars'); icon.classList.add('fa-times'); } else { icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } }); // Close mobile menu when a link is clicked navLinksAnchors.forEach(link => { link.addEventListener('click', () => { if (navLinks.classList.contains('active')) { navLinks.classList.remove('active'); // Reset icon const icon = menuBtn.querySelector('i'); icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } }); }); // Optional: Change navbar background on scroll // window.addEventListener('scroll', () => { // if (window.scrollY > 50) { // navbar.style.backgroundColor = 'var(--primary)'; // Solid background on scroll // navbar.style.backdropFilter = 'none'; // } else { // navbar.style.backgroundColor = 'rgba(28, 37, 65, 0.9)'; // Transparent background at top // navbar.style.backdropFilter = 'blur(5px)'; // } // }); // Close menu if clicked outside (optional but good UX) document.addEventListener('click', (event) => { const isClickInsideNav = navbar.contains(event.target); const isMenuOpen = navLinks.classList.contains('active'); if (!isClickInsideNav && isMenuOpen) { navLinks.classList.remove('active'); const icon = menuBtn.querySelector('i'); icon.classList.remove('fa-times'); icon.classList.add('fa-bars'); } }); This sets up the basic structure, styling, and functionality. You can now view the portfolio structure. Remember to replace placeholder content like "MyName", email, social links, and project details with your own information. The background images are placeholders from Unsplash; you might want to choose your own.

My Skills

HTML5

CSS3

JavaScript

React

Node.js

Databases

My Work

Project Alpha

Project Beta

Project Gamma

Project Delta

Find Me / Contact Me