.png "Responsive Portfolio Website using HTML CSS JavaScript")
Introduction
Hello coders, welcome to another new blog. Today in this article we’ll learn to create a interactive portfolio. This portfolio design is unique and its UI is very interactive. A portfolio is something which works as your resume. In your portfolio you can add the skills, projects and your information.
To create this portfolio we’ve used HTML, CSS and JavaScript. These three core frontend technologies are used to create our portfolio. HTML sets up the basic structure of website, in other words we can say that it sets up the skeleton of our website. CSS adds styling to our web page or portfolio page and make it interactive. At last JavaScript adds functionality to our webpage.
If you guys also want to create this type of portfolio on your own then just don’t need to worry about it. To create this type of portfolio all you need is the good command on HTML, CSS and JavaScript. If you have good amount of knowledge in these technologies then you’re good to go. Usually these type of projects improve and enhance our core coding skills. Let’s understand the code.
Index.html
This is our HTML code which sets up the basic structure of our website. This is usually used to create skeleton of a website. You’ll find the code below which is used to create basic structure of our interactive portfolio. Let’s breakdown the code.
- <! DOCTYPE html> : This defines the type of our document and ensures that our file a HTML code file.
- <title> : It sets the title of our portfolio page.
- <link> : This tag links external CSS file and swiper bundle CSS link to our HTML file.
- <body> : This contains the content of the page.
- <header> : header contains a nav tag with class container. It contains a logo name and a navigation menu. Each menu component wrapped within a li tag and lastly header tag contains a theme button and toggle menu button.
- <main class=”main”> : This contains all the content of the page wrapped in the main section.
- <section class=”home”> : This section contains all the home page content. This contains the short and brief intro about you. This section contains some div and anchor tags for setup the elements.
- <section class=”about”> : This section contains some headings for the idea of the section. It contains a brief introduction about yourself and all your work experience.
- <section class=”skills”> : It contains all your technical core skills which you can showcase to HR and interviewer.
- <section class=”qualification”> : This contains all your qualification journey and shows that what degree you have which makes a massive impact on your resume.
- <section class=”services”> : Services section shows that what services you provide. It contains all the information about the services you provide to clients.
- <section class=”portfolio”> : This section contains all the project that you’ve made in past. In this section you displays all your projects. These projects helps to enhance your portfolio.
- <section class=”project”> : This section works as a contact section meaning that if client has any project he can connect with you.
- <section class=”testimonial”> : It contains different div tags to store testimonials and display them on your portfolio. These testimonials are helpful to get client over the internet.
- <section class=”contact”> : This section contains the contact information of your like email and linkedIn profile.
- <footer> : footer contains all the quick links in the footer to get quick access of the sections.
- <a class=”scrollup”> : This contains a button to scroll on top of the page.
- <script> : It links all the script files to the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Goutam</title>
<link rel="stylesheet" href="Libraries/swiper-bundle.min.css" />
<link rel="stylesheet" href="Css/style.css" />
</head>
<body>
<!-- header -->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav-logo">Goutam Prajapat</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="fa-solid fa-house nav-icon"></i> Home</a
>
</li>
<li class="nav-item">
<a href="#about" class="nav-link"
><i class="fa-solid fa-user nav-icon"></i> About</a
>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link"
><i class="fa-solid fa-file nav-icon"></i> Skills</a
>
</li>
<li class="nav-item">
<a href="#services" class="nav-link"
><i class="fa-solid fa-briefcase nav-icon"></i> Services</a
>
</li>
<li class="nav-item">
<a href="#portfolio" class="nav-link"
><i class="fa-solid fa-image nav-icon"></i> Projects</a
>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link"
><i class="fa-solid fa-message nav-icon"></i> Contact</a
>
</li>
</ul>
<i class="fa-solid fa-xmark nav-close" id="nav-close"></i>
</div>
<div class="nav-btns">
<!-- theme btn -->
<i class="fa-regular fa-moon change-theme" id="theme-button"></i>
<div class="nav-toggle" id="nav-toggle">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
</header>
<main class="main">
<section class="home section" id="home">
<div class="home-container container grid">
<div class="home-content grid">
<div class="home-social">
<a
href="/"
target="_blank"
class="home-social-icon"
>
<i class="fa-brands fa-linkedin-in"></i>
</a>
<a
href="/"
target="_blank"
class="home-social-icon"
>
<i class="fa-brands fa-instagram"></i>
</a>
<a
href="/"
target="_blank"
class="home-social-icon"
>
<i class="fa-brands fa-github"></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="-15"
y="-5"
href="Assets/Icons/logo1.png"
/>
</g>
</svg>
</div>
<div class="home-data">
<h1 class="home-title">Hi, I am Goutam Prajapat</h1>
<h3 class="home-subtitle">Frontend Developer</h3>
<p class="home-description">
Passionate frontend developer specializing in pixel-perfect web
design.
</p>
<a href="#contact" class="button button-flex">
Contact Me <i class="fa-regular fa-envelope button-icon"></i>
</a>
</div>
</div>
<div class="home-scroll">
<a href="#about" class="home-scroll-button button-flex">
<!-- <i class="fa-solid fa-computer-mouse home-scroll-mouse"></i> -->
<img class="home-scroll-mouse" src="Assets/mouse.svg" alt="" />
<span class="home-scroll-name">Scroll down</span>
<i class="fa-solid fa-angles-down home-scroll-arrow"></i>
</a>
</div>
</div>
</section>
<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="Assets/Icons/aboutimg.png" alt="" class="about-img" />
<div class="about-data">
<p class="about-description">
An accomplished Frontend Developer with a passion for creating
seamless user experiences. With a solid foundation in HTML, CSS,
and JavaScript, I specialize in crafting visually captivating and
intuitively navigable websites. Leveraging my expertise in
responsive design and UI/UX principles, I bring concepts to life,
ensuring each project is a masterpiece of precision and
functionality.
</p>
<div class="about-info">
<div>
<span class="about-info-title">02+</span>
<span class="about-info-name"
>Years <br />
experience</span
>
</div>
<div>
<span class="about-info-title">20+</span>
<span class="about-info-name"
>Completed <br />
project</span
>
</div>
<div>
<span class="about-info-title">06+</span>
<span class="about-info-name"
>Companies <br />
worked</span
>
</div>
</div>
<div class="about-buttons">
<a
download=""
href="/Assets/Resume.pdf"
class="button button-flex"
>
Download Resume<i
class="fa-solid fa-file-arrow-down button-icon"
></i>
</a>
</div>
</div>
</div>
</section>
<!-- skills and qualification -->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<span class="section-subtitle">My Technical Skills</span>
<div class="skills-content container">
<div class="skills-name">JavaScript</div>
<div class="skills-name">React JS</div>
<div class="skills-name">Tailwind CSS</div>
<div class="skills-name">Bootstrap</div>
<div class="skills-name">CSS</div>
<div class="skills-name">SASS</div>
<div class="skills-name">Figma</div>
<div class="skills-name">Node JS</div>
<div class="skills-name">Express JS</div>
<div class="skills-name">MongoDB</div>
<div class="skills-name">Photoshop</div>
<div class="skills-name">Python</div>
</div>
</section>
<section class="qualification section">
<h2 class="section-title">Qualification</h2>
<span class="section-subtitle">My journey</span>
<div class="qualification-container container">
<div class="qualification-tabs">
<div
class="qualification-button button-flex qualification-active"
data-target="#education"
>
<i class="fa-solid fa-graduation-cap qualification-icon"></i>
Education
</div>
<div class="qualification-button button-flex" data-target="#work">
<i class="fa-solid fa-briefcase qualification-icon"></i>
Work
</div>
</div>
<div class="qualification-section">
<div
class="qualification-content qualification-active"
data-content
id="education"
>
<!-- qualifi 1 -->
<div class="qualification-data">
<div>
<h3 class="qualification-title">
Computer Science Engineering
</h3>
<span class="qualification-subtitle">GCET Kashmir</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2022 - 2026
</div>
</div>
<div>
<span class="qualification-round"></span>
<span class="qualification-line"></span>
</div>
</div>
<!-- qualifi 2 -->
<div class="qualification-data">
<div></div>
<div>
<span class="qualification-round"></span>
<span class="qualification-line"></span>
</div>
<div>
<h3 class="qualification-title">
Full Stack Web Development
</h3>
<span class="qualification-subtitle">Udemy</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2021 - 2022
</div>
</div>
</div>
<!-- qualifi 3 -->
<div class="qualification-data">
<div>
<h3 class="qualification-title">Frontend Development</h3>
<span class="qualification-subtitle">Coursera</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2021 - 2022
</div>
</div>
<div>
<span class="qualification-round"></span>
<span class="qualification-line"></span>
</div>
</div>
<!-- qualifi 4 -->
<div class="qualification-data">
<div></div>
<div>
<span class="qualification-round"></span>
<!-- <span class="qualification-line"></span> -->
</div>
<div>
<h3 class="qualification-title">Digital Marketing</h3>
<span class="qualification-subtitle">Google</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2019 - 2020
</div>
</div>
</div>
</div>
<!-- qualific content 2 -->
<div class="qualification-content" data-content id="work">
<!-- qualifi 1 -->
<div class="qualification-data">
<div>
<h3 class="qualification-title">Full Stack Developer</h3>
<span class="qualification-subtitle">Fiverr</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2022 - Present
</div>
</div>
<div>
<span class="qualification-round"></span>
<span class="qualification-line"></span>
</div>
</div>
<!-- qualifi 2 -->
<div class="qualification-data">
<div></div>
<div>
<span class="qualification-round"></span>
<span class="qualification-line"></span>
</div>
<div>
<h3 class="qualification-title">Ui/Ux Designer</h3>
<span class="qualification-subtitle">Freelancer</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2022 - Present
</div>
</div>
</div>
<!-- qualifi 3 -->
<div class="qualification-data">
<div>
<h3 class="qualification-title">Content Creator</h3>
<span class="qualification-subtitle">YouTube</span>
<div class="qualification-date">
<i class="fa-solid fa-calendar-days"></i>
2019 - Present
</div>
</div>
<div>
<span class="qualification-round"></span>
<!-- <span class="qualification-line"></span> -->
</div>
</div>
</div>
</div>
</div>
</section>
<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">
<!-- service 1 -->
<div class="services-content">
<div>
<i class="fa-solid fa-code services-icon"></i>
<h3 class="services-title">
Frontend <br />
Developer
</h3>
</div>
<span
class="button button-flex button-small button-link services-button"
>
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h4 class="services-box-title">
Frontend <br />
Developer
</h4>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Responsive Web Design</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Interactive User Interfaces</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>SEO-Friendly Implementations</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Accessibility and UX Enhancement</p>
</li>
</ul>
</div>
</div>
</div>
<!-- service 2 -->
<div class="services-content">
<div>
<i class="fa-brands fa-uikit services-icon"></i>
<h3 class="services-title">
Ui/Ux <br />
Designer
</h3>
</div>
<span
class="button button-flex button-small button-link services-button"
>
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h4 class="services-box-title">
Ui/Ux <br />
Designer
</h4>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Intuitive User Interface Design</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Responsive and Mobile-First Design</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Seamless User Experience Optimization</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Accessibility and Usability Enhancements</p>
</li>
</ul>
</div>
</div>
</div>
<!-- service 3 -->
<div class="services-content">
<div>
<i class="fa-solid fa-hashtag services-icon"></i>
<h3 class="services-title">
Content<br />
Creation
</h3>
</div>
<span
class="button button-flex button-small button-link services-button"
>
View more
<i class="fa-solid fa-arrow-right button-icon"></i>
</span>
<div class="services-box">
<div class="services-box-content">
<h4 class="services-box-title">
Content <br />
Creation
</h4>
<i class="fa-solid fa-xmark services-box-close"></i>
<ul class="services-box-services grid">
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Engaging Visual Content</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Social Media Management</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Content Strategy Consulting</p>
</li>
<li class="services-box-list">
<i
class="fa-regular fa-circle-check services-list-icon"
></i>
<p>Brand Development and Growth</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- portfolio -->
<section class="portfolio section" id="portfolio">
<h2 class="section-title">Projects</h2>
<span class="section-subtitle">Most recent work</span>
<div class="portfolio-container container swiper-container">
<div class="swiper-wrapper">
<!-- project1 -->
<div class="portfolio-content grid swiper-slide">
<img src="Assets/project1.svg" alt="" class="portfolio-img" />
<div class="portfolio-data">
<h3 class="portfolio-title">Business Websites</h3>
<p class="portfolio-description">
Dynamic business sites that reflect your brand and engage
customers effectively.
</p>
<a
href="https://github.com/GoutamPrajapat59/developergtm-Responsive-Website"
target="_blank"
class="button button-flex button-small portfolio-button"
>Project Link
<i class="fa-solid fa-arrow-right button-icon"></i
></a>
</div>
</div>
<!-- project2 -->
<div class="portfolio-content grid swiper-slide">
<img src="Assets/project2.svg" alt="" class="portfolio-img" />
<div class="portfolio-data">
<h3 class="portfolio-title">Portfolio Websites</h3>
<p class="portfolio-description">
Impressive portfolio sites that showcase your talents with a
flawless user experience.
</p>
<a
href="https://github.com/GoutamPrajapat59/Hypefolio"
target="_blank"
class="button button-flex button-small portfolio-button"
>Project Link
<i class="fa-solid fa-arrow-right button-icon"></i
></a>
</div>
</div>
<!-- project3 -->
<div class="portfolio-content grid swiper-slide">
<img src="Assets/project3.svg" alt="" class="portfolio-img" />
<div class="portfolio-data">
<h3 class="portfolio-title">Landing Pages</h3>
<p class="portfolio-description">
Compelling landing pages that drive conversions and engage
your audience.
</p>
<a
href="https://github.com/GoutamPrajapat59/Hypefolio"
target="_blank"
class="button button-flex button-small portfolio-button"
>Project Link
<i class="fa-solid fa-arrow-right button-icon"></i
></a>
</div>
</div>
</div>
<div class="swiper-angles">
<div class="swiper-button-next">
<i class="fa-solid fa-angle-right swiper-icon"></i>
</div>
<div class="swiper-button-prev">
<i class="fa-solid fa-angle-left swiper-icon"></i>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="project-contact section">
<div class="project-bg">
<div class="project-container container grid">
<div class="project-data">
<h2 class="project-title">Do you have a new project?</h2>
<p class="project-description">
Contact me now and get a 50% discount on your new project.
</p>
<a href="#contact" class="button button-flex button-white"
>Contact Me
<i
class="fa-regular fa-comment-dots project-icon button-icon"
></i>
</a>
</div>
<img src="Assets/Icons/contactme.png" alt="" class="project-img" />
</div>
</div>
</section>
<!-- testimonial -->
<section class="testimonial section">
<h2 class="section-title">Testimonial</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="Assets/Icons/testimonial1.png"
alt=""
class="testimonial-img"
/>
<div>
<h3 class="testimonial-name">Malik Asif</h3>
<span class="testimonial-client">Client</span>
</div>
</div>
<div>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
</div>
</div>
<p class="testimonial-description">
The website you designed, Goutam, is a testament to your
creativity and expertise. Every detail showcases your dedication
to delivering excellence. Thank you for bringing my vision to
life!
</p>
</div>
<!-- testimonia 2 -->
<div class="testimonial-content swiper-slide">
<div class="testimonial-data">
<div class="testimonial-header">
<img
src="Assets/Icons/testimonial2.png"
alt=""
class="testimonial-img"
/>
<div>
<h3 class="testimonial-name">Faizan Farooq</h3>
<span class="testimonial-client">Client</span>
</div>
</div>
<div>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
</div>
</div>
<p class="testimonial-description">
Goutam, your exceptional talent and dedication shine through in
the stunning website you've crafted for me. It exceeds my
expectations in every way, and I'm truly grateful for your
outstanding work!
</p>
</div>
<!-- testimonial 3-->
<div class="testimonial-content swiper-slide">
<div class="testimonial-data">
<div class="testimonial-header">
<img
src="Assets/Icons/testimonial3.png"
alt=""
class="testimonial-img"
/>
<div>
<h3 class="testimonial-name">Faheem Prajapat</h3>
<span class="testimonial-client">Client</span>
</div>
</div>
<div>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
<i class="fa-regular fa-star testimonial-icon"></i>
</div>
</div>
<p class="testimonial-description">
Harris is a remarkable frontend developer with an eye for detail
and a knack for creating visually stunning user interfaces.
</p>
</div>
</div>
<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-info">
<i class="fa-regular fa-envelope contact-icon"></i>
<div>
<h3 class="contact-title">Email</h3>
<a
href="mailto:business.developergtm@gmail.com"
target="_blank"
class="contact-subtitle"
>business.developergtm@gmail.com</a
>
</div>
</div>
<div class="contact-info">
<i class="fa-brands fa-linkedin-in contact-icon"></i>
<div>
<h3 class="contact-title">Linkedin</h3>
<a
class="contact-subtitle"
href="https://www.linkedin.com/in/GoutamPrajapat59/"
target="_blank"
>@GoutamPrajapat59</a
>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="footer">
<div class="footer-bg">
<div class="footer-container container grid">
<div>
<h1 class="footer-title">Goutam Prajapat</h1>
<span class="footer-subtitle">Frontend developer</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.linkedin.com/in/GoutamPrajapat59/"
target="_blank"
class="footer-social"
>
<i class="fa-brands fa-linkedin-in"></i>
</a>
<a
href="https://github.com/GoutamPrajapat59"
target="_blank"
target="_blank"
class="footer-social"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.instagram.com/developergtm_/"
target="_blank"
class="footer-social"
>
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
<p class="footer-copy">By Goutam Prajapat - developergtm</p>
</div>
</footer>
</main>
<a href="#home" class="scrollup" id="scroll-up">
<i class="fa-solid fa-arrow-up scroll-up-icon"></i>
</a>
<script src="Libraries/swiper-bundle.min.js"></script>
<script
src="https://kit.fontawesome.com/9b634c15bd.js"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>
Style.css
This is our CSS code which styles all the elements of our webpage such as home, about, skills, services page etc. CSS adds interactivity to these pages for keep engaging the user to our portfolio.
- The code starts by importing the google poppins font.
- :root element sets the variables for the styling which can be used later in the webpage to style.
- Additionally, there's a dark mode. The website employs the same variables but assigns them to dark values when in a dark mode. This makes the theme changes very smooth.
- By utilizing media queries, the file guarantees that the website is easily accessible on any device. The browser is directed to use the font size for screens that are small.
- Besides fixing some of the default browser styles, the file also restores them to their original layout, eliminating any irregular spacing or size issues.
- It uses.grid and.container to frame the layout, keeping everything in place and properly spaced.". "About, " "Skills," and "Services " have similar frameworks on the site, making them feel like they are a complete set.
- To make buttons and links appear clickable and pleasing when used with a mouse pointer, they come in different styles. Additionally, these buttons are customizable.
This is a brief understanding about our CSS code. You can check the code below.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
:root {
--header-height: 3rem;
--hue-color: 250;
--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%);
--body-font: "Poppins", sans-serif;
--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-medium: 500;
--font-semi-bold: 600;
--margin-bottom-0-25: 0.25rem;
--margin-bottom-0-5: 0.5rem;
--margin-bottom-0-75: 0.75rem;
--margin-bottom-0-1: 1rem;
--margin-bottom-0-1-5: 1.5rem;
--margin-bottom-0-2: 2rem;
--margin-bottom-0-2-5: 2.5rem;
--margin-bottom-0-3: 3rem;
--z-tooltip: 10;
--z-fixed: 100;
--z-model: 100;
@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.873rem;
--smaller-font-size: 0.813rem;
}
}
}
/* dark color scheme */
body.dark-theme {
--first-color-second: hsl(var(--hue-color), 30%, 8%);
--title-color: hsl(var(--hue-color), 8%, 95%);
--text-color: 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%);
transition: 0.3s ease-in;
}
.nav-btns {
display: flex;
align-items: center;
}
/* theme */
.change-theme {
font-size: 1.25rem;
color: var(--title-color);
margin-right: 1rem;
cursor: pointer;
}
.change-theme:hover {
color: var(--first-color);
}
/* theme transition */
.header,
.footer-bg {
transition: 0.3s ease-in;
}
* {
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);
transition: 0.3s ease-in;
}
h1,
h2,
h3,
h4 {
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/* resuable css class */
.section {
padding: 2rem 0 4rem;
}
.section-title {
font-size: var(--h1-font-size);
}
.section-subtitle {
display: block;
font-size: var(--small-font-size);
margin-bottom: var(--margin-bottom-0-3);
}
.section-title,
.section-subtitle {
text-align: center;
}
/* layout */
.container {
max-width: 768px;
margin-left: var(--margin-bottom-0-1-5);
margin-right: var(--margin-bottom-0-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);
}
.scroll-header {
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
.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 {
bottom: 0;
}
.active-link {
color: var(--first-color);
}
.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: 240px;
}
.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(--margin-bottom-0-75);
}
.home-description {
margin-bottom: var(--margin-bottom-0-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 {
margin-right: 0.125rem;
width: 24px;
}
.home-scroll-name {
font-size: var(--small-font-size);
color: var(--title-color);
font-weight: var(--font-medium);
margin-right: var(--margin-bottom-0-25);
}
.home-scroll-arrow {
font-size: 1rem;
}
/* buttons */
.button {
display: inline-block;
background-color: var(--first-color);
color: #fff;
padding: 1rem;
border-radius: 0.5rem;
font-weight: var(--font-medium);
}
.button:hover {
background-color: var(--first-color-alt);
}
.button-icon {
font-size: 1.25rem;
margin-left: var(--margin-bottom-0-5);
transition: 0.3s;
}
.button-flex {
display: inline-flex;
align-items: center;
}
.button-small {
padding: 0.75rem 1rem;
}
.button-white {
background-color: #fff;
color: var(--first-color);
}
.button-white:hover {
background-color: #f1f1f1;
}
.button-link {
padding: 0;
background-color: transparent;
color: var(--first-color-alt);
}
.button-link:hover {
background-color: transparent;
color: #5b0888;
}
/* about */
.about-img {
width: 200px;
border: 0.5rem;
justify-self: center;
align-items: center;
filter: drop-shadow(1px 1px 1px var(--first-color-lighter));
transition: 0.3s;
}
.about-img:hover {
filter: drop-shadow(2px 2px 2px var(--first-color-lighter));
}
.about-description {
text-align: center;
margin-bottom: var(--margin-bottom-0-2-5);
}
.about-info {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--margin-bottom-0-2-5);
}
.about-info-title {
font-size: var(--h2-font-size);
font-weight: var(--font-semi-bold);
color: #713abe;
}
.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-content {
display: flex;
flex-wrap: wrap;
}
.skills-name {
padding: 0.8rem 1.25rem;
margin-bottom: 1rem;
margin-right: 1rem;
font-size: var(--small-font-size);
background: var(--first-color-lighter);
border-radius: 5px;
font-weight: 600;
color: var(--title-color);
transition: 0.3s ease;
}
.skills-name:hover {
background-color: var(--first-color-alt);
}
/* qualifi */
.qualification-tabs {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--margin-bottom-0-2);
}
.qualification-button {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
cursor: pointer;
color: hsl(var(--hue-color), 8%, 45%);
}
.qualification-button:hover {
color: var(--first-color);
}
.qualification-icon {
font-size: 1.25rem;
margin-right: var(--margin-bottom-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(--margin-bottom-0-1);
}
.qualification-date {
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
.qualification-round {
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 [data-content] {
display: none;
}
.qualification-active[data-content] {
display: block;
}
.qualification-button.qualification-active {
color: #5b0888;
}
/* 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.15);
}
.services-icon {
display: block;
font-size: 1.5rem;
color: var(--first-color);
margin-bottom: var(--margin-bottom-0-1);
}
.services-title {
font-size: var(--h3-font-size);
margin-bottom: var(--margin-bottom-0-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-box {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
z-index: var(--z-model);
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.services-box-content {
position: relative;
background-color: var(--container-color);
padding: 1.5rem;
border-radius: 0.5rem;
}
.services-box-services {
row-gap: 1rem;
}
.services-box-list {
display: flex;
}
.services-box-title {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
margin-bottom: var(--margin-bottom-0-1-5);
}
.services-box-close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
color: var(--first-color);
cursor: pointer;
}
.services-list-icon {
color: var(--first-color);
margin-top: 0.25rem;
margin-right: var(--margin-bottom-0-25);
}
.active-box {
opacity: 1;
visibility: visible;
}
/* projects */
.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(--margin-bottom-0-5);
}
.portfolio-description {
margin-bottom: var(--margin-bottom-0-75);
}
.portfolio-button:hover .button-icon {
transform: translateX(0.25rem);
}
/* projects */
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
}
.swiper-icon {
font-size: 1.25rem;
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-angles {
position: relative;
bottom: 170px;
}
.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(--margin-bottom-0-75);
}
.project-description {
margin-bottom: var(--margin-bottom-0-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(--margin-bottom-0-1);
}
.testimonial-img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: var(--margin-bottom-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(--margin-bottom-0-2-5);
}
.testimonial-icon {
color: var(--first-color);
}
.swiper-container .swiper-pagination-testimonial {
bottom: 0;
}
/* contact section */
.contact-container {
row-gap: 3rem;
}
.contact-info {
display: flex;
margin-bottom: var(--margin-bottom-0-2);
}
.contact-icon {
font-size: 1.5rem;
color: var(--first-color);
margin-right: var(--margin-bottom-0-75);
margin-top: 15px;
}
.contact-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);
}
/* 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(--margin-bottom-0-25);
}
.footer-subtitle {
font-size: var(--small-font-size);
}
.footer-links {
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.footer-link {
/* hii */
}
.footer-link:hover {
color: var(--first-color-lighter);
}
.footer-social {
font-size: 1.25rem;
margin-right: var(--margin-bottom-0-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(--margin-bottom-0-3);
}
.footer-title,
.footer-subtitle,
.footer-link,
.footer-social {
color: #fff;
}
.scrollup {
position: fixed;
right: 1rem;
bottom: -20%;
background-color: var(--first-color);
opacity: 0.8;
padding: 0.2rem 0.4rem;
border-radius: 0.4rem;
z-index: var(--z-tooltip);
transition: 0.4s;
}
.scrollup:hover {
background-color: var(--first-color-alt);
}
.scroll-up-icon {
font-size: 1.25rem;
color: #fff;
}
.show-scroll {
bottom: 5rem;
}
/* scroll thumb and 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;
}
/* media queries */
/* small devices */
@media screen and (max-width: 350px) {
.container {
margin-left: var(--margin-bottom-0-1);
margin-right: var(--margin-bottom-0-1);
}
.nav-menu {
padding: 2rem 0.25rem 4rem;
}
.nav-list {
column-gap: 0;
}
.home-content {
grid-template-columns: 0.25fr 3fr;
}
.home-blob {
width: 180px;
}
.skills-name {
font-size: var(--small-font-size);
}
.qualification-data {
gap: 0.5rem;
}
.services-container {
grid-template-columns: max-content;
justify-content: center;
}
.services-content {
padding-right: 3.5rem;
}
.services-box {
padding: 0 0.5rem;
}
.project-img {
width: 200px;
}
.testimonial-data,
.testimonial-header {
flex-direction: column;
align-items: center;
}
.testimonial-img {
margin-right: 0;
margin-bottom: var(--margin-bottom-0-25);
}
.testimonial-data,
.testimonial-description {
text-align: center;
}
}
/* medium devices */
@media screen and (min-width: 568px) {
.home-content {
grid-template-columns: max-content 1fr 1fr;
}
.home-data {
grid-column: initial;
}
.home-blob-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-section {
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-toggle,
.nav-close {
display: none !important;
}
.nav-list {
display: flex;
column-gap: 2rem;
}
.nav-menu {
margin-left: auto;
}
.change-theme {
margin: 0;
}
.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(--margin-bottom-0-1);
}
.qualification {
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-box-content {
width: 450px;
}
.portfolio-img {
width: 320px;
}
.portfolio-content {
align-items: center;
}
.project {
text-align: inherit;
}
.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-social {
justify-self: flex-end;
}
.footer-copy {
margin-top: 4.5rem;
}
}
/* large devices */
@media screen and (min-width: 1024px) {
.heder,
.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;
}
.swiper-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;
}
}
Script.js
This is our JavaScript code which adds functionality to our code. JavaScript usually used to add and provide interactive functionality to webpage which enhances user interactivity on our website. This JavaScript code does the same work as it adds some functionality to our portfolio page. Let’s breakdown it.
- The code starts by accessing the html elements into our code.
- There’s a nav toggle button in the code which works as opening and closing menu button on click for smaller screens.
- The linkAction function use to close the menu from smaller screens on click.
- In the qualification tab there are some sections like "Education" and "Experience." When you click on one of these, it displays that section and hides the others.
- In the service section there are boxes which pops up on that particular box click. When you click on the box it’ll pop up and shows the description about the services section.
- There is functionality in the portfolio that when you scroll down and according to the section where you are on the portfolio the active link changes according to specific section id.
- When you scroll down to the page then it changes the header background and adds some shadow to make it visible.
- There is also a scroll up and switch theme button. SwiperJs is used for sliding the testimonials.
const navMenu = document.getElementById("nav-menu"),
navToggle = document.getElementById("nav-toggle"),
navClose = document.getElementById("nav-close");
if (navToggle) {
navToggle.addEventListener("click", () => {
navMenu.classList.add("show-menu");
});
}
if (navClose) {
navClose.addEventListener("click", () => {
navMenu.classList.remove("show-menu");
});
}
// remove menu mobile
const navLink = document.querySelectorAll(".nav-link");
function linkAction() {
const navMenu = document.getElementById("nav-menu");
navMenu.classList.remove("show-menu");
}
navLink.forEach((n) => n.addEventListener("click", linkAction));
// qualifi
const tabs = document.querySelectorAll("[data-target]"),
tabContents = document.querySelectorAll("[data-content]");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
const target = document.querySelector(tab.dataset.target);
tabContents.forEach((tabContent) => {
tabContent.classList.remove("qualification-active");
});
target.classList.add("qualification-active");
tabs.forEach((tab) => {
tab.classList.remove("qualification-active");
});
tab.classList.add("qualification-active");
});
});
// services box
const boxViews = document.querySelectorAll(".services-box"),
boxBtns = document.querySelectorAll(".services-button"),
boxCloses = document.querySelectorAll(".services-box-close");
let box = function (boxClick) {
boxViews[boxClick].classList.add("active-box");
};
boxBtns.forEach((boxBtn, i) => {
boxBtn.addEventListener("click", () => {
box(i);
});
});
boxCloses.forEach((boxClose) => {
boxClose.addEventListener("click", () => {
boxViews.forEach((boxView) => {
boxView.classList.remove("active-box");
});
});
});
//scroll section active link
const sections = document.querySelectorAll("section[id]");
function scrollActive() {
const scrollY = window.pageYOffset;
sections.forEach((current) => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute("id");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document
.querySelector(".nav-menu a[href*=" + sectionId + "]")
.classList.add("active-link");
} else {
document
.querySelector(".nav-menu a[href*=" + sectionId + "]")
.classList.remove("active-link");
}
});
}
window.addEventListener("scroll", scrollActive);
// change bg header
function scrollHeader() {
const nav = document.getElementById("header");
// When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag
if (this.scrollY >= 200) nav.classList.add("scroll-header");
else nav.classList.remove("scroll-header");
}
window.addEventListener("scroll", scrollHeader);
/*==================== SHOW SCROLL TOP ====================*/
function scrollUp() {
const scrollUp = document.getElementById("scroll-up");
// When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
if (this.scrollY >= 560) scrollUp.classList.add("show-scroll");
else scrollUp.classList.remove("show-scroll");
}
window.addEventListener("scroll", scrollUp);
//dark light mode------------------
const themeButton = document.getElementById("theme-button");
const darkTheme = "dark-theme";
const iconTheme = "fa-sun";
// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem("selected-theme");
const selectedIcon = localStorage.getItem("selected-icon");
// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () =>
document.body.classList.contains(darkTheme) ? "dark" : "light";
const getCurrentIcon = () =>
themeButton.classList.contains(iconTheme) ? "fa-moon" : "fa-sun";
// We validate if the user previously chose a topic
if (selectedTheme) {
// If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
document.body.classList[selectedTheme === "dark" ? "add" : "remove"](
darkTheme
);
themeButton.classList[selectedIcon === "fa-moon" ? "add" : "remove"](
iconTheme
);
}
// Activate / deactivate the theme manually with the button
themeButton.addEventListener("click", () => {
// Add or remove the dark / icon theme
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(iconTheme);
// We save the theme and the current icon that the user chose
localStorage.setItem("selected-theme", getCurrentTheme());
localStorage.setItem("selected-icon", getCurrentIcon());
});
//swiper
let swiperPortfolio = new Swiper(".portfolio-container", {
cssMode: true,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
let swiperTestimonial = new Swiper(".testimonial-container", {
cssMode: true,
loop: true,
spaceBetween: 48,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
568: {
slidesPerView: 2,
},
},
});
No comments:
Post a Comment