Creating a Responsive Portfolio Website with HTML, CSS

Creating a Responsive Portfolio Website with HTML, CSS

by

Creating a Responsive Portfolio Website with HTML, CSS

Hello coders, welcome to the CodeWithRandom blog!
In today’s digital era, having your own responsive portfolio website is no longer optional — it’s essential. Whether you’re a web developer, UI/UX designer, photographer, or freelancer, a personal website gives you a professional online identity. It acts as your digital business card, showcasing your work, skills, and creativity to potential clients or employers.

In this complete guide, we’ll show you how to create a responsive portfolio website using HTML, CSS, and JavaScript step by step. A responsive design means your site will look and work perfectly on any device — from large desktop screens to mobile phones.

This portfolio project comes with a clean folder structure, well-organized code, and a modern, eye-catching design. By the end of this tutorial, you’ll not only understand how every section works but also be able to customize it to fit your own style and needs. Whether you’re building it for practice, a job interview, or to showcase your freelance work, this HTML CSS JavaScript portfolio will help you stand out online.

Creating a Responsive Portfolio Website with HTML, CSS

1. Why Create Your Own Portfolio Website?

Before we dive into code, let’s answer the obvious question: why not just use LinkedIn or Behance?

Here are a few reasons a personal website is worth it:

  • Full control over your design and content
  • Show personality – not just skills, but style
  • Better visibility in Google searches
  • Easy to share – one clean link to all your work
  • Builds credibility – shows you have technical know-how

It’s your own space on the internet. No ads, no third-party branding — just you.

2. Project Overview

The project is built with:

  • HTML – The structure (like the skeleton of a house)
  • CSS – The design (colors, layouts, fonts)
  • JavaScript – The interactivity (animations, sliders, etc.)

When you download or open this project folder, you’ll see it’s neatly organized inside a main folder (for example, RESPONSIVE-PORTFOLIO-DEMO). Inside it, there’s a packages folder containing CSS, images, and JS files. There’s also an index.html file, which is the heart of the website.

3. Folder Structure Explained

A clean folder structure makes it easy to maintain and customize your project. Let’s go through each part of the structure from the screenshot you have.

/css Folder

This folder stores all the styles for the website.

  • styles.css – This is the main stylesheet where colors, font sizes, spacing, and layout rules are defined.
  • swiper-bundle.min.css – This is a third-party CSS file used for the portfolio slider/ carousel effect.
/images Folder

This folder contains all the images used in the project.
Examples include:

  • Personal photos (e.g., arun.PNG, yuga.PNG)
  • Background designs (background.svg)
  • Portfolio project screenshots (portfolio1.jpg, portfolio2.png, etc.)
  • Client or work-related images

Tip: Keep your images optimized for the web so the site loads faster.

/js Folder

This folder contains the JavaScript files.

  • main.js – This is where all the custom scripts live. It controls things like navigation menu toggles, animations, and the contact form logic.
  • swiper-bundle.min.js – A third-party library for creating the image slider in the portfolio section.
index.html

This is the main web page of your portfolio. When someone visits your site, this file loads first. All other files (CSS, JS, images) are connected to it.

README.md

This file usually contains instructions for setting up or understanding the project. If you upload your project to GitHub, this file will show up as the main description.

4. Understanding index.html

Let’s break down the important sections of the HTML file.

Header and Navigation

At the top, you have the site logo (or your name) and the navigation bar. Each navigation link corresponds to a section on the same page, like Home, About, Skills, Services, Portfolio, and Contact. The numbers (01., 02., 03.) help visitors know where they are on the page.

Home Section

This is the first thing visitors see. It usually includes:

  • A short introduction
  • Your name and profession
  • A call-to-action button (e.g., “Contact Me” or “View Portfolio”)
  • A profile image

About Section

Here you share your background, education, experience, and maybe a fun fact or two. You can also include a downloadable resume link.

Skills Section

This lists your technical and soft skills, often shown with progress bars or icons. Example: HTML – 90%, CSS – 85%, JavaScript – 80%.

Qualification Section

This is like your timeline — showing your education and work experience in order.

Services Section

Here you describe what you can do for clients. For example:

  • Web Development
  • UI/UX Design
  • Branding
  • Photography

Portfolio Section

A gallery or slider showing your previous work. Each image can be clickable to view more details.

5. Styling with CSS

The styles.css file is where all the magic of the design happens.

Key parts include:

  • Variables – Defining theme colors and font styles in one place
  • Layout classes – Controlling grids, flexbox, and spacing
  • Responsive media queries – Adjusting the layout for mobile and tablet
  • Animations – Smooth hover effects and fade-ins

Example snippet from a typical CSS file:

:root {
  --primary-color: #4cafef;
  --text-color: #333;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: var(--text-color);
}
6. Adding Interactivity with JavaScript

The main.js file adds life to your static HTML. Here are some common features it might handle:

  • Navigation menu toggle for mobile view
  • Scroll animations for elements
  • Image sliders using Swiper.js
  • Form validation for contact forms

Example:

// Toggle mobile menu
document.getElementById('nav-toggle').addEventListener('click', () => {
  document.getElementById('nav-menu').classList.toggle('show-menu');
});
7. Using Images Effectively

Images are stored in the /images folder. To make your site load fast:

  • Use .jpg for photos, .png for images with transparency
  • Compress them before uploading
  • Name files descriptively (e.g., web-design-project.jpg instead of img1.jpg)

 

8. How to Run the Project Locally

  1. Download or clone the project folder.
  2. Open the folder in a code editor like VS Code.
  3. Double-click index.html or open it in your browser.
  4. For best results, use the Live Server extension in VS Code to preview changes instantly.
9. How to Customize It
  • Change Texts – Open index.html and edit headings, paragraphs, and buttons.
  • Update Images – Replace files in /images with your own, keeping the same file names (or update paths in HTML).
  • Adjust Colors – Edit color variables in styles.css.
  • Add/Remove Sections – Duplicate or remove <section> blocks in HTML.
Creating a Responsive Portfolio Website with HTML, CSS, and JavaScript

Here is The complete Portfolio Source Code:

Folder structure (copy as reference)

RESPONSIVE-PORTFOLIO/
├─ index.html
├─ README.md
└─ packages/
   ├─ css/
   │  ├─ styles.css
   │  └─ swiper-bundle.min.css
   ├─ images/
   │  ├─ background.svg
   │  ├─ portfolio1.jpg
   │  ├─ portfolio2.png
   │  ├─ portfolio3.PNG
   │  ├─ pras-1.jpg
   │  ├─ pras-2.jpg
   │  ├─ arun.PNG
   │  ├─ yuga.PNG
   │  └─ shenan.PNG
   └─ js/
      ├─ main.js
      └─ swiper-bundle.min.js

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--==================== UNICONS ====================-->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
        
        <!--==================== SWIPER CSS ====================-->
        <link rel="stylesheet" href="./packages/css/swiper-bundle.min.css">
        
        <!--==================== CSS ====================-->
        <link rel="stylesheet" href="./packages/css/styles.css">

        <title>Prashanna</title>
    </head>
    <body>
        <!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">Ashutosh Mishra</a>
                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list grid">
                        <li class="nav__item">
                            <a href="#home" class="nav__link">
                                <i class="uil uil-estate nav__icon"></i>Home
                            </a>
                        </li>
                        <li class="nav__item">
                            <a href="#about" class="nav__link">
                                <i class="uil uil-user nav__icon"></i>About
                            </a>
                        </li>
                        <li class="nav__item">
                            <a href="#skills" class="nav__link">
                                <i class="uil uil-file-alt nav__icon"></i>Skills
                            </a>
                        </li>
                          <li class="nav__item">
                            <a href="#services" class="nav__link">
                                <i class="uil uil-briefcase-alt nav__icon"></i>Services
                            </a>
                        </li>
                        <li class="nav__item">
                            <a href="#portfolio" class="nav__link">
                                <i class="uil uil-scenery nav__icon"></i>Portfolio                                
                            </a>
                        </li>
                        <li class="nav__item">
                            <a href="#contact" class="nav__link">
                                <i class="uil uil-message nav__icon"></i>Contact                               
                            </a>
                        </li>
                    </ul>
                    <i class="uil uil-times nav__close" id="nav-close"></i>
                </div>
                <div class="nav__btns">
                    <!-- Theme change button -->

                    <i class="uil uil-moon change-theme" id="theme-button"></i>

                    <div class="nav__toggle" id="nav-toggle">
                        <i class="uil uil-apps"></i>
                    </div>
                </div>
            </nav>
        </header>

        <!--==================== MAIN ====================-->
        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home section" id="home">
                <div class="home__container container grid">
                    <div class="home__content grid">
                        <div class="home__social">
                            <a href="https://www.linkedin.com/in/ashutosh-mishra-dev/" target="_blank" class="home__social-icon">
                                <i class="uil uil-linkedin-alt"></i>
                            </a>
                            <a href="https://twitter.com/" target="_blank" class="home__social-icon">
                                <i class="uil uil-twitter-alt"></i>
                            </a>
                            <a href="https://github.com/ashutoshmishra52" target="_blank" class="home__social-icon">
                                <i class="uil uil-github-alt"></i>
                            </a>
                        </div>

                        <div class="home__img">
                            <svg class="home__blob" viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <mask id="mask0" mask-type="alpha">
                                    <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547 
                                    130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
                                    97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
                                    0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
                                </mask>
                                <g mask="url(#mask0)">
                                    <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 
                                    165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
                                    129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
                                    -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z"/>
                                    <image class="home__blob-img" x="" xlink:href="packages/images/pras-2.jpg"/>
                                </g>
                            </svg>
                        </div>

                        <div class="home__data">
                            <h1 class="home__title">Hi, I'am Ashutosh Mishra</h1>
                            <h3 class="home__subtitle">Data Analyst</h3>
                            <p class="home__description">High level experience in data analitical knowledge and digital banking with quality work.</p>
                            <a href="#contact" class="button button--flex home__button">
                                Contact Me<i class="uil uil-message button__icon"></i>
                            </a>
                        </div>
                    </div>

                    <div class="home__scroll">
                        <a href="#about" class="home__scroll-button button--flex">
                            <i class="uil uil-mouse-alt home__scroll-mouse"></i>
                            <span class="home__scroll-name">Scroll Down</span>
                            <i class="uil uil-arrow-down home__scroll-arrow"></i>
                        </a>
                    </div>
                </div>
            </section>

            <!--==================== ABOUT ====================-->
            <section class="about section" id="about">
                <h2 class="section__title">About Me</h2>
                <span class="section__subtitle">My Introduction</span>

                <div class="about__container container grid">
                    <img src="packages/images/pras-1.jpg" alt="" class="about__img">
                    <div class="about__data">
                        <p class="about__description">
                            Data analyst, with extensive knowledge and years of experience, 
                            working in Digital banking technologies and other data analitical tools, 
                            delivering quality work.
                        </p>
                        <div class="about__info">
                            <div>
                                <span class="about__info-title">03+</span>
                                <span class="about__info-name">Years <br> experience</span>
                            </div>
                            <div>
                                <span class="about__info-title">05+</span>
                                <span class="about__info-name">Completed <br> certifications</span>
                            </div>
                            <div>
                                <span class="about__info-title">02+</span>
                                <span class="about__info-name">companies<br>worked</span>
                            </div>
                        </div>

                        <div class="about__buttons">
                            <a download="" href="packages/pdf/" class="button button--flex">
                                Download CV<i class="uil uil-download-alt button__icon"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!--==================== SKILLS ====================-->
            <section class="skills section" id="skills">
                <h2 class="section__title">Skills</h2>
                <span class="section__subtitle">My technical level</span>

                <div class="skills__container container grid">
                    <div>
                         <!--==================== SKILL-1 ====================-->
                        <div class="skills__content skills__open">
                            <div class="skills__header">
                                <i class="uil uil-analytics skills__icon"></i>
                               <div>
                                   <h1 class="skills__title">Data Analyst</h1>
                                   <span class="skills__subtitle">More than 2 years</span>
                               </div>

                               <i class="uil uil-angle-down skills__arrow"></i>
                            </div>
                            <div class="skills__list grid">
                                <div class="skills__data">
                                    <div class="skills__titles">
                                        <h3 class="skills__name">Python</h3>
                                        <span class="skills__number">60%</span>
                                    </div>
                                    <div class="skills__bar">
                                        <span class="skills__percentage skills__python"></span>
                                    </div>
                                </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">Tableau</h3>
                                       <span class="skills__number">70%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__tab"></span>
                                   </div>
                               </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">SQL</h3>
                                       <span class="skills__number">50%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__sql"></span>
                                   </div>
                               </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">Google Suite</h3>
                                       <span class="skills__number">70%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__google"></span>
                                   </div>
                               </div>
                            </div>
                        </div>
                         <!--==================== SKILLS 2 ====================-->
                        <div class="skills__content skills__close">
                            <div class="skills__header">
                                <i class="uil uil-money-bill skills__icon"></i>
                               <div>
                                   <h1 class="skills__title">Banker</h1>
                                   <span class="skills__subtitle">More than 3 years</span>
                               </div>

                               <i class="uil uil-angle-down skills__arrow"></i>
                            </div>
                            <div class="skills__list grid">
                                <div class="skills__data">
                                    <div class="skills__titles">
                                        <h3 class="skills__name">Digital Banking</h3>
                                        <span class="skills__number">80%</span>
                                    </div>
                                    <div class="skills__bar">
                                        <span class="skills__percentage skills__bank"></span>
                                    </div>
                               </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">Counters</h3>
                                       <span class="skills__number">80%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__counter"></span>
                                   </div>
                               </div>
                               <div class="skills__data">
                                    <div class="skills__titles">
                                      <h3 class="skills__name">Google suite</h3>
                                      <span class="skills__number">70%</span>
                                    </div>
                                    <div class="skills__bar">
                                       <span class="skills__percentage skills__google"></span>
                                    </div>
                                </div>
                                <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">MS Office</h3>
                                       <span class="skills__number">90%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__office"></span>
                                   </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <!--==================== SKILLS 3 ====================-->
                        <div class="skills__content skills__close">
                            <div class="skills__header">
                               <i class="uil uil-brackets-curly skills__icon"></i>
                               <div>
                                   <h1 class="skills__title">Web Developer</h1>
                                   <span class="skills__subtitle">More than 3 years</span>
                               </div>

                               <i class="uil uil-angle-down skills__arrow"></i>
                            </div>
                            <div class="skills__list grid">
                                <div class="skills__data">
                                    <div class="skills__titles">
                                        <h3 class="skills__name">HTML</h3>
                                        <span class="skills__number">90%</span>
                                    </div>
                                    <div class="skills__bar">
                                        <span class="skills__percentage skills__html"></span>
                                    </div>
                                </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">CSS</h3>
                                       <span class="skills__number">80%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__css"></span>
                                   </div>
                               </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">JavaScript</h3>
                                       <span class="skills__number">60%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__js"></span>
                                   </div>
                               </div>
                               <div class="skills__data">
                                   <div class="skills__titles">
                                       <h3 class="skills__name">WordPress</h3>
                                       <span class="skills__number">70%</span>
                                   </div>
                                   <div class="skills__bar">
                                       <span class="skills__percentage skills__wordpress"></span>
                                   </div>
                               </div>
                           </div>
                       </div>
                    </div>
                </div>
            </section>

              <!--==================== QUALIFICATION ====================-->
        <section class="qualification__section">
            <h2 class="section__title">Qualification</h2>
            <span class="section__subtitle">My personal journey</span>

            <div class="qualification__container container">
                <div class="qualification__tabs">
                    <div class="qualification__button button--flex qualification__active" data-target='#education'>
                        <i class="uil uil-graduation-cap qualification__icon"></i>
                        Education
                    </div>

                    <div class="qualification__button button--flex" data-target="#work">
                        <i class="uil uil-briefcase-alt qualification__icon"></i>
                        Work
                    </div>
                </div>

                <div class="qualification__sections">
            <!--==================== QUALIFICATION CONTENT 1 ====================-->
            <div class="qualification__content qualification__active" data-content id="education">
             <!--==================== QUALIFICATION 1 ====================--> 
             <div class="qualification__data">
                 <div>
                     <h3 class="qualification__title">Diploma in English </h3>
                     <span class="qualification__subtitle">British Council, Kandy</span>
                     <div class="qualification__calendar">
                        <i class="uil uil-calendar-alt"></i>
                        2011 - 2012
                     </div>
                 </div>

                 <div>
                     <span class="qualification__rounder"></span>
                     <span class="qualification__line"></span>
                 </div>
             </div>
             
             <!--==================== QUALIFICATION 2 ====================--> 
             <div class="qualification__data">
                <div></div>
                <div>
                   <span class="qualification__rounder"></span>
                   <span class="qualification__line"></span>
                </div>

                <div>
                    <h3 class="qualification__title">GCE Adavance Level</h3>
                    <span class="qualification__subtitle">St.Anthony's College, Kandy</span>
                    <div class="qualification__calendar">
                       <i class="uil uil-calendar-alt"></i>
                       2012 - 2014
                    </div>
                </div>
            </div> 

            <!--==================== QUALIFICATION 3 ====================--> 
            <div class="qualification__data">
                <div>
                    <h3 class="qualification__title">BSc Management Information System</h3>
                    <span class="qualification__subtitle">NSBM Green University</span>
                    <div class="qualification__calendar">
                       <i class="uil uil-calendar-alt"></i>
                       2015 - 2018
                    </div>
                </div>

                <div>
                    <span class="qualification__rounder"></span>
                    <span class="qualification__line"></span>
                </div>
            </div> 

            <!--==================== QUALIFICATION 4 ====================--> 
            <div class="qualification__data">
                <div></div>
                <div>
                    <span class="qualification__rounder"></span>
                   <!-- <span class="qualification__line"></span> -->
                </div>

                <div>
                    <h3 class="qualification__title">Data Analyst Professional Certification</h3>
                    <span class="qualification__subtitle">Google | Coursera - Online</span>
                    <div class="qualification__calendar">
                       <i class="uil uil-calendar-alt"></i>
                       2021
                    </div>
                </div>

                
            </div>
            </div>
            
            <!--==================== QUALIFICATION CONTENT 2 ====================-->
            <div class="qualification__content" data-content id="work">
                <!--==================== QUALIFICATION 1 ====================--> 
                <div class="qualification__data">
                    <div>
                        <h3 class="qualification__title">Trainee Banking Assistant</h3>
                        <span class="qualification__subtitle">DFCC Head Office - Colombo</span>
                        <div class="qualification__calendar">
                           <i class="uil uil-calendar-alt"></i>
                           2017 - 2019
                        </div>
                    </div>
   
                    <div>
                        <span class="qualification__rounder"></span>
                        <span class="qualification__line"></span>
                    </div>
                </div>
                
                <!--==================== QUALIFICATION 2 ====================--> 
                <div class="qualification__data">
                   <div></div>
                   <div>
                      <span class="qualification__rounder"></span>
                      <span class="qualification__line"></span>
                   </div>
   
                   <div>
                       <h3 class="qualification__title">Banking Assistant</h3>
                       <span class="qualification__subtitle">DFCC Head Office - Colombo</span>
                       <div class="qualification__calendar">
                          <i class="uil uil-calendar-alt"></i>
                          2019 - 2020
                       </div>
                   </div>
               </div> 
   
               <!--==================== QUALIFICATION 3 ====================--> 
               <div class="qualification__data">
                   <div>
                       <h3 class="qualification__title">Data Analyst - Digital banking</h3>
                       <span class="qualification__subtitle">DFCC Head Office - Colombo</span>
                       <div class="qualification__calendar">
                          <i class="uil uil-calendar-alt"></i>
                          2020 - Present
                       </div>
                   </div>
   
                   <div>
                       <span class="qualification__rounder"></span>
                       <!-- <span class="qualification__line"></span> -->
                   </div>
               </div> 
          
               </div> 
             
               </div>
            </div>
        </section>
      
        <!--==================== SERVICES ====================-->
        <section class="services section" id="services">
            <h2 class="section__title">Services</h2>
            <span class="section__subtitle">What I offer</span>

            <div class="services__container container grid">
        <!--==================== SERVICES 1 ====================-->  
        <div class="services__content">
            <div>
                <i class="uil uil-analytics skills__icon"></i>
                <h3 class="services__title">Data Analyst<br></h3>
            </div>
            <span class="button button--flex button--small button--link services__button">
                View more
                <i class="uil uil-arrow-right button__icon"></i>
            </span>

            <div class="services__modal">
                <div class="services__modal-content">
                    <h4 class="services__modal-title">Data Analyst <br></h4>
                    <i class="uil uil-times services__modal-close"></i>

                    <ul class="services__modal-services grid">
                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>I analize data systems.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Automating information retrieval.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Systematically applying statistical and logical techniques.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Visualizing graphs, charts and preparing reports and dashboards.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>  
        
        <!--==================== SERVICES 2 ====================--> 
        <div class="services__content">
            <div>
                <i class="uil uil-money-bill skills__icon"></i>
                <h3 class="services__title">Banker<br> </h3>
            </div>
            <span class="button button--flex button--small button--link services__button">
                View more
                <i class="uil uil-arrow-right button__icon"></i>
            </span>

            <div class="services__modal">
                <div class="services__modal-content">
                    <h4 class="services__modal-title">Banker<br></h4>
                    <i class="uil uil-times services__modal-close"></i>

                    <ul class="services__modal-services grid">
                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Assiting both personal and commercial clients with financial questions and needs.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Maintain customer acoounts and help resolve disputes.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Refer customers to loan officers or other financial specialist.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Systematically applying statistical and logical techniques.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>  
       
        <!--==================== SERVICES 3 ====================-->
        <div class="services__content">
            <div>
                <i class="uil uil-arrow services__icon"></i>
                <h3 class="services__title">Web Developer<br></h3>
            </div>
            <span class="button button--flex button--small button--link services__button">
                View more
                <i class="uil uil-arrow-right button__icon"></i>
            </span>

            <div class="services__modal">
                <div class="services__modal-content">
                    <h4 class="services__modal-title">Web  Developer<br></h4>
                    <i class="uil uil-times services__modal-close"></i>

                    <ul class="services__modal-services grid">
                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>I develop the user interface.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Webpage development.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>I create Ux element interactions.</p>
                        </li>

                        <li class="services__modal-service">
                            <i class="uil uil-check-circle services__modal-icon"></i>
                            <p>Well trained in WordPress.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div> 
  
       
        </div>
        </section>
        <!--==================== PORTFOLIO ====================-->
        <section class="portfolio section" id="portfolio">

            <h2 class="section__title">Portfolio</h2>
            <span class="section__subtitle">Most recent works</span>

            <div class="portfolio__container container swiper-container">
                <div class="swiper-wrapper">
        <!--==================== PORTFOLIO 1 ====================-->
        
            <div class="portfolio__content grid swiper-slide">
                <img src="./packages/images/portfolio1.jpg" alt="" class="portfolio__img">

                <div class="portfolio_">
                    <h3 class="portfolio__title">Modern Dashboard</h3>
                    <p class="portfolio__description">Data analitical dashboard adaptable to all devices, 
                        with ui components and animated interactions.</p>
                    <a href="#" class="button button--flex button--small portfolio__button">
                        Demo
                        <i class="uil uil-arrow-right button__icon"></i>
                    </a>
                </div>
            </div>

            <!--==================== PORTFOLIO 2 ====================-->
        
            <div class="portfolio__content grid swiper-slide">
                <img src="./packages/images/portfolio3.PNG" alt="" class="portfolio__img">

                <div class="portfolio_">
                    <h3 class="portfolio__title">E-Commerce website</h3>
                    <p class="portfolio__description">Above Amazon clone is adaptable to all devices, with 
                        ui components and animated interactions.</p>
                    <a href="#" class="button button--flex button--small portfolio__button">
                        Demo
                        <i class="uil uil-arrow-right button__icon"></i>
                    </a>
                </div>
            </div>

            <!--==================== PORTFOLIO 3 ====================-->
        
            <div class="portfolio__content grid swiper-slide">
                <img src="./packages/images/portfolio2.png" alt="" class="portfolio__img">

                <div class="portfolio_">
                    <h3 class="portfolio__title">Brand Design</h3>
                    <p class="portfolio__description">Tesla Clone is adaptable to all devices, with 
                        ui components and animated interactions.</p>
                    <a href="#" class="button button--flex button--small portfolio__button">
                        Demo
                        <i class="uil uil-arrow-right button__icon"></i>
                    </a>
                </div>
            </div>
                </div>

            <!-- add arrows-->
            <div class="swiper-button-next">
                <i class="uil uil-angle-right-b swiper-portfolio-icon"></i>
            </div>

            <div class="swiper-button-prev">
                <i class="uil uil-angle-left-b swiper-portfolio-icon"></i>
            </div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            
        
        </div>

        </section>

        <!--==================== PROJECT IN MIND ====================-->
        <section class="project section">

            <div class="project__bg">
                <div class="project__container container grid">
                    <div class="project__data">
                        <h2 class="project__title">You have a new project?</h2>
                        <p class="project__description">Contact me now and get discounts on your Web development projects.</p>
                        <a href="#contact" class="button button--flex button--white">Contact me
                            <i class="uil uil-message project__icon button__icon"></i>
                        </a>
                       
                    </div>
                    <!-- <img src="assets/img/project.png" alt="" class="project__img"> -->
                </div>
            </div>

        </section>

        <!--==================== TESTIMONIAL ====================-->
        <section class="testimonial section">

            <h2 class="section__title">Testimonials</h2>
            <span class="section__subtitle">My client saying</span>

            <div class="testimonial__container container swiper-container">
                <div class="swiper-wrapper">
                <!--==================== TESTIMONIAL 1 ====================-->
                    <div class="testimonial__content swiper-slide">
                        <div class="testimonial__data">
                            <div class="testimonial__header">
                                <img src="./packages/images/arun.PNG" alt="" class="testimonial__img">
                                
                                <div>
                                    <h3 class="testimonial__name">Hera lal</h3>
                                    <span class="testimonial__client">Client</span>
                                </div>
                            </div>
                            <div>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                            </div>
                        </div>

                        <p class="testimonial__description">I get a good impression, I carry out my project with all the 
                            possible quality and attention and support 24 hours a day.
                        </p>
                    </div>
                    <!--==================== TESTIMONIAL 2 ====================-->
                    <div class="testimonial__content swiper-slide">
                        <div class="testimonial__data">
                            <div class="testimonial__header">
                                <img src="./packages/images/yuga.PNG" alt="" class="testimonial__img">
                                
                                <div>
                                    <h3 class="testimonial__name">Ankit Raj</h3>
                                    <span class="testimonial__client">Client</span>
                                </div>
                            </div>
                            <div>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                            </div>
                        </div>

                        <p class="testimonial__description">I get a good impression, I carry out my project with all the 
                            possible quality and attention and support 24 hours a day.
                        </p>
                    </div>
                    <!--==================== TESTIMONIAL 3 ====================-->
                    <div class="testimonial__content swiper-slide">
                        <div class="testimonial__data">
                            <div class="testimonial__header">
                                <img src="./packages/images/shenan.PNG" alt="" class="testimonial__img">
                                
                                <div>
                                    <h3 class="testimonial__name">Bhanu Kumar</h3>
                                    <span class="testimonial__client">Client</span>
                                </div>
                            </div>
                            <div>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                                <i class="uil uil-star testimonial__icon-star"></i>
                            </div>
                        </div>

                        <p class="testimonial__description">I get a good impression, I carry out my project with all the 
                            possible quality and attention and support 24 hours a day.</p>
                    </div>      
                </div>

                <!--Add pagination-->
                <div class="swiper-pagination swiper-pagination-testimonial"></div>
            </div>
            </section>

        <!--==================== CONTACT ME ====================-->
        <section class="contact section" id="contact">
            <h2 class="section__title">Contact me</h2>
            <span class="section__subtitle">Get in touch</span>

            <div class="contact__container container grid">
                <div>
                    <div class="contact__information">
                        <i class="uil uil-phone-alt contact__icon"></i>

                        <div>
                            <h3 class="contact__title">Call me</h3>
                            <span class="contatc__subtitle">(+94) 755422421</span>
                        </div>
                    </div>

                    <div class="contact__information">
                        <i class="uil uil-envelope contact__icon"></i>

                        <div>
                            <h3 class="contact__title">E-mail</h3>
                            <span class="contatc__subtitle">Prashanna01@gmail.com</span>
                        </div>
                    </div>

                    <div class="contact__information">
                        <i class="uil uil-map-marker contact__icon"></i>

                        <div>
                            <h3 class="contact__title">Location</h3>
                            <span class="contatc__subtitle">Kandy, Sri Lanka</span>
                        </div>
                    </div>
                </div>

                <form action="" class="contact__form grid">
                    <div class="contact__inputs grid">
                        <div class="contact__content">
                            <label for="" class="contact__label">Name</label>
                            <input type="text" class="contact__input">
                        </div>

                        <div class="contact__content">
                            <label for="" class="contact__label">E-mail</label>
                            <input type="email" class="contact__input">
                        </div>
                    </div>

                    <div class="contact__content">
                        <label for="" class="contact__label">Subject</label>
                        <input type="text" class="contact__input">
                    </div>

                    <div class="contact__content">
                        <label for="" class="contact__label">Description</label>
                        <textarea name="" id="" cols="0" rows="7" class="contact__input"></textarea>
                    </div>

                    <div>
                        <a href="#" class="button button--flex">
                            Send message
                            <i class="uil uil-message button__icon"></i>
                        </a>
                    </div>
                </form>
            </div>

        </section>
    </main>

    <!--==================== FOOTER ====================-->
    <footer class="footer">

        <div class="footer__bg">
            <div class="footer__container container grid">
                <div>
                    <h1 class="footer__title">Ashutosh Mishra</h1>
                    <span class="footer__subtitle">Data Analyst</span>
                </div>

                <ul class="footer__links">
                    <li>
                        <a href="#services" class="footer__link">Services</a>
                    </li>
                    <li>
                        <a href="#portfolio" class="footer__link">Portfolio</a>
                    </li>
                    <li>
                        <a href="#contact" class="footer__link">Contact</a>
                    </li>
                </ul>

                <div class="footer__socials">
                    <a href=https://www.facebook.com/prashanna.drashan" target="_blank" class="footer__social">
                        <i class="uil uil-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/prashanna01/" target="_blank" class="footer__social">
                        <i class="uil uil-instagram"></i>
                    </a>
                    <a href="https://twitter.com/prashanna01" target="_blank" class="footer__social">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                </div>
            </div>
            <p class="footer__copy">© codewithashutosh. All rights reserved.</p>
        </div>
    </footer>

    <!--==================== SCROLL TOP ====================-->
    <a href="#" class="scrollup" id="scroll-up">
        <i class="uil uil-arrow-up scrollup__icon"></i>
    </a>
    

    <!--==================== SWIPER JS ====================-->
    <script src="./packages/js/swiper-bundle.min.js"></script>

    <!--==================== MAIN JS ====================-->
    <script src="./packages/js/main.js"></script>
</body>

</html>

Image Preview:

Creating a Responsive Portfolio Website with HTML, CSS

styles.css

/* ==================== GOOGLE FONTS ====================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*==================== VARIABLES CSS ====================*/
:root {
  --header-height: 3rem;

  /*========== Colors ==========*/
  /* Change favorite color */
  --hue-color: 190; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

  /* HSL color mode */
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;
  --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);

  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;

  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes Bottom ==========*/
  /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*========== Variables Dark theme ==========*/
body.dark-theme {
  /* HSL color mode */
  --first-color-second: hsl(var(--hue-color), 30%, 8%);
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: hsl(var(--hue-color), 28%, 12%);
  --container-color: hsl(var(--hue-color), 29%, 16%);
  --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
  --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/*========== Button Dark/Light ==========*/
.nav__btns {
  display: flex;
  align-items: center;
}

.change-theme {
  font-size: 1.25rem;
  color: var(--title-color);
  margin-right: var(--mb-1);
  cursor: pointer;
}

.change-theme:hover {
  color: var(--first-color);
}

/*==================== BASE ====================*/

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

/*==================== REUSABLE CSS CLASSES ====================*/
.section {
  padding: 2rem 0 4rem;
  margin-bottom: 40px;
}

.section__title {
  font-size: var(--h1-font-size);
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-2);
}

.section__title,
.section__subtitle {
  text-align: center;
}

/*==================== LAYOUT ====================*/

.container {
  max-width: 768px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*==================== NAV ====================*/
.nav {
  max-width: 968px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__logo:hover {
  color: var(--first-color);
}

.nav__toggle {
  font-size: 1.1rem;
  cursor: pointer;
}

.nav__toggle:hover {
  color: var(--first-color);
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: 0.3s;
  }
}

.nav__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__icon {
  font-size: 1.2rem;
}

.nav__close {
  position: absolute;
  right: 1.3rem;
  bottom: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--first-color);
}

.nav__close:hover {
  color: var(--first-color-alt);
}

/* show menu */
.show-menu {
  bottom: 0;
}

/* Active link */
.active-link {
  color: var(--first-color);
}

/* Change background header */
.scroll-header {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}

/*==================== HOME ====================*/

.home__container {
  gap: 1rem;
}

.home__content {
  grid-template-columns: 0.5fr 3fr;
  padding-top: 3.5rem;
  align-items: center;
}

.home__social {
  display: grid;
  grid-template-columns: max-content;
  row-gap: 1rem;
}

.home__social-icon {
  font-size: 1.25rem;
  color: var(--first-color);
}

.home__social-icon:hover {
  color: var(--first-color-alt);
}

.home__blob {
  width: 200px;
  fill: var(--first-color);
}

.home__blob-img {
  width: 220px;
}

.home__data {
  grid-column: 1/3;
}

.home__title {
  font-size: var(--big-font-size);
}

.home__subtitle {
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-0-75);
}

.home__description {
  margin-bottom: var(--mb-2);
}

.home__scroll {
  display: none;
}

.home__scroll-button {
  color: var(--first-color);
  transition: 0.3s;
}

.home__scroll-button:hover {
  transform: translateY(0.25rem);
}

.home__scroll-mouse {
  font-size: 2rem;
}

.home__scroll-name {
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-right: var(--mb-0-25);
}

.home__scroll-arrow {
  font-size: 1.25rem;
}
/*==================== BUTTONS ====================*/

.button {
  display: inline-block;
  background-color: var(--first-color);
  color: #ffff;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
}

.button:hover {
  background-color: var(--first-color-alt);
}

.button__icon {
  font-size: 1.2rem;
  margin-left: var(--mb-0-5);
  transition: 0.3s;
}

.button--white {
  background-color: #fff;
  color: var(--first-color);
}

.button--white:hover {
  background-color: #fff;
}

.button--flex {
  display: inline-flex;
  align-items: center;
  transition: 0.3s;
}

.button--small {
  padding: 0.75rem 1rem;
}

.button--link {
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
}

.button--link:hover {
  background-color: transparent;
  color: var(--first-color-alt);
}

/*==================== ABOUT ====================*/
.about__img {
  width: 200px;
  border-radius: 0.5rem;
  justify-self: center;
  align-items: center;
}

.about__description {
  text-align: center;
  margin-bottom: var(--mb-2-5);
}

.about__info {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2-5);
}

.about__info-title {
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.about__info-name {
  font-size: var(--smaller-font-size);
}

.about__info-title,
.about__info-name {
  display: block;
  text-align: center;
}

.about__buttons {
  display: flex;
  justify-content: center;
}

/*==================== SKILLS ====================*/

.skills__container {
  row-gap: 0;
}

.skills__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-2-5);
  cursor: pointer;
}

.skills__icon,
.skills__arrow {
  font-size: 2rem;
  color: var(--first-color);
}

.skills__icon {
  margin-right: var(--mb-0-75);
}

.skills__title {
  font-size: var(--h3-font-size);
}

.skills__subtitle {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.skills__arrow {
  margin-left: auto;
  transition: 0.4s;
}

.skills__list {
  row-gap: 1.5rem;
  padding-left: 2.7rem;
}

.skills__titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--mb-0-5);
}

.skills__name {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.skills__bar,
.skills__percentage {
  height: 5px;
  border-radius: 0.25rem;
}

.skills__bar {
  background-color: var(--first-color-lighter);
}

.skills__percentage {
  display: block;
  background-color: var(--first-color);
}

.skills__html {
  width: 90%;
}

.skills__css {
  width: 80%;
}

.skills__js {
  width: 60%;
}

.skills__wordpress {
  width: 70%;
}

.skills__python {
  width: 60%;
}

.skills__tab {
  width: 70%;
}

.skills__sql {
  width: 50%;
}

.skills__google {
  width: 70%;
}

.skills__bank {
  width: 80%;
}

.skills__google {
  width: 70%;
}

.skills__counter {
  width: 80%;
}

.skills__office {
  width: 90%;
}

.skills__close .skills__list {
  height: 0;
  overflow: hidden;
}

.skills__open .skills__list {
  height: max-content;
  margin-bottom: var(--mb-2-5);
}

.skills__open .skills__arrow {
  transform: rotate(-180deg);
}

/*==================== QUALIFICATION ====================*/
.qualification__tabs {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2);
}

.qualification__button {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.qualification__button:hover {
  color: var(--first-color);
}

.qualification__icon {
  font-size: 1.8rem;
  margin-right: var(--mb-0-25);
}

.qualification__data {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  column-gap: 1.5rem;
}

.qualification__title {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.qualification__subtitle {
  display: inline-block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-1);
}

.qualification__calendar {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  /* margin-bottom: var(--mb-1) */
}

.qualification__rounder {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: var(--first-color);
  border-radius: 50%;
}

.qualification__line {
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--first-color);
  transform: translate(6px, -7px);
}

.qualification__content[data-content] {
  display: none;
}

.qualification__active[data-content] {
  display: block;
}

.qualification__button.qualification__active {
  color: var(--first-color);
}

/*==================== SERVICES ====================*/
.services__container {
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

.services__content {
  position: relative;
  background-color: var(--container-color);
  padding: 3.5rem 0.5rem 1.25rem 1.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

.services__content:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.services__icon {
  display: block;
  font-size: 1.5rem;
  color: var(--first-color);
  margin-bottom: var(--mb-1);
}

.services__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
}

.services__button {
  cursor: pointer;
  font-size: var(--small-font-size);
}

.services__button:hover .button__icon {
  transform: translateX(0.25rem);
}

.services__modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.services__modal-content {
  position: relative;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.services__modal-services {
  row-gap: 1rem;
}

.services__modal-service {
  display: flex;
}

.services__modal-title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1-5);
}

.services__modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--first-color);
  cursor: pointer;
}

.services__modal-icon {
  color: var(--first-color);
  margin-right: var(--mb-0-25);
}

/* Active Modal */
.active-modal {
  opacity: 1;
  visibility: visible;
}

/*==================== PORTFOLIO ====================*/
.portfolio__container {
  overflow: initial;
}

.portfolio__content {
  padding: 0 1.5rem;
}

.portfolio__img {
  width: 265px;
  border-radius: 0.5rem;
  justify-self: center;
}

.portfolio__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}

.portfolio__description {
  margin-bottom: var(--mb-0-75);
}

.portfolio__button:hover .button__icon {
  transform: translateX(0.25rem);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-portfolio-icon {
  font-size: 2rem;
  color: var(--first-color);
}

.swiper-button-prev {
  left: -0.5rem;
}

.swiper-button-next {
  right: -0.5rem;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -2.5rem;
}

.swiper-pagination-bullet-active {
  background-color: var(--first-color);
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullet {
  outline: none;
}
/*==================== PROJECT IN MIND ====================*/
.project {
  text-align: center;
}

.project__bg {
  background-color: var(--first-color-second);
  padding-top: 3rem;
}

.project__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-0-75);
}

.project__description {
  margin-bottom: var(--mb-1-5);
}

.project__title,
.project__description {
  color: #fff;
}

.project__img {
  width: 232px;
  justify-self: center;
}

/*==================== TESTIMONIAL ====================*/
.testimonial__data,
.testimonial__header {
  display: flex;
}

.testimonial__data {
  justify-content: space-between;
  margin-bottom: var(--mb-1);
}

.testimonial__img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: var(--mb-0-75);
}

.testimonial__name {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.testimonial__client {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.testimonial__description {
  margin-bottom: var(--mb-2-5);
}

.testimonial__icon-star {
  color: var(--first-color);
}

.swiper-container .swiper-pagination-testimonial {
  bottom: 0;
}

/*==================== CONTACT ME ====================*/
.contact__container {
  row-gap: 3rem;
}

.contact__information {
  display: flex;
  margin-bottom: var(--mb-2);
}

.contact__icon {
  font-size: 1.5rem;
  color: var(--first-color);
  margin-right: var(--mb-0-75);
}

.content__title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.contact__subtitle {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

.contact__content {
  background-color: var(--input-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
}

.contact__label {
  font-size: var(--smaller-font-size);
  color: var(--title-color);
}

.contact__input {
  width: 100%;
  background-color: var(--input-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem 0.5rem 0;
}

/*==================== FOOTER ====================*/
.footer {
  padding-top: 2rem;
}

.footer__container {
  row-gap: 3.5rem;
}

.footer__bg {
  background-color: var(--first-color-second);
  padding: 2rem 0 3rem;
}

.footer__title {
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}

.footer__subtitle {
  font-size: var(--small-font-size);
}

.footer__links {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.footer__link:hover {
  color: var(--first-color-lighter);
}

.footer__social {
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer__social:hover {
  color: var(--first-color-lighter);
}

.footer__copy {
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
  color: #fff;
}

/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--first-color);
  opacity: 0.8;
  padding: 0 0.3rem;
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
}

.scrollup:hover {
  background-color: var(--first-color-alt);
}

.scrollup__icon {
  font-size: 1.5rem;
  color: #fff;
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
}

/*========== SCROLL BAR ==========*/
::-webkit-scrollbar {
  width: 0.6rem;
  background-color: var(--scroll-bar-color);
  border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-light);
}

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 380px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .nav__menu {
    padding: 2rem 0.25rem 4rem;
  }

  .nav__list {
    column-gap: 0;
  }

  .home__content {
    grid-template-columns: 0.35fr 3fr;
  }

  .home__blob {
    width: 250px;
  }

  .home__social-icon {
    width: 30px;
  }

  .home__subtitle {
    font-size: 24px;
  }

  .home__description {
    font-size: 18px;
  }

  .home__button {
    font-size: 20px;
  }

  .skills__title {
    font-size: var(--normal-font-size);
  }
  .qualification__data {
    gap: 0.5rem;
  }

  .services__container {
    grid-template-columns: max-content;
    justify-content: center;
  }

  .services__content {
    padding-right: 3.5rem;
  }
  .services__modal {
    padding: 0 0.5rem;
  }

  .project__img {
    width: 200px;
  }

  .testimonial__header,
  .testimonial__data {
    flex-direction: column;
    align-items: center;
  }

  .testimonial__img {
    margin-right: 0;
    margin-bottom: var(--mb-0-25);
  }

  .testimonial__data,
  .testimonial__description {
    text-align: center;
  }
}

/* For medium devices */
@media screen and (min-width: 568px) {
  .home__content {
    grid-template-columns: max-content 1fr 1fr;
  }

  .home__data {
    grid-column: initial;
  }
  .home__img {
    order: 1;
    justify-self: center;
  }

  .about__container,
  .skills_container,
  .portfolio__content,
  .project__container,
  .contact__container,
  .footer__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .qualification__sections {
    display: grid;
    grid-template-columns: 0.6fr;
    justify-content: center;
  }

  @media screen and (min-width: 768px) {
    .container {
      margin-left: auto;
      margin-right: auto;
    }

    .body {
      margin: 0;
    }
    .section {
      padding: 6rem 0 2rem;
    }
    .section__subtitle {
      margin-bottom: 4rem;
    }
    .header {
      top: 0;
      bottom: initial;
    }

    .header,
    .main,
    .footer__container {
      padding: 0 1rem;
    }

    .nav {
      height: calc(var(--header-height) + 1.5rem);
      column-gap: 1rem;
    }
    .nav__icon,
    .nav__close,
    .nav__toggle {
      display: none;
    }

    .nav__list {
      display: flex;
      column-gap: 2rem;
    }

    .nav__menu {
      margin-left: auto;
    }
    .change-theme {
      margin: 0;
    }

    .home__container {
      row-gap: 5rem;
    }

    .home__content {
      padding-top: 5.5rem;
      column-gap: 2rem;
    }
    .home__blob {
      width: 270px;
    }
    .home__scroll {
      display: block;
    }
    .home__scroll-button {
      margin-left: 3rem;
    }
    .about__container {
      column-gap: 5rem;
    }
    .about__img {
      width: 350px;
    }
    .about__description {
      text-align: initial;
    }
    .about__info {
      justify-content: space-between;
    }
    .about__buttons {
      justify-content: initial;
    }
    .qualification__tabs {
      justify-content: center;
    }
    .qualification__button {
      margin: 0 var(--mb-1);
    }

    .qualification__sections {
      grid-template-columns: 0.5fr;
    }
    .services__container {
      grid-template-columns: repeat(3, 218px);
      justify-content: center;
    }
    .services__icon {
      font-size: 2rem;
    }
    .services__content {
      padding: 6rem 0 2rem 2.5rem;
    }

    .services__modal-content {
      width: 450px;
    }
    .portfolio__img {
      width: 320px;
    }
    .portfolio__content {
      align-items: center;
    }
    .project {
      text-align: initial;
    }
    .project__bg {
      background: none;
    }
    .project__container {
      background-color: var(--first-color-second);
      border-radius: 1rem;
      padding: 3rem 2.5rem 0;
      grid-template-columns: 1fr max-content;
      column-gap: 3rem;
    }
    .project__data {
      padding-top: 0.8rem;
    }
    .footer__container {
      grid-template-columns: repeat(3, 1fr);
    }
    .footer__bg {
      padding: 3rem 0 3.5rem;
    }

    .footer__links {
      flex-direction: row;
      column-gap: 2rem;
    }
    .footer__socials {
      justify-self: flex-end;
    }
    .footer__copy {
      margin-top: 4.5rem;
    }
  }
}

/* For large devices */
@media screen and (min-width: 1024px) {
  body {
    margin: 0;
  }

  .header,
  .main,
  .footer__container {
    padding: 0;
  }
  .home__blob {
    width: 320px;
  }
  .home__social {
    transform: translateX(-6rem);
  }
  .services__container {
    grid-template-columns: repeat(3, 238px);
  }
  .portfolio__content {
    column-gap: 5rem;
  }

  .project__container {
    padding-bottom: 30px;
  }

  .swiper-portfolio-icon {
    font-size: 3.5rem;
  }
  .swiper-button-prev {
    left: -3.5rem;
  }
  .swiper-button-next {
    right: -3.5rem;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -4.5rem;
  }

  .contact__form {
    width: 460px;
  }
  .contact__inputs {
    grid-template-columns: repeat(2, 1fr);
  }
}

Image Preview:

Creating a Responsive Portfolio Website with HTML, CSS

Full Video Output Preview Of Portfolio:

Here is the complete code of Portfolio Website: Github

And Here is a Live Portfolio Website : Portfolio

10. Conclusion

A responsive portfolio website is one of the best investments you can make for your career. By using HTML, CSS, and JavaScript, you have full control over the design and functionality. This project’s folder structure makes it easy to understand and customize.

Whether you’re applying for a job, looking for freelance clients, or just showcasing your creativity, this site can be your 24/7 online showcase.

Take the time to personalize it, keep it updated with your latest work, and share it widely — it might just open the door to your next big opportunity.

Thank you for reading our blog on CodeWithRandom!
We hope this guide on creating a responsive portfolio website with HTML, CSS, and JavaScript was helpful. If you found it useful, share it with your friends, and don’t forget to check out our other coding tutorials for more web development tips. Keep learning, keep building, and happy coding!

 

FAQ

Q1: Do I need coding experience to build a responsive portfolio website?
No. If you follow this step-by-step guide, even beginners can create a clean and professional portfolio using HTML, CSS, and JavaScript.

Q2: Can I customize the design of this portfolio?
Yes! You can change colors, fonts, images, and even add or remove sections according to your needs.

Q3: Is this portfolio mobile-friendly?
Absolutely. The responsive design ensures it works on all devices, including desktops, tablets, and smartphones.

 

I'm a Freelancer and Article Author

Contattaci

1 thought on “Creating a Responsive Portfolio Website with HTML, CSS”

  1. Pingback: How to Understand Programming Logic Without Getting Confused

Leave a Comment