Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Create a Responsive Portfolio Website Using HTML CSS & JavaScript", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shasika Foliox Portfolio Website</title>
</head>
<body>
<!-- Header Section -->
<header>
<a href="" class="logo">Folio<span>x</span></a>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</nav>
<div class="socials">
<a href=""><ion-icon name="logo-facebook"></ion-icon></a>
<a href=""><ion-icon name="logo-instagram"></ion-icon></a>
<a href=""><ion-icon name="logo-github"></ion-icon></a>
<a href=""><ion-icon name="logo-twitter"></ion-icon></a>
</div>
<button id="menu"><ion-icon name="menu-outline"></ion-icon></button>
</header>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-text">
<span>Hello!</span>
<h1>
I'm <span>Shasika <br />Foliox</span>
</h1>
<p>Fullstack Web Developer</p>
<div class="btns">
<a href="#contact">Hire Me</a>
<a href="#portfolio">My Works</a>
</div>
</div>
<div class="hero-img">
<img src="./Images/hero.png" alt="hero image" />
</div>
</section>
<!-- Features -->
<section class="features">
<div class="feature-card">
<ion-icon name="cog-outline"></ion-icon>
<h2>Deeper Skillset</h2>
<p>
Dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt labore et dolore
</p>
</div>
<div class="feature-card">
<ion-icon name="briefcase-outline"></ion-icon>
<h2>Creative Work</h2>
<p>
Dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt labore et dolore
</p>
</div>
<div class="feature-card">
<ion-icon name="bar-chart-outline"></ion-icon>
<h2>Strong Dedication</h2>
<p>
Dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt labore et dolore
</p>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="section-header">
<div class="section-label">About Me</div>
<h2 class="section-title">
A Passionate Developer<br />Who Loves to Code
</h2>
</div>
<div class="about-content">
<div class="about-image">
<img src="./Images/about.png" alt="About" class="about-main-img" />
<div class="about-icon">
<ion-icon name="person-add-outline"></ion-icon>
</div>
<div class="experience-badge">
<div class="number">12</div>
<div class="text">Successful<br />Years</div>
</div>
</div>
<div class="bio">
<h3>My Bio</h3>
<p class="bio-text">
Dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida risus commodo viverra maecenas
accumsan lacus vel facilisis.
</p>
<div class="bio-details">
<div class="bio-item">
<label>Name</label>
<span>Shasika Foliox</span>
</div>
<div class="bio-item">
<label>Address</label>
<span>No. Brooklyn, NewYork</span>
</div>
<div class="bio-item">
<label>Email</label>
<span>info@james.com</span>
</div>
<div class="bio-item">
<label>DOB</label>
<span>Dec 21, 1990</span>
</div>
<div class="bio-item">
<label>Phone</label>
<span>+123 456 78990</span>
</div>
<div class="bio-item">
<label>Freelance</label>
<span>Available</span>
</div>
</div>
<a href="#" class="btn">Download CV</a>
</div>
</div>
</section>
<!-- Stats -->
<section class="stats">
<div class="stat-card">
<div class="stat-number">20</div>
<div class="stat-label">Digital<br />Products</div>
</div>
<div class="stat-card">
<div class="stat-number">280</div>
<div class="stat-label">Solved<br />Projects</div>
</div>
<div class="stat-card">
<div class="stat-number">3K</div>
<div class="stat-label">Total<br />Projects</div>
</div>
<div class="stat-card">
<div class="stat-number">8M</div>
<div class="stat-label">Lines<br />of Code</div>
</div>
</section>
<!-- Skills Section -->
<section class="skills" id="skills">
<div class="section-header">
<div class="section-label">Skills</div>
<h2 class="section-title">
I Work Hard to Improve My<br />Skills Regularly
</h2>
</div>
<div class="skills-grid">
<div class="skill-column">
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">Html</span>
<span class="skill-percentage">95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="95"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">Css</span>
<span class="skill-percentage">90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="90"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">JavaScript</span>
<span class="skill-percentage">85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="85"></div>
</div>
</div>
</div>
<div class="skill-column">
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">React</span>
<span class="skill-percentage">88%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="88"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">Vue</span>
<span class="skill-percentage">82%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="82"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-header">
<span class="skill-name">Php</span>
<span class="skill-percentage">80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" data-progress="80"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio" id="portfolio">
<div class="section-header">
<div class="section-label">Portfolio</div>
<h2 class="section-title">My Recent Works<br />That I've Done</h2>
</div>
<div class="portfolio-filters">
<button class="filter-btn active" data-filter="all">
All Projects
</button>
<button class="filter-btn" data-filter="web">Web Design</button>
<button class="filter-btn" data-filter="app">App Development</button>
<button class="filter-btn" data-filter="ui">UI/UX Design</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item" data-category="web">
<div class="portfolio-image">
<img src="./Images/ecommerce website.jpg" alt="Project 1" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>E-Commerce Website</h3>
<p>Web Design</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item" data-category="app">
<div class="portfolio-image">
<img src="./Images/app development.jpg" alt="Project 2" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>Fitness Mobile App</h3>
<p>App Development</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item" data-category="ui">
<div class="portfolio-image">
<img src="./Images/uiux design.jpg" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>Analytics Dashboard</h3>
<p>UI/UX Design</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item" data-category="web">
<div class="portfolio-image">
<img src="./Images/ecommerce website.jpg" alt="Project 4" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>Creative Portfolio</h3>
<p>Web Design</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item" data-category="app">
<div class="portfolio-image">
<img src="./Images/app development.jpg" alt="Project 5" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>Social Chat App</h3>
<p>App Development</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item" data-category="ui">
<div class="portfolio-image">
<img src="./Images/uiux design.jpg" alt="Project 6" />
<div class="portfolio-overlay">
<div class="portfolio-info">
<h3>Design System</h3>
<p>UI/UX Design</p>
<div class="portfolio-links">
<a href="#" class="portfolio-link"
><ion-icon name="link-outline"></ion-icon
></a>
<a href="#" class="portfolio-link"
><ion-icon name="eye-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="section-header">
<div class="section-label">Contact Me</div>
<h2 class="section-title">
Let's Work Together<br />On Your Next Project
</h2>
</div>
<div class="contact-content">
<div>
<iframe
width="100%"
height="100%"
style="border-radius: 15px; border: none"
src="https://maps.google.com/maps?width=100%25&height=600&hl=en&q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&t=&z=14&ie=UTF8&iwloc=B&output=embed"
></iframe>
</div>
<form class="contact-form" id="contactForm">
<div class="form-row">
<div class="form-group">
<input type="text" placeholder="Your Name" required />
</div>
<div class="form-group">
<input type="email" placeholder="Your Email" required />
</div>
</div>
<div class="form-row">
<div class="form-group">
<input type="text" placeholder="Phone Number" />
</div>
<div class="form-group">
<input type="text" placeholder="Subject" />
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" rows="6" required></textarea>
</div>
<button type="submit" class="btn btn-submit">Send Message</button>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<p>
© 2025 Shasika Foliox. All rights reserved. Designed with
<ion-icon name="heart-outline"></ion-icon> by Foliox
</p>
</footer>
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
<script src="script.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
font-family: "Poppins", sans-serif;
background: radial-gradient(circle at top left, #0f172a, #020617 60%);
overflow-x: hidden;
position: relative;
}
/* Glowing background orbs */
body::before,
body::after {
content: "";
position: fixed;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(180px);
opacity: 0.4;
z-index: -1;
}
/* Left blue glow */
body::before {
top: -100px;
left: -100px;
background: #2563eb;
}
/* Right pink/purple glow */
body::after {
bottom: -150px;
right: -100px;
background: #9333ea;
}
header {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10%;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 100;
}
.logo {
text-decoration: none;
color: white;
font-size: 2em;
font-weight: 600;
}
.logo span {
color: #00d9ff;
}
header nav li {
display: inline;
margin: 0 20px;
}
header nav li a {
text-decoration: none;
color: white;
text-transform: uppercase;
position: relative;
}
header nav li a::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: #00d9ff;
border-radius: 50px;
transition: all 0.5s ease;
transform: scale(0);
}
header nav li a:hover::before {
transform: scale(1);
}
header nav li a:hover {
color: #00d9ff;
}
.socials {
display: flex;
align-items: center;
gap: 15px;
}
.socials a {
font-size: 1.3em;
color: white;
transition: all 0.5s ease;
}
.socials a:hover {
transform: translateY(-5px) scale(1.2);
color: #00d9ff;
}
#menu {
background: transparent;
color: white;
width: 40px;
height: 30px;
font-size: 2em;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
display: none;
}
main {
padding: 0 10%;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-text > span {
font-size: 1.5em;
color: #00d9ff;
}
.hero-text h1 {
font-size: 5em;
color: white;
}
.hero-text h1 span {
color: #00d9ff;
}
.hero-text p {
color: white;
font-size: 1.5em;
}
.btns {
margin-top: 40px;
display: flex;
align-items: center;
gap: 10px;
}
.btns a {
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
color: white;
border-radius: 50px;
font-size: 1.1em;
font-weight: 600;
transition: all 0.5s ease;
}
.btns a:first-child {
background: #2563eb;
}
.btns a:last-child {
background: #00d9ff;
color: #1a1650;
}
.btns a:hover {
box-shadow: 0 10px 25px rgba(0, 217, 255, 0.3);
}
.btns a:hover:first-child {
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}
.hero-img {
width: 400px;
height: 400px;
border-radius: 50%;
background: #00b7ff;
overflow: hidden;
box-shadow: 0 0 50px rgba(0, 183, 255, 0.7);
animation: boxShadowGlow 1s linear infinite alternate;
}
.hero-img img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
@keyframes boxShadowGlow {
100% {
box-shadow: 0 0 100px rgba(0, 183, 255, 0.9);
}
}
/* Feature Cards */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
position: relative;
z-index: 1;
}
.feature-card {
background: rgba(37, 99, 235, 0.7);
padding: 40px 30px;
border-radius: 15px;
border: 1px solid rgba(0, 217, 255, 0.1);
transition: all 0.5s ease;
}
.feature-card:hover {
transform: translateY(-10px);
background: #9333ea;
}
.feature-card ion-icon {
font-size: 3em;
color: #00d9ff;
margin-bottom: 20px;
}
.feature-card h2 {
font-size: 20px;
margin-bottom: 15px;
color: white;
}
.feature-card p {
color: #b8b8d1;
font-size: 14px;
line-height: 1.6;
}
/* About Section */
.about {
position: relative;
z-index: 1;
margin-top: 100px;
}
.section-header {
text-align: center;
}
.section-label {
color: #00d9ff;
font-size: 2em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section-title {
font-size: 2.7em;
line-height: 1.3;
color: white;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image {
position: relative;
}
.about-main-img {
width: 100%;
border-radius: 15px;
}
.about-icon {
position: absolute;
top: 50%;
left: -40px;
transform: translateY(-50%);
background: #00d9ff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 217, 255, 0.4);
}
.about-icon ion-icon {
font-size: 35px;
color: white;
}
.experience-badge {
position: absolute;
bottom: -30px;
left: 50%;
width: 200px;
height: 100px;
transform: translateX(-50%);
background: rgba(72, 52, 139, 0.9);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.experience-badge .number {
font-size: 3em;
font-weight: 700;
color: #00d9ff;
}
.experience-badge .text {
font-size: 14px;
line-height: 1.4;
color: white;
}
.bio h3 {
font-size: 2em;
margin-bottom: 20px;
color: white;
}
.bio-text {
color: #b8b8d1;
line-height: 1.8;
margin-bottom: 30px;
}
.bio-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.bio-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.bio-item label {
color: #b8b8d1;
font-size: 14px;
}
.bio-item span {
color: #fff;
font-weight: 600;
}
.btn {
background: #00d9ff;
color: #1a1650;
padding: 12px 30px;
border: none;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
display: inline-block;
text-decoration: none;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 217, 255, 0.3);
}
/* Stats Section */
.stats {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
position: relative;
z-index: 1;
}
.stat-card {
background: rgba(72, 52, 139, 0.3);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(0, 217, 255, 0.1);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-number {
font-size: 3em;
font-weight: 700;
color: #00d9ff;
}
.stat-label {
color: #b8b8d1;
font-size: 1em;
}
/* Skills Section */
.skills {
position: relative;
margin-top: 100px;
z-index: 1;
}
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-top: 100px;
}
.skill-item {
margin-bottom: 30px;
color: white;
}
.skill-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.skill-name {
font-weight: 600;
}
.skill-percentage {
color: #00d9ff;
}
.skill-bar {
width: 100%;
height: 8px;
background: rgba(72, 52, 139, 0.5);
border-radius: 10px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: linear-gradient(90deg, #00d9ff 0%, #0099cc 100%);
border-radius: 10px;
}
/* Portfolio Section */
.portfolio {
margin-top: 100px;
position: relative;
z-index: 1;
}
.portfolio-filters {
display: flex;
justify-content: center;
gap: 15px;
margin: 40px 0 60px;
flex-wrap: wrap;
}
.filter-btn {
background: rgba(72, 52, 139, 0.3);
backdrop-filter: blur(10px);
color: #fff;
border: 1px solid rgba(0, 217, 255, 0.2);
padding: 12px 30px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
font-weight: 500;
}
.filter-btn:hover,
.filter-btn.active {
background: #00d9ff;
color: #1a1650;
border-color: #00d9ff;
transform: translateY(-2px);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.portfolio-item {
position: relative;
max-width: 100%;
height: 200px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.portfolio-image {
position: relative;
overflow: hidden;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-image img {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 217, 255, 0.95),
rgba(26, 22, 80, 0.95)
);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-info {
text-align: center;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.portfolio-item:hover .portfolio-info {
transform: translateY(0);
}
.portfolio-info h3 {
font-size: 1.5em;
margin-bottom: 10px;
color: white;
}
.portfolio-info p {
color: white;
font-size: 14px;
margin-bottom: 20px;
}
.portfolio-links {
display: flex;
gap: 15px;
justify-content: center;
}
.portfolio-link {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s;
}
.portfolio-link:hover {
background: #fff;
color: #1a1650;
transform: translateY(-3px);
}
/* Contact Section */
.contact {
margin-top: 100px;
position: relative;
z-index: 1;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 10px;
margin-top: 50px;
}
.contact-form {
background: rgba(72, 52, 139, 0.3);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 15px;
border: 1px solid rgba(0, 217, 255, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
width: 100%;
}
.form-group input,
.form-group textarea {
width: 100%;
background: rgba(26, 22, 80, 0.5);
border: 1px solid rgba(0, 217, 255, 0.2);
padding: 15px 20px;
border-radius: 10px;
color: #fff;
font-size: 14px;
transition: all 0.3s;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #00d9ff;
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #8888a8;
}
.form-group textarea {
resize: vertical;
min-height: 150px;
}
.btn-submit {
width: 100%;
margin-top: 10px;
}
/* Footer */
.footer {
background: rgba(26, 22, 80, 0.8);
padding: 60px 8% 30px;
margin-top: 100px;
text-align: center;
color: white;
}
/* Responsiveness */
@media (max-width: 1000px) {
header {
padding: 20px 5%;
}
main {
padding: 0 5%;
}
.stats {
grid-template-columns: repeat(2, 1fr);
}
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
#menu {
display: flex;
}
header nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
overflow: hidden;
max-height: 0;
transition: max-height 1s ease;
}
header nav li {
display: block;
margin: 20px;
text-align: center;
}
header nav li a {
color: #020617;
}
header nav.open {
max-height: 300px;
}
/* Hero Section */
.hero {
flex-direction: column-reverse;
justify-content: center;
padding-top: 100px;
padding-bottom: 20px;
}
.hero-img {
width: 90%;
}
.hero-text {
text-align: center;
margin-top: 50px;
}
.hero-text h1 {
font-size: 3em;
}
.btns {
justify-content: center;
}
/* Features Card */
.features {
grid-template-columns: 1fr;
margin-top: 100px;
}
.section-label {
font-size: 1.5em;
}
.section-title {
font-size: 2em;
}
/* About Section */
.about-content {
grid-template-columns: 1fr;
}
.bio-details {
grid-template-columns: 1fr;
}
/* Stats Section */
.stats {
grid-template-columns: 1fr;
}
.stat-card {
flex-direction: column;
}
/* Skill Section */
.skills-grid {
grid-template-columns: 1fr;
}
/* Portfolio Section */
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-filters {
gap: 10px;
}
.filter-btn {
padding: 10px 20px;
font-size: 13px;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form {
padding: 30px 20px;
}
}
@media (max-width: 400px) {
.socials {
display: none;
}
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
const menu = document.getElementById("menu");
const nav = document.querySelector("header nav");
menu.addEventListener("click", (e) => {
e.preventDefault();
nav.classList.toggle("open");
});
// Animate skill bars on scroll
const observerOptions = {
threshold: 0.5,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const progressBars = entry.target.querySelectorAll(".skill-progress");
progressBars.forEach((bar) => {
const progress = bar.getAttribute("data-progress");
bar.style.width = progress + "%";
});
}
});
}, observerOptions);
const skillsSection = document.querySelector(".skills");
if (skillsSection) {
observer.observe(skillsSection);
}
// Portfolio Filter
const filterBtns = document.querySelectorAll(".filter-btn");
const portfolioItems = document.querySelectorAll(".portfolio-item");
filterBtns.forEach((btn) => {
btn.addEventListener("click", () => {
const filter = btn.getAttribute("data-filter");
filterBtns.forEach((b) => b.classList.remove("active"));
btn.classList.add("active");
portfolioItems.forEach((item) => {
if (filter === "all" || item.getAttribute("data-category") === filter) {
item.style.display = "block";
setTimeout(() => {
item.style.opacity = "1";
item.style.transform = "scale(1)";
}, 10);
} else {
item.style.opacity = "0";
item.style.transform = "scale(0.8)";
setTimeout(() => {
item.style.display = "none";
}, 300);
}
});
});
});
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a Responsive Portfolio Website Using HTML CSS & JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.