Create a Stunning Personal Portfolio Website with HTML & CSS

Are you looking to design an impressive personal portfolio website that showcases your skills, projects, and contact information? In this post, I’ll guide you through a simple yet elegant portfolio website built using HTML and CSS. Whether you’re a beginner or an experienced developer, this project can be a great addition to your web development journey.

Project Overview

This portfolio website is designed to highlight your personal and professional details in a clean and visually appealing way. It features multiple sections like About Me, Skills, Portfolio, and Contact Form. The design is responsive, making it accessible on all devices, including desktops, tablets, and smartphones.

Features of the Portfolio

  • Navigation Bar: Smooth navigation to all sections with a stylish hover effect.
  • Intro Section: A bold introduction with a profile image and social links.
  • About Me: A detailed description of your professional journey.
  • Skills Section: Separate cards for design, web development, and soft skills with hover effects.
  • Portfolio: Placeholder for project showcases with "View Code" and "View Live" options.
  • Contact Form: A functional form to collect visitor details and messages.
  • Responsive Design: Looks great on all screen sizes.

Folder Structure

project/
│
├── index.html        # Main HTML file
├── style.css         # CSS file for styling
└── images/           # Directory for profile and social media images

GitHub Repositories

You can find the complete source code and images used in this project on my GitHub repository(Click Here). Feel free to explore, fork, or download the code to kickstart your own portfolio project.

HTML Structure

Create an index.html folder and type the following html code in your editor.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio - SmartTechTip</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <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>
    <section id="intro">
        <div class="leftprofile">

            <h1>Hi, I am <span style="color:black">Matrix Thapa</span> <br> UI/UX Designer | Web Developer</h1>
            <button>CV</button>
            <button>Hire Me</button>
            <div class="social">
                <a href=""><img src="images/Facebook.png" alt=""></a>
                <a href=""><img src="images/github.png" alt=""></a>
                <a href=""><img src="images/linkedin.png" alt=""></a>
                <a href=""><img src="images/email.png" alt=""></a>
            </div>
        </div>
        <div class="profile">
            <img src="images/profile.png" alt="">
        </div>
    </section>
    <section id="about">
        <h1>About Me</h1>
        <p>Hi, I’m Matrix Thapa, a passionate UI/UX Designer and Web Developer. I specialize in crafting user-friendly
            designs and building functional websites that deliver seamless digital experiences.<br>
            With a keen eye for detail and a love for innovation, I strive to combine creativity and technical expertise
            to bring ideas to life. Whether it’s designing intuitive interfaces or coding dynamic websites, I enjoy
            solving problems and creating impactful solutions.<br>
            Feel free to explore my work and get in touch if you’d like to collaborate or learn more about what I do!
        </p>
    </section>
    <section id="skills">
        <h1>Skills</h1>
        <div id="skillcards">
            <div class="card">
                <h2>Design Skill</h2>
                <ul>
                    <li>User Interface (UI) Design</li>
                    <li>User Experience (UX) Design</li>
                    <li>Wireframing and Prototyping</li>
                    <li>Interaction Design</li>
                    <li>Responsive Design</li>
                    <li>Graphic Design</li>
                    <li>Design Systems and Style Guides</li>

                </ul>
            </div>
            <div class="card">
                <h2>Web Development Skill</h2>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JavaScript (ES6+)</li>
                    <li>esponsive Web Design</li>
                    <li>Cross-Browser Compatibility</li>
                    <li>Node.js</li>
                    <li>Express.js</li>
                    <li>RESTful APIs</li>
                    <li>Git and GitHub</li>
                    <li>Version Control Systems</li>
                </ul>
            </div>
            <div class="card">
                <h2>Soft Skill</h2>
                <ul>
                    <li>Collaboration and Teamwork</li>
<li>Problem-Solving</li>
<li>Communication Skills</li>
<li>Time Management</li>
                </ul>
            </div>

        </div>
    </section>
    <section id="portfolio">
        <h1>Portfolio</h1>
        <div class="portfoliocards">
            <div class="pcard">
                <span><button>View Code</button> | <button>View Live</button></span>
            </div>
            <div class="pcard">
                <span><button>View Code</button> | <button>View Live</button></span>
            </div>
            <div class="pcard">
                <span><button>View Code</button> | <button>View Live</button></span>
            </div>
            
        </div>
    </section>
    <section id="contact">
        <h1>Contact Form</h1>
        <form action="">
            <input type="text" placeholder="Enter Your Name" required>
            <input type="email" name="" id="" placeholder="Enter Your Email" required>
            <input type="text" name="" id="" placeholder="Enter Your Phone Number" required>
            <textarea name="" id="" placeholder="Enter Your Message.."></textarea>
            <input type="submit" value="Submit">
        </form>
    </section>


    <footer>
        <div class="footer-social">
            <a href=""><img src="images/Facebook.png" alt=""></a>
            <a href=""><img src="images/github.png" alt=""></a>
            <a href=""><img src="images/linkedin.png" alt=""></a>
            <a href=""><img src="images/email.png" alt=""></a>
        </div>
        <p>Copyright &copy; 2025 Matrix Thapa. All Right Reserved</p>
    </footer>
</body>

</html>

CSS Styling

Next, create a CSS file named style.css to style our portfolio.

  
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}
body{
    background-color: #3AEAFE;
    
}
h1{
    font-size: 40px;
}
/* navbar */
nav{
    list-style-type: none;
    display: flex;
    justify-content: center;
    height: 5em;
    align-items: center;
    font-size: 20px;


}

nav li a{
    text-decoration: none;
    padding:0 80px 0 0 ;
    color: rgb(0, 0, 0);
    font-weight: bold;
    transition: 0.3s color;
}
nav li a:hover{
    color: rgb(51, 51, 51);
}


/* intro */
#intro{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin:  0 auto;
    overflow: hidden;
}
#intro button{
    padding: 10px;
    color: white;
    font-size: 18px;
        background-color: #1C0C47;
    width: 150px;
    height: 53px;
    border: none;
    border-radius: 30px;
    margin: 10px 0;
    cursor: pointer;
    transition: 0.3s background-color;
}
#intro button:hover{
    background-color: #3812a3;
}
#intro .social img{
    width: 32px;
    margin-right: 10px;
}
#intro .leftprofile{
    margin-left: 20%;
}
#intro .leftprofile h1{
    font-size:  36px;
    color: #003C32;
    
}
.profile{
    width: 40%;
    height: 100%;
    margin-right: 100px;
}
#intro .profile img{
    transform: scale(1.3);
    overflow: hidden;
    
}



/* about */
#about{
    background-color: black;
    color: white;
    padding: 30px 0;
    
   
}
#about h1{
    font-size: 40px;
}
#about p{
    font-size: 24px;
}
#about h1, #about p{
    width: 80%;
    margin: auto;
    padding: 10px;
}



/* skills */
#skills{
    padding: 30px 0;
}
#skills h1,#skillcards{
    width: 80%;
    margin: auto;
}
#skillcards{
    display: flex;
    justify-content: space-around;
}
.card{
    background-color: black;
    height: 50vh;
    width: 50vw;
    color: white;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    text-align: center;
    cursor: pointer;
    border-radius: 10%;

    
}
.card ul{
    position: absolute;
    padding: 10px;
    text-align: left;
    display:none;
    font-size: 1.1rem;
    
}

.card:hover h2{
    display:none;
    
}
.card:hover ul{
    display: block;
    transition: 0.3s display;
}
.card ul li:hover{
    color: rgb(190, 190, 190);
    transition: 0.1s color ease-in;

}






/* portfolio */
#portfolio{
    background-color: black;
    color: white;
    padding: 30px 0;
}
#portfolio h1,.portfoliocards{
    width: 80%;
    margin: auto;
}
.portfoliocards{
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

#portfolio .pcard{
    width: 50vw;
    height: 50vh;
    margin: 10px;
    background-color: white;
    border-radius: 0;
    align-items: end;
    display: flex;
    justify-content: center;
   
}
#portfolio .pcard span{
    color:black;
}
#portfolio .pcard span button{
    border: none;
    background:none;
    font-size: 1.1rem;
    cursor: pointer;
}
#portfolio .pcard span button:hover{
    color: rgb(187, 0, 0);
}

/* contact */
#contact{
    padding: 30px 0;
}
#contact h1,form{
    width: 80%;
    margin: auto;
}
form{
    display: grid;

}
input,textarea{
    margin: 10px auto;
    padding: 20px;
    background-color: rgb(31, 31, 31);
    border: none;
    border-radius: 50px;
    width: 50%;
    font-size: 1.1rem;
    color: white;
    
}
form textarea{
        height: 20vh;
}
input[type="submit"]{
    background-color: #3812a3;
    width: 100px;
    cursor: pointer;
}
input[type="submit"]:hover{
    background-color: #240579;
}



/* footer */
footer{
    background-color: rgb(61, 61, 61);
    width: 100%;
    display: grid;
    height: 30vh;
    justify-content: center;
    
}
.footer-social{
    
 margin:auto;
}
.footer-social img{
    width: 48px;
    filter: invert(100%);
    margin-left: 10px;
}
footer p{
    color: white;
}





/* Responsive Media Queries */

/* For tablets and larger mobile devices (max-width: 768px) */
@media (max-width: 768px) {
    nav {
        font-size: 24px;
        flex-direction: column;
        height: auto;
        background-color: #056570;
    }
    nav li{
        width: 100%;
        text-align: center;
        margin: 1px;
        border-bottom: 2px solid rgb(29, 210, 216);
    }
    nav li:last-child{
        border: none;
    }
    nav li:hover{
        background-color: #043338;
        cursor: pointer;
    }
    nav li:hover a{
        color: rgb(189, 189, 189);
    }
    
    nav li a {
        padding: 10px 0;
        color: white;
        font-weight: 100;
        
    }
    #intro {
        flex-direction: column;
        text-align: center;
        margin-top: 20px;
    }

    #intro .leftprofile {
        margin-left: 0;
    }

    #intro .profile {
        width: 80%;
        margin: 0 auto;
    }

    #skills, #portfolio, #contact {
        padding: 20px 0;
    }

    #skillcards, .portfoliocards {
        flex-direction: column;
        align-items: center;
    
    }
    

    .card, .pcard {
        width: 300px;
        margin-bottom: 20px;
    }

    input, textarea {
        width: 80%;
    }
}

/* For mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    nav {
        font-size: 24px;
    }

    #intro button {
        width: 120px;
        font-size: 16px;
    }

    #intro .leftprofile h1 {
        font-size: 24px;
    }

    #about p{
        font-size: 18px;
    }




    
    #contact form input, textarea{
        width: 100%;
        border-radius: 0;
        font-size: 16px;
    }

    footer {
        height: auto;
        padding: 20px 0;
        margin: auto;
    }

    .footer-social img {
        width: 36px;
    }
}

Understanding the Code

This portfolio website is built with a combination of HTML and CSS, utilizing modern techniques for design and layout. Here’s an overview of what’s included:

  • HTML Structure: The website is structured using semantic HTML tags such as <header>, <nav>, <section>, and <footer>. These tags improve accessibility and readability while defining the purpose of each section.
  • CSS Styling: The style.css file adds life to the website with a clean and modern design. Flexbox is used for layout alignment, while hover effects and transitions add interactivity. Colors and typography are carefully chosen to make the content visually appealing.
  • Responsive Design: Media queries are used to ensure the website looks great on all devices, including desktops, tablets, and mobile phones. The layout adjusts dynamically to fit different screen sizes.
  • Navigation and Links: The navigation bar allows smooth scrolling between sections, while links to social media and project showcases provide quick access to additional resources.
  • Interactive Contact Form: The contact form includes input fields for name, email, phone number, and a message box, styled for usability and aesthetics.

Together, these elements create a professional and functional portfolio website, ready to showcase your skills and projects.

Conclusion

Building this portfolio website is a fantastic way to practice your HTML and CSS skills while creating something valuable for your career. Whether you’re just starting out or looking to refresh your skills, this project provides a solid foundation for building responsive and visually appealing web pages.

Remember to customize the website to showcase your unique style and projects. Experiment with colors, fonts, and layouts to make it truly yours.

If you have any questions or need further assistance, feel free to reach out. Happy coding!


Trending Posts

Easy Light Bulb Project: HTML, CSS, and JavaScript

Image
In this tutorial, we will learn how to create a light bulb using HTML, CSS, and JavaScript. We will go step by step, explaining the code and its functionality. By the end of this tutorial, you will have a working light bulb that can be toggled on and off with a button. HTML Markup <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Light</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="light"></div>         <div class="cap"></div>     </div>     <button id="power">OFF</button>     <script src="script.js"></sc...
Read More

Creating a Netflix-inspired Animation using HTML and CSS

Image
In this blog post, we will explore how to create a simple yet captivating animation inspired by the Netflix logo using HTML and CSS. By following the provided code snippets and step-by-step instructions, you'll be able to replicate the animation and gain insights into the key concepts involved. So, let's dive in and bring some Netflix vibes to your web project! HTML Structure: To get started, create a new HTML file and paste the following code inside the `<body>` tags: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Netflix</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="netflix"></div>       ...
Read More

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Image
Right now, In a smartphone, you will get a 48MP Camera, 64MP Camera, 108MP Camera, and so on. But, Does this number of megapixels improve the image quality? What is a Megapixel? Megapixel means a million pixels in an image. Pixel is the small dot or square on the image. By combining millions of pixels, one image is formed. 1 Megapixel = 1 Million Pixel, 2 Megapixel = 2 Million Pixel, 12 Megapixel = 12 Million Pixel, 48 Megapixel = 48 Million Pixel, 64 Megapixel = 64 Million Pixel, and so on.   Does More Megapixel equal better image quality? No. A Megapixel is just a million pixels in an image. Many other factors also matter while capturing an image like Image Sensor, Aperture, Megapixel, Lens, and Software.    If you have a 108 Megapixel Camera with a small image sensor and a 12 Megapixel camera with a big image sensor. Then, The second one will have better quality. It's because, in a big image sensor, the pixel size is bigger. If the pixel size is bigger, it can capture...
Read More

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-...
Read More

How to Become a Web Designer: A Complete Guide

Image
Have you ever admired a beautifully designed website and wondered how you can create something similar? If yes, then becoming a web designer might be the perfect career for you. Web design is a blend of creativity and technical skills, where you can bring ideas to life and make an impact on the digital world. In this blog, we will guide you step by step on how to become a web designer, even if you're starting from scratch. 1. Understand What Web Design Is Before jumping into web design, it’s important to understand what it actually means. Web design is about creating the layout, look, and feel of a website. It involves working on the visual aspects like colors, typography, and images, as well as ensuring the website is user-friendly and responsive on all devices. A good web designer focuses on creating websites that are not only attractive but also functional and easy to use. 2. Learn the Basics of Web Design To start your journey, you need to learn some basic concepts and s...
Read More

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">      ...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

Is HTML a Programming Language?

Image
When you step into the world of web development, one of the first tools you encounter is HTML. However, a common question that arises among beginners is: "Is HTML a programming language?" Let’s dive deep into this topic to clear up any confusion. What is HTML? HTML stands for HyperText Markup Language . It is the standard language used to structure and display content on the web. HTML uses elements (tags) to define the structure of a webpage, including headings, paragraphs, links, images, and more. For example, a basic HTML document looks like this: <!DOCTYPE html> <html> <head>   <title>My First Page</title> </head> <body>   <h1>Welcome to SmartTechTip!</h1>   <p>This is an example of an HTML page.</p> </body> </html> Why Isn’t HTML a Programming Language? To answer the main question: No, HTML is ...
Read More

Is Blogging Dead? Exploring the Relevance of Blogging in 2025

Image
In a world dominated by social media platforms, video content, and instant gratification, many wonder, “Is blogging dead?” The short answer is no—blogging is far from dead. However, the blogging landscape has evolved dramatically, and its relevance now depends on adapting to the current digital trends. Let’s dive into why blogging still matters, how it has changed, and what you can do to make your blog thrive in 2025. The Evolution of Blogging Blogging in the Early Days Blogging began as a way for individuals to share personal stories, opinions, and expertise. It was informal, community-driven, and lacked commercial intent. Over time, blogging became a powerful tool for businesses, marketers, and influencers to build an audience and generate revenue. Blogging in the Age of Social Media Platforms like Instagram, TikTok, and YouTube have shifted the spotlight from text-based content to visually engaging and short-form media. Audiences now prefer quick, interactive content, le...
Read More