Build a Portfolio Website Using HTML CSS and Javascript
Hello Coders, Today in this blog you will learn How to Build a Portfolio Website Using HTML CSS and Javascript. A personal portfolio website – its like a personal web office where you can display all your skills, experience, projects & achievements in one spot. Its used by all sorts of folks – developers, designers, writers, photographers, students & freelancers looking to establish a solid on-line presence
That makes it a great tool for personal branding and giving your career a boost From an SEO point of view, having a portfolio website can really help you get noticed on-line. By getting the keywords right, making sure its really quick & easy to load on mobiles & getting the content just right – you can get higher up the search engine rankings which in turn makes it more likely that recruiters, clients & collaborators will find you.
In todays ultra competitive digital landscape having a personal portfolio website is pretty much a must. Not only does it give you a professional platform to showcase your work but it also helps you build credibility & trust with others. Whether you’re a student or a professional, a portfolio website is like your digital CV – its the thing that sets you apart from the rest & makes people take notice
What You’ll Learn:
- How to structure the Portfolio Website with HTML
- How to style the Portfolio Website using CSS
- How to make the Portfolio Website functional with JavaScript
Step 1: Structure the Portfolio Website with HTML
Start by creating a new file called (index.html). Then, copy and paste the HTML code provided into this file. Remember to save it with the (.html) extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Personal Portfolio of a Creative Developer. Showcasing projects, skills, and experience.">
<title>Portfolio | Creative Developer</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container nav-container">
<a href="#" class="logo">Alex<span class="dot">.</span>Dev</a>
<ul class="nav-links">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link btn-featured">Contact</a></li>
</ul>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<header id="home" class="hero">
<div class="container hero-container">
<div class="hero-content fade-in-up">
<span class="greeting">Hello, I'm Alex</span>
<h1 class="headline">Building <span class="gradient-text">Digital Experiences</span> that Matter.</h1>
<p class="sub-headline">I'm a passionate frontend developer and UI/UX enthusiast specialized in building
stunning, responsive, and user-centric websites.</p>
<div class="hero-btns">
<a href="#projects" class="btn btn-primary">View My Work</a>
<a href="#contact" class="btn btn-secondary">Contact Me <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="hero-visual fade-in-up delay-200">
<div class="abstract-shape shape-1"></div>
<div class="abstract-shape shape-2"></div>
<div class="code-card glass-card">
<div class="card-header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<div class="card-body">
<code>
<span class="keyword">const</span> <span class="variable">developer</span> = {<br>
name: <span class="string">'Alex'</span>,<br>
skills: [<span class="string">'HTML'</span>, <span class="string">'CSS'</span>, <span class="string">'JS'</span>],<br>
hardWorker: <span class="boolean">true</span><br>
};
</code>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="about section-padding">
<div class="container">
<div class="section-header">
<h2 class="section-title">About Me</h2>
<div class="line"></div>
</div>
<div class="about-content">
<div class="about-image reveal-left">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
alt="Profile Picture">
<div class="experience-badge glass-card">
<span class="years">5+</span>
<span class="text">Years of<br>Experience</span>
</div>
</div>
<div class="about-text reveal-right">
<h3>Creative Code Crafter</h3>
<p>I don't just write code; I create digital art. My journey began 5 years ago when I decided to
blend my love for design with technical logic. Since then, I've worked on numerous projects
ranging from personal portfolios to complex e-commerce platforms.</p>
<p>I believe in clean code, accessibility, and pixel-perfect design. When I'm not coding, you can
find me exploring new design trends or contributing to open-source communities.</p>
<div class="stats-grid">
<div class="stat-item">
<h4>50+</h4>
<p>Projects</p>
</div>
<div class="stat-item">
<h4>30+</h4>
<p>Happy Clients</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills section-padding bg-darker">
<div class="container">
<div class="section-header center-text">
<h2 class="section-title">My Tech Stack</h2>
<div class="line mx-auto"></div>
<p class="section-desc">Tools and technologies I use to bring ideas to life.</p>
</div>
<div class="skills-grid">
<!-- Skill Card 1 -->
<div class="skill-card glass-card reveal-up">
<i class="fab fa-html5 skill-icon html-color"></i>
<h3>HTML5</h3>
<p>Semantic Structure</p>
</div>
<!-- Skill Card 2 -->
<div class="skill-card glass-card reveal-up delay-100">
<i class="fab fa-css3-alt skill-icon css-color"></i>
<h3>CSS3</h3>
<p>Responsive Layouts</p>
</div>
<!-- Skill Card 3 -->
<div class="skill-card glass-card reveal-up delay-200">
<i class="fab fa-js skill-icon js-color"></i>
<h3>JavaScript</h3>
<p>Interactive Logic</p>
</div>
<!-- Skill Card 4 -->
<div class="skill-card glass-card reveal-up delay-300">
<i class="fab fa-react skill-icon react-color"></i>
<h3>React</h3>
<p>Modern UI Library</p>
</div>
<!-- Skill Card 5 -->
<div class="skill-card glass-card reveal-up delay-400">
<i class="fab fa-git-alt skill-icon git-color"></i>
<h3>Git</h3>
<p>Version Control</p>
</div>
<!-- Skill Card 6 -->
<div class="skill-card glass-card reveal-up delay-500">
<i class="fab fa-figma skill-icon figma-color"></i>
<h3>Figma</h3>
<p>UI/UX Design</p>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects section-padding">
<div class="container">
<div class="section-header">
<h2 class="section-title">Featured Projects</h2>
<div class="line"></div>
</div>
<div class="projects-grid">
<!-- Project 1 -->
<div class="project-card reveal-up">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1481487484168-9b930d5b7960?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Project 1">
<div class="overlay">
<a href="#" class="btn-icon"><i class="fas fa-link"></i></a>
<a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>E-Commerce Dashboard</h3>
<p>A comprehensive dashboard for managing online stores with real-time analytics.</p>
<div class="tags">
<span>React</span>
<span>Node.js</span>
<span>MongoDB</span>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card reveal-up delay-100">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Project 2">
<div class="overlay">
<a href="#" class="btn-icon"><i class="fas fa-link"></i></a>
<a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>Finance Tracker App</h3>
<p>Mobile-first application to track personal expenses and visualize spending habits.</p>
<div class="tags">
<span>Vue.js</span>
<span>Firebase</span>
<span>Chart.js</span>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card reveal-up delay-200">
<div class="project-img">
<img src="https://images.unsplash.com/photo-1509198397868-475647b2a1e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1547&q=80"
alt="Project 3">
<div class="overlay">
<a href="#" class="btn-icon"><i class="fas fa-link"></i></a>
<a href="#" class="btn-icon"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>Gaming Portfolio</h3>
<p>A high-performance landing page for a gaming community with 3D elements.</p>
<div class="tags">
<span>Three.js</span>
<span>GSAP</span>
<span>WebGL</span>
</div>
</div>
</div>
</div>
<div class="center-btn">
<a href="#" class="btn btn-outline">View All Projects</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact section-padding bg-darker">
<div class="container">
<div class="contact-wrapper glass-card reveal-up">
<div class="contact-info">
<h2>Let's work together!</h2>
<p>Have a project in mind trying to solve a problem? I'd love to hear about it.</p>
<ul class="contact-details">
<li>
<i class="fas fa-envelope"></i>
<span>hello@alexdev.com</span>
</li>
<li>
<i class="fas fa-phone"></i>
<span>+1 (555) 123-4567</span>
</li>
<li>
<i class="fas fa-map-marker-alt"></i>
<span>San Francisco, CA</span>
</li>
</ul>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="contact-form">
<form>
<div class="input-group">
<input type="text" placeholder="Name" required>
</div>
<div class="input-group">
<input type="email" placeholder="Email" required>
</div>
<div class="input-group">
<textarea placeholder="Message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary full-width">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2024 Alex.Dev. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling Portfolio Website with CSS
Create a new file called (style.css) and copy the provided code into this file. Don’t forget to save it with the (.css) extension.
/* Variable Definitions */
:root {
--bg-color: #0f172a;
--bg-color-2: #1e293b;
--text-color: #f8fafc;
--text-muted: #94a3b8;
--primary-color: #6366f1; /* Indigo */
--secondary-color: #ec4899; /* Pink */
--accent-color: #06b6d4; /* Cyan */
--glass-bg: rgba(30, 41, 59, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
--font-heading: 'Outfit', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--transition: all 0.3s ease;
--container-width: 1200px;
}
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
/* Utility Classes */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 2rem;
}
.section-padding {
padding: 5rem 0;
}
.bg-darker {
background-color: var(--bg-color-2);
}
.center-text {
text-align: center;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.line {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
margin-bottom: 2rem;
border-radius: 2px;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.8rem 2rem;
border-radius: 50px;
font-family: var(--font-heading);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}
.btn-secondary {
background: transparent;
color: var(--text-color);
border: 1px solid var(--text-muted);
margin-left: 1rem;
}
.btn-secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-outline {
border: 2px solid var(--primary-color);
color: var(--primary-color);
background: transparent;
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
.full-width {
width: 100%;
text-align: center;
}
/* Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 1.5rem 0;
transition: var(--transition);
backdrop-filter: blur(10px);
background: transparent;
}
.navbar.scrolled {
background: rgba(15, 23, 42, 0.9);
padding: 1rem 0;
border-bottom: 1px solid var(--glass-border);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-family: var(--font-heading);
font-weight: 700;
}
.logo .dot {
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2.5rem;
}
.nav-link {
font-weight: 500;
position: relative;
opacity: 0.8;
}
.nav-link:hover, .nav-link.active {
opacity: 1;
color: var(--primary-color);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.btn-featured {
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1.5rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-featured:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.menu-toggle {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
background-color: var(--text-color);
margin: 5px 0;
transition: var(--transition);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 80px; /* spacing for fixed nav */
}
.hero-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.hero-content {
flex: 1;
max-width: 600px;
z-index: 2;
}
.greeting {
font-size: 1.2rem;
color: var(--secondary-color);
font-weight: 600;
margin-bottom: 1rem;
display: block;
}
.headline {
font-size: 4.5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.gradient-text {
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sub-headline {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 500px;
}
/* Hero Visual & Decoration */
.hero-visual {
flex: 1;
position: relative;
display: flex;
justify-content: center;
z-index: 1;
}
.abstract-shape {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: -1;
opacity: 0.5;
}
.shape-1 {
width: 300px;
height: 300px;
background: var(--primary-color);
top: -50px;
right: -50px;
animation: float 6s ease-in-out infinite;
}
.shape-2 {
width: 250px;
height: 250px;
background: var(--secondary-color);
bottom: -50px;
left: -50px;
animation: float 8s ease-in-out infinite reverse;
}
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.code-card {
width: 350px;
padding: 1.5rem;
transform: rotate(-5deg);
transition: var(--transition);
}
.code-card:hover {
transform: rotate(0) scale(1.02);
}
.card-header {
display: flex;
gap: 8px;
margin-bottom: 1rem;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.red { background: #ef4444; }
.yellow { background: #eab308; }
.green { background: #22c55e; }
.card-body code {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9rem;
color: var(--text-muted);
display: block;
line-height: 1.5;
}
.keyword { color: var(--secondary-color); }
.string { color: var(--accent-color); }
.variable { color: #facc15; }
.boolean { color: var(--primary-color); }
/* About Section */
.about {
position: relative;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
position: relative;
}
.about-image img {
border-radius: 20px;
width: 100%;
object-fit: cover;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.experience-badge {
position: absolute;
bottom: -20px;
right: -20px;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 16px;
}
.experience-badge .years {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
}
.experience-badge .text {
font-size: 0.8rem;
text-align: center;
margin-top: 5px;
}
.stats-grid {
display: flex;
gap: 3rem;
margin-top: 2rem;
}
.stat-item h4 {
font-size: 2rem;
color: var(--accent-color);
margin-bottom: 0px;
}
.stat-item p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Skills Section */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.skill-card {
padding: 2rem;
text-align: center;
transition: var(--transition);
}
.skill-card:hover {
transform: translateY(-10px);
border-color: var(--primary-color);
}
.skill-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.html-color { color: #e34f26; }
.css-color { color: #264de4; }
.js-color { color: #f7df1e; }
.react-color { color: #61dbfb; }
.git-color { color: #f05032; }
.figma-color { color: #f24e1e; }
.skill-card h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.skill-card p {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Projects Section */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
}
.project-card {
background: var(--bg-color-2);
border-radius: 20px;
overflow: hidden;
transition: var(--transition);
border: 1px solid transparent;
}
.project-card:hover {
transform: translateY(-10px);
border-color: var(--glass-border);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.project-img {
position: relative;
overflow: hidden;
height: 220px;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .project-img img {
transform: scale(1.1);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.8);
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
opacity: 0;
transition: var(--transition);
}
.project-card:hover .overlay {
opacity: 1;
}
.btn-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--bg-color);
font-size: 1.2rem;
transition: var(--transition);
}
.btn-icon:hover {
background: var(--primary-color);
color: white;
}
.project-info {
padding: 1.5rem;
}
.project-info h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.project-info p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tags span {
font-size: 0.8rem;
background: rgba(99, 102, 241, 0.1);
color: var(--primary-color);
padding: 0.3rem 0.8rem;
border-radius: 20px;
}
.center-btn {
display: flex;
justify-content: center;
}
/* Contact Section */
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
overflow: hidden;
}
.contact-info {
padding: 3rem;
background: rgba(99, 102, 241, 0.1);
position: relative;
}
.contact-info h2 {
margin-bottom: 1rem;
}
.contact-info p {
color: var(--text-muted);
margin-bottom: 2rem;
}
.contact-details li {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.contact-details i {
color: var(--primary-color);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary-color);
color: white;
}
.contact-form {
padding: 3rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 1rem;
background: var(--bg-color);
border: 1px solid var(--text-muted);
border-radius: 8px;
color: white;
font-family: var(--font-body);
outline: none;
transition: var(--transition);
}
.input-group input:focus, .input-group textarea:focus {
border-color: var(--primary-color);
}
/* Footer */
.footer {
padding: 2rem 0;
text-align: center;
color: var(--text-muted);
font-size: 0.9rem;
border-top: 1px solid var(--glass-border);
}
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.reveal-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s ease;
}
.reveal-up {
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease;
}
.active-reveal {
opacity: 1;
transform: translate(0);
}
/* Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
/* Responsive Media Queries */
@media (max-width: 992px) {
.container {
padding: 0 1.5rem;
}
.headline {
font-size: 3.5rem;
}
.hero-container {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
gap: 3rem;
}
.hero-content {
max-width: 100%;
}
.sub-headline {
margin: 0 auto 2rem;
}
.hero-btns {
justify-content: center;
}
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.contact-wrapper {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 70%;
background: var(--bg-color-2);
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.4s ease;
box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}
.nav-links.active {
right: 0;
}
.menu-toggle {
display: block;
z-index: 1001;
}
.menu-toggle.active .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.menu-toggle.active .bar:nth-child(2) {
opacity: 0;
}
.menu-toggle.active .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.headline {
font-size: 2.5rem;
}
.about-image {
max-width: 400px;
margin: 0 auto;
}
}
Step 3: Adding Portfolio Website JavaScript Functionality
Create a new file named (script.js), then copy and paste the JavaScript code into this file. Be sure to save it with the (.js) extension.
document.addEventListener('DOMContentLoaded', () => {
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobile-menu');
const navLinks = document.querySelector('.nav-links');
const navLinksItems = document.querySelectorAll('.nav-link');
mobileMenuBtn.addEventListener('click', () => {
mobileMenuBtn.classList.toggle('active');
navLinks.classList.toggle('active');
});
// Close menu when clicking a link
navLinksItems.forEach(link => {
link.addEventListener('click', () => {
mobileMenuBtn.classList.remove('active');
navLinks.classList.remove('active');
});
});
// Sticky Navbar
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Active Link on Scroll
const sections = document.querySelectorAll('section, header');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});
navLinksItems.forEach(li => {
li.classList.remove('active');
if (li.getAttribute('href').includes(current)) {
li.classList.add('active');
}
});
});
// Intersection Observer for Scroll Animations
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active-reveal');
if (entry.target.classList.contains('fade-in-up')) {
entry.target.classList.add('visible');
}
observer.unobserve(entry.target);
}
});
}, observerOptions);
const revealElements = document.querySelectorAll('.reveal-up, .reveal-left, .reveal-right, .fade-in-up');
revealElements.forEach(el => observer.observe(el));
});
Final Conclusion
That’s everything! You have now successfully built a portfolio website using HTML, CSS, and Javascript. If your code is not working as expected and you’re encountering issues, don’t be worried as there is help available. This download is free, and the system will automatically download a .zip file. After downloading, you can immediately extract the .zip file and you can start by opening the folder containing the project.
Happy Coding!
