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 "Build 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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<!-- AOS Animation Library CDN -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<!-- Tailwind CSS CDN for utility classes -->
<script src="https://cdn.tailwindcss.com"></script>
<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>
</head>
<body class="overflow-x-hidden">
<!-- Header/Navigation -->
<header
class="sticky top-0 z-50 bg-opacity-70 backdrop-blur-lg bg-[#0d1117] shadow-lg px-[5%] py-[10px]" data-aos="fade-down" data-aos-duration="2000"
>
<nav
class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"
>
<a href="" class="text-2xl font-bold text-white">Alan <span class="text-[#58a6ff]">Smith</span></a>
<div class="hidden md:flex space-x-6 text-gray-300">
<a href="#about" class="hover:text-white transition duration-300"
>About</a
>
<a href="#skills" class="hover:text-white transition duration-300"
>Skills</a
>
<a href="#projects" class="hover:text-white transition duration-300"
>Projects</a
>
<a href="#contact" class="hover:text-white transition duration-300"
>Contact</a
>
</div>
<!-- Mobile Menu Button -->
<button
class="md:hidden text-gray-300 hover:text-white transition duration-300"
id="menu-button"
>
<ion-icon name="menu-outline" class="h-7 w-7"></ion-icon>
</button>
</nav>
</header>
<!-- Mobile Navigation Menu -->
<div
id="mobile-menu"
class="fixed top-0 right-0 h-full w-full bg-gray-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50"
>
<div class="p-8">
<div class="flex justify-end mb-8">
<button
id="close-button"
class="text-white hover:text-gray-300 focus:outline-none"
>
<ion-icon name="close-outline" class="w-7 h-7"></ion-icon>
</button>
</div>
<ul
class="text-2xl text-white font-medium space-y-6 text-center"
id="mobileNav"
>
<li>
<a
href=""
class="block hover:text-indigo-400 transition-colors duration-300"
>Home</a
>
</li>
<li>
<a
href="#about"
class="block hover:text-indigo-400 transition-colors duration-300"
>About</a
>
</li>
<li>
<a
href="#skills"
class="block hover:text-indigo-400 transition-colors duration-300"
>Skills</a
>
</li>
<li>
<a
href="#projects"
class="block hover:text-indigo-400 transition-colors duration-300"
>Projects</a
>
</li>
<li>
<a
href="#contact"
class="block hover:text-indigo-400 transition-colors duration-300"
>Contact</a
>
</li>
</ul>
</div>
</div>
<!-- Hero Section -->
<section
class="hero-bg hero-section flex items-center justify-center text-center py-24 sm:py-32 md:py-22"
>
<div class="max-w-4xl mx-auto px-4">
<div class="mb-8 w-[230px] h-[230px] rounded-full p-[5px] mx-auto overflow-hidden glowing-border" data-aos="fade-right" data-aos-duration="2000">
<img src="./image/user.jpg" class="w-full h-full rounded-full object-cover" alt="">
</div>
<div data-aos="fade-left" data-aos-duration="2000">
<h1
class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-tight mb-4"
>
Hi, I'm <span class="text-[#58a6ff]">Alan Smith</span>.
</h1>
<p
class="text-lg sm:text-xl md:text-2xl text-gray-300 my-8 animation-delay-300"
>
A passionate Frontend Developer building beautiful and responsive web
applications.
</p>
<a
href="#projects"
class="bg-[#58a6ff] hover:bg-[#4895e6] text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg animation-delay-600"
>
View My Work
</a>
</div>
</div>
</section>
<!-- About Me Section -->
<section id="about" class="py-16 sm:py-24 max-w-7xl mx-auto">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-16 text-white" data-aos="fade-up" data-aos-duration="2000">
About <span class="text-[#58a6ff]">Me</span>
</h2>
<div
class="flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-16"
>
<div
class="flex-shrink-0 w-48 h-48 sm:w-64 sm:h-64 rounded-full overflow-hidden border-4 border-[#30363d] shadow-lg hover:scale-105" data-aos="fade-right" data-aos-duration="2000"
>
<img
src="./image/user.jpg"
alt="John Doe"
class="w-full h-full object-cover"
/>
</div>
<div class="text-center md:text-left" data-aos="fade-left" data-aos-duration="2000" data-aos-delay="500">
<p class="text-gray-300 text-lg mb-4 max-w-4xl">
I am a Frontend Developer with a passion for creating elegant and
efficient user interfaces. With a strong foundation in HTML, CSS,
and JavaScript, I enjoy turning ideas into reality through clean
and semantic code.
</p>
<p class="text-gray-300 text-lg max-w-4xl">
My goal is to build exceptional digital experiences that are not
only visually stunning but also highly functional and accessible.
</p>
<div class="mt-10 text-3xl space-x-4 group text-white">
<a href="#" class="transition duration-300 hover:text-[#58a6ff]"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#" class="transition duration-300 hover:text-[#58a6ff]"><ion-icon name="logo-github"></ion-icon></a>
<a href="#" class="transition duration-300 hover:text-[#58a6ff]"><ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-16 sm:py-24 bg-[#161b22]">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-16 text-white" data-aos="fade-up" data-aos-duration="2000">
My <span class="text-[#58a6ff]">Skills</span>
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
<!-- Skill Card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="500"
>
<img src="./image/html.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">HTML5</h3>
</div>
<!-- Skill Card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="600"
>
<img src="./image/css.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">CSS3</h3>
</div>
<!-- Skill Card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="700"
>
<img src="./image/javascript.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">JavaScript</h3>
</div>
<!-- Skill Card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="800"
>
<img src="./image/react.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">React</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="900"
>
<img src="./image/typescript.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">TypeScript</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="1000"
>
<img src="./image/nodejs.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">Node Js</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="1100"
>
<img src="./image/express.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">Express Js</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="1200"
>
<img src="./image/tailwindcss.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">Tailwind CSS</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="1300"
>
<img src="./image/mongodb.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">MongoDB</h3>
</div>
<!-- Skill card -->
<div
class="bg-[#0d1117] rounded-xl p-6 flex flex-col items-center text-center shadow-lg hover:shadow-2xl cursor-pointer border border-[#30363d]" data-aos="fade-up" data-aos-duration="3000" data-aos-delay="1400"
>
<img src="./image/mysql.png" class="w-24 mb-4" alt="">
<h3 class="text-lg font-semibold text-white">MySQL</h3>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 sm:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-16 text-white" data-aos="fade-up" data-aos-duration="2000">
My <span class="text-[#58a6ff]">Projects</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project Card 1 -->
<div
class="bg-[#161b22] rounded-xl overflow-hidden shadow-lg hover:scale-105 border border-[#30363d]" data-aos="flip-left" data-aos-duration="2000"
>
<img
src="./image/portfolio-1.webp"
alt="Project 1"
class="w-full h-auto object-cover"
/>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Full Stack Agency Website Project</h3>
<p class="text-gray-300 mb-4">
A brief description of my first project. I used HTML, CSS, and
JavaScript to build this.
</p>
<a
href="#"
class="inline-block bg-[#58a6ff] text-white font-bold py-2 px-4 rounded-full text-sm hover:bg-[#4895e6] transition duration-300"
>View Project</a
>
</div>
</div>
<!-- Project Card 2 -->
<div
class="bg-[#161b22] rounded-xl overflow-hidden shadow-lg hover:scale-105 border border-[#30363d]" data-aos="flip-right" data-aos-duration="2000"
>
<img
src="./image/portfolio-2.webp"
alt="Project 2"
class="w-full h-auto object-cover"
/>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Data Driven Analytic Website Project</h3>
<p class="text-gray-300 mb-4">
A brief description of my second project. This one features a
responsive design and smooth animations.
</p>
<a
href="#"
class="inline-block bg-[#58a6ff] text-white font-bold py-2 px-4 rounded-full text-sm hover:bg-[#4895e6] transition duration-300"
>View Project</a
>
</div>
</div>
<!-- Project Card 3 -->
<div
class="bg-[#161b22] rounded-xl overflow-hidden shadow-lg hover:scale-105 border border-[#30363d]" data-aos="flip-left" data-aos-duration="2000"
>
<img
src="./image/portfolio-3.webp"
alt="Project 3"
class="w-full h-auto object-cover"
/>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Full Stack Blog Application Project</h3>
<p class="text-gray-300 mb-4">
A brief description of my third project. I focused on clean code
architecture and user experience.
</p>
<a
href="#"
class="inline-block bg-[#58a6ff] text-white font-bold py-2 px-4 rounded-full text-sm hover:bg-[#4895e6] transition duration-300"
>View Project</a
>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="container mx-auto p-4 sm:p-8 md:p-12 lg:p-16 max-w-7xl mx-auto" id="contact" data-aos="fade-up" data-aos-duration="2000">
<div class="bg-white rounded-xl shadow-lg overflow-hidden md:flex">
<div
class="md:w-1/3 bg-gray-900 text-white p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-between"
>
<div>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">
Contact Information
</h2>
<p class="text-gray-300 mb-8">
Feel free to reach out to us through any of the channels
below.
</p>
<div class="space-y-6">
<div class="flex items-center space-x-4">
<ion-icon name="call-outline" class="w-6 h-6 text-gray-400"></ion-icon>
<span class="text-lg">+1 (555) 123-4567</span>
</div>
<div class="flex items-center space-x-4">
<ion-icon name="mail-outline" class="w-6 h-6 text-gray-400"></ion-icon>
<span class="text-lg">info@example.com</span>
</div>
<div class="flex items-center space-x-4">
<ion-icon name="location-outline" class="w-10 h-10 text-gray-400"></ion-icon>
<span class="text-lg"
>123 Example Street, Cityville, State 12345</span
>
</div>
</div>
</div>
<div class="flex justify-center md:justify-start space-x-6 mt-8">
<a
href="#"
class="text-gray-400 hover:text-white transition duration-300"
>
<ion-icon name="logo-facebook" class="w-8 h-8"></ion-icon>
</a>
<a
href="#"
class="text-gray-400 hover:text-white transition duration-300"
>
<ion-icon name="logo-instagram" class="w-8 h-8"></ion-icon>
</a>
<a
href="#"
class="text-gray-400 hover:text-white transition duration-300"
>
<ion-icon name="logo-whatsapp" class="w-8 h-8"></ion-icon>
</a>
<a
href="#"
class="text-gray-400 hover:text-white transition duration-300"
>
<ion-icon name="logo-twitter" class="w-8 h-8"></ion-icon>
</a>
</div>
</div>
<div class="md:w-2/3 p-6 sm:p-8 md:p-10 lg:p-12">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-6">
Send us a message
</h2>
<form class="space-y-6">
<div>
<label
for="name"
class="block text-sm font-medium text-gray-700"
>Name</label
>
<input
type="text"
id="name"
name="name"
class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
placeholder="Your Name"
/>
</div>
<div>
<label
for="email"
class="block text-sm font-medium text-gray-700"
>Email</label
>
<input
type="email"
id="email"
name="email"
class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
placeholder="your.email@example.com"
/>
</div>
<div>
<label
for="message"
class="block text-sm font-medium text-gray-700"
>Message</label
>
<textarea
id="message"
name="message"
rows="5"
class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-300"
placeholder="Your message..."
></textarea>
</div>
<div class="flex justify-end">
<button
type="submit"
class="w-full sm:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-md shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-transform duration-300 transform hover:scale-105"
>
Send Message
</button>
</div>
</form>
</div>
</div>
</section>
<footer class="w-full bg-gray-900 text-gray-300 py-4">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between px-4">
<!-- Logo -->
<div>
<span class="text-2xl font-semibold text-white">Alan <span class="text-[#58a6ff]">Smith</span>.</span>
</div>
<!-- Copyright -->
<div class="mt-3 md:mt-0 text-sm">
© 2025 Alan Smith. All rights reserved.
</div>
<!-- Links -->
<div class="flex space-x-6 mt-3 md:mt-0">
<a href="#" class="hover:text-white">Home</a>
<a href="#" class="hover:text-white">About</a>
<a href="#" class="hover:text-white">Services</a>
<a href="#" class="hover:text-white">Contact</a>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
</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: 50px;
}
body {
font-family: "Poppins", sans-serif;
background-color: #0d1117;
color: #c9d1d9;
}
/* Hero section specific styles */
.hero-bg {
background: linear-gradient(135deg, #1f2733 0%, #0d1117 100%);
}
.glowing-border {
background: conic-gradient(
from 0deg,
#22d3ee,
#a78bfa,
#f472b6,
#fb7185,
#facc15,
#22d3ee
);
}
/* Custom scrollbar for a clean look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #30363d;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #0d1117;
}
/* Media query for tablet and mobile responsiveness */
@media (max-width: 768px) {
.hero-section {
padding-top: 4rem;
padding-bottom: 4rem;
}
.about-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.about-image {
margin-bottom: 1.5rem;
}
}
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
// Get references to the button and the menu
const menuButton = document.getElementById("menu-button");
const mobileMenu = document.getElementById("mobile-menu");
const closeButton = document.getElementById("close-button");
// Add a click event listener to the menu button
menuButton.addEventListener("click", () => {
mobileMenu.classList.toggle("translate-x-full");
});
// Add a click event listener to the close button
closeButton.addEventListener("click", () => {
mobileMenu.classList.toggle("translate-x-full");
});
// AOS animation intialization
AOS.init();
const mobileNav = document.getElementById("mobileNav");
const mobileNavList = mobileNav.querySelectorAll("li");
mobileNavList.forEach((list) => {
list.addEventListener("click", () => {
closeButton.click();
})
})
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.