Personal Portfolio using HTML, CSS and JavaScript With Source Code

Personal Portfolio using HTML, CSS and JavaScript

Introduction :

This Portfolio website is a representation of your skills, experience, and personality. It serves as a showcase for potential employers or clients to understand who you are and what you bring to the table. Let’s dive into the various sections of your HTML, CSS, and JavaScript code to understand how your portfolio website works.

Creating a personal portfolio offers several advantages for individuals in various fields, especially for professionals like software developers.

  1. Showcasing Skills and Work:

    • A portfolio allows you to showcase your skills, projects, and accomplishments. It serves as a visual representation of your capabilities, providing potential employers or clients with tangible evidence of your expertise.
  2. Professional Branding:

    • A well-designed portfolio contributes to your professional branding. It allows you to control the narrative about yourself, emphasizing your strengths, unique qualities, and the value you bring to the table.
  3. First Impression:

    • In many cases, your portfolio is the first impression a potential employer or client has of you. A visually appealing and well-organized portfolio can capture attention and make a positive impact, setting you apart from others.
  4. Online Presence:

    • Having an online portfolio establishes a digital presence for you. In the age of technology, employers often search for candidates online. A portfolio ensures that the information you want to convey is readily available and easily accessible.
  5. Documentation of Growth:

    • Over time, your portfolio serves as a documentation of your professional growth. As you add new projects, experiences, and skills, your portfolio evolves, showcasing your development and adaptability.
  6. Networking Opportunities:

    • Sharing your portfolio on professional networking platforms, such as LinkedIn, increases your visibility. It provides an opportunity for networking, collaboration, and connection with like-minded professionals or potential employers.
  7. Differentiation in Job Searches:

    • In competitive job markets, a portfolio can be a key differentiator. It allows you to go beyond a traditional resume, providing a more in-depth view of your capabilities and accomplishments.

Explanation :

HTML Structure:

  • The HTML structure defines the various sections of your website, including navigation, profile, about, experience, projects, blogs, contact, and footer.
  • Navigation includes both desktop and hamburger menu options.
  • Sections like “profile,” “about,” “experience,” “projects,” “blogs,” and “contact” have their respective content.
  • The footer contains navigation links and copyright information.
  • Structure:

    1. Header:

      • Meta tags for character set, viewport, and title.
      • External CSS files for styling.
      • Desktop and hamburger navigation menus.
    2. Body:

      • Sections for profile, about, experience, projects, blogs, contact, and footer.
      • Script tag for including JavaScript file.
    3. Profile Section:

      • Displays your profile picture, name, job title, and buttons to see the resume or contact information.
      • Social media links for LinkedIn and GitHub.
    4. About Section:

      • Describes your educational background, experience, and skills.
      • Includes an arrow icon for navigation.
    5. Experience Section:

      • Lists your experience in frontend development, backend development, and tools/software proficiency.
      • Each skill/experience is accompanied by an icon and a description.
    6. Projects Section:

      • Displays your recent projects with images, titles, and buttons for GitHub and live demo links.
    7. Blogs Section:

      • Showcases your recent blogs with images, titles, and buttons for reading.
    8. Contact Section:

      • Provides your email and LinkedIn contact information.
    9. Footer:

      • Contains navigation links and copyright information

CSS Styling:

  • The CSS code provides styling for different sections and elements.
  • It defines general styles, transitions, and hover effects for links and buttons.
  • Specific styles are applied to the desktop and hamburger navigation menus.
  • Sections like profile, about, experience, projects, blogs, contact, and footer have distinct styling to create a visually appealing layout.
  • The use of flexbox and grid layout techniques helps in achieving a responsive design.

JavaScript Logic:

    • The JavaScript code defines a toggleMenu function that toggles the opening and closing of the hamburger menu.
    • The menu and icon elements are selected using document.querySelector, and their classes are toggled between “open” and not “open.”
    • toggleMenu Function:
      • Purpose: To handle the opening and closing of the hamburger menu.
      • It toggles the visibility of the menu and changes the hamburger icon’s appearance.

Source Code :

HTML (index.html)

Your download is starting now...
				
					



    
    
    
    <title>My Portfolio</title>
    
    



    <nav id="desktop-nav">
        <div class="logo">John Doe</div>
        &lt;!-- <button class="theme">Theme</button> --&gt;
        <div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#blogs">Blogs</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    <nav id="hamburger-nav">
        <div class="logo">John Doe</div>
        <div class="hamburger-menu">
            <div class="hamburger-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="menu-links">
                <li><a href="#about">About</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#blogs">Blogs</a></li>
                <li><a href="#contact">Contact</a></li>
            </div>
        </div>
    </nav>
    <section id="profile">
        <div class="section__pic-container">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="profile1" data-src="assets/profile-pic.jpg" alt="John Doe's profile picture" title="John Doe" />
        </div>
        <div class="section__text">
            <p class="section__text__p1">Hello, I'm</p>
            <h1 class="title">John Doe</h1>
            <p class="section__text__p2">Software Developer</p>
            <div class="btn-container">
                <a href="https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf" target="_blank" rel="noopener">
                    <button class="btn btn-color-2">
                        See Resume

                    </button>
                </a>
                <button class="btn btn-color-1">
                    Contact Info
                </button>
            </div>
            <div id="socials-container">
                <a target="_blank" href="https://www.linkedin.com/" rel="noopener">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/linkedin.png" alt="My LinkedIn profile" class="icon" />
                </a>

                <a target="_blank" href="https://github.com/" rel="noopener">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/github.png" alt="My Github profile" class="icon" />
                </a>
            </div>
        </div>
    </section>
    <section id="about">
        <p class="section__text__p1">Get To Know More</p>
        <h1 class="title" id="aboutTitle">About Me</h1>
        <div class="section-container">

            <div class="about-details-container">
                <div class="about-containers">
                    <div class="details-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/experience.png" alt="Experience icon" class="icon" />
                        <h3>Educational Experience</h3>
                        <p>2+ years <br />Frontend/Backend Development</p>
                    </div>
                    <div class="details-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/education.png" alt="Education icon" class="icon" />
                        <h3>Education</h3>
                        <p>Bachelor of Computer Application<br /></p>
                    </div>
                </div>
                <div class="text-container">
                    <p><span class="highlight"></span>
                        I'm <span class="highlight">Software Developer</span> from India, I build apps with
                        a focus on
                        <span class="highlight">JavaScript React &amp; Redux</span> considering
                        all the aspects of <span class="highlight">UI/UX</span> . I enjoy turning complex problems into
                        simple,
                        beautiful and intuitive designs. <br> A
                        <span class="highlight">Software Engineer</span> , who loves to solve problems.

                        I am having an experience of building high-performing, responsive, beautiful web applications to
                        deliver a
                        unique, intuitive user experience that works, also <span class="highlight"> keen interest in
                            UI/UX</span>
                        with some nice designing skills. <br> I
                        am a well-trained teammate who loves to share ideas and prioritizes communication in order to
                        achieve goals
                        within the set deadlines. I enjoy being challenged and working on projects that require me to
                        step outside
                        of my comfort zone.
                    </p>
                </div>
            </div>
        </div>
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" />
    </section>
    <section id="experience">
        <p class="section__text__p1">Explore My</p>
        <h1 class="title">Experience</h1>
        <div class="experience-details-container">
            <div class="about-containers">
                <div class="details-container">
                    <h2 class="experience-sub-title">Frontend Development</h2>
                    <div class="article-container">
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>HTML5</h3>
                                <p>Experienced</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>CSS3</h3>
                                <p>Experienced</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>JavaScript</h3>
                                <p>Experienced</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>React</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Redux</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        &lt;!-- <article>
              <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
              <div>
                <h3>TypeScript</h3>
                <i>Basic</i>
                <p>Intermediate</p>
              </div>
            </article> --&gt;
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Tailwind </h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Bootstrap </h3>
                                <p>Intermediate</p>
                            </div>
                        </article>

                        &lt;!-- <article>
              <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
              <div>
                <h3>React</h3>
                <p>Basic</p>
              </div>
            </article> --&gt;

                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Material UI</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                    </div>
                </div>
                <div class="details-container">
                    <h2 class="experience-sub-title">Development Tools &amp; Softwares</h2>
                    <div class="article-container">
                        &lt;!-- <article>
              <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
              <div>
                <h3>Git</h3>
                <p>Basic</p>
              </div>
            </article> --&gt;
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Git</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>GitHub</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Figma</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Canva</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article>
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>Netlify</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>
                        <article id="lastSkill">
                            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/checkmark.png" alt="Experience icon" class="icon" />
                            <div>
                                <h3>VS Code</h3>
                                <p>Intermediate</p>
                            </div>
                        </article>


                    </div>
                </div>
            </div>
        </div>
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" />
    </section>

    

    <section id="projects">
        <p class="section__text__p1">Browse My Recent</p>
        <h1 class="title">Projects</h1>
        <div class="experience-details-container">
            <div class="about-containers">
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/projects/proj1.jpg" alt="Project 3" class="project-img" />
                    </div>
                    <h2 class="experience-sub-title project-title">Project 1</h2>
                    <div class="btn-container">
                        <a target="_blank" href="https://github.com/" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Github
                            </button>
                        </a>

                        <a target="_blank" href="https://github.com" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Live Demo
                            </button>
                        </a>
                    </div>
                </div>
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/projects/proj1.jpg" alt="Project 1" class="project-img" />
                    </div>
                    <h2 class="experience-sub-title project-title">Project 2</h2>
                    <div class="btn-container">
                        <a href="https://github.com/nikhilkamble02/" target="_blank" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Github
                            </button>
                        </a>
                        <a target="_blank" href="https://github.com" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Live Demo
                            </button>
                        </a>
                    </div>
                </div>
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/projects/proj1.jpg" alt="Project 2" class="project-img" />
                    </div>
                    <h2 class="experience-sub-title project-title" style="font-size: 1.2rem">Project 3</h2>
                    <div class="btn-container">
                        <a href="https://github.com/" target="_blank" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Github
                            </button>
                        </a>
                        <a target="_blank" href="https://github.com/" rel="noopener">

                            <button class="btn btn-color-2 project-btn">
                                Live Demo
                            </button>
                        </a>
                        &lt;!--                         <button class="btn btn-color-2 project-btn">
                            Github
                        </button>
                        <button disabled class="btn btn-color-2 project-btn">
                            Live Demo
                        </button> --&gt;
                    </div>
                </div>

            </div>
        </div>
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" />





    </section>

    
    <section id="blogs">
        <p class="section__text__p1">Have a Look on My Recent</p>
        <h1 class="title">Blogs</h1>
        <div class="experience-details-container">
            <div class="about-containers">
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/blogs/blog demo.png" alt="Project 1" class="blog-img" />
                    </div>
                    <h2 class="experience-sub-title project-title" style="font-size:1.55rem">"Blog Title 1"</h2>
                    <div class="btn-container">
                        <a target="_blank" href="https://medium.com/" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Read
                            </button>
                        </a>
                        &lt;!-- <button class="btn btn-color-2 project-btn">
              Live Demo
            </button> --&gt;
                    </div>
                </div>
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/blogs/blog demo.png" alt="Project 2" class="blog-img" />
                    </div>
                    <h2 class="experience-sub-title project-title">"Blog Title 2"</h2>
                    <div class="btn-container">
                        <a target="_blank" href="https://medium.com/" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Read
                            </button>
                        </a>
                        &lt;!-- <button class="btn btn-color-2 project-btn">
              Live Demo
            </button> --&gt;
                    </div>
                </div>
                <div class="details-container color-container">
                    <div class="article-container">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/blogs/blog demo.png" alt="Project 3" class="blog-img" />
                    </div>

                    <h2 class="experience-sub-title project-title">"Blog Title 3"</h2>
                    <div class="btn-container">
                        <a target="_blank" href="https://medium.com/" rel="noopener">
                            <button class="btn btn-color-2 project-btn">
                                Read
                            </button>
                        </a>
                        &lt;!-- <button class="btn btn-color-2 project-btn">
              Live Demo
            </button> --&gt;
                    </div>
                </div>
            </div>
        </div>
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" />
    </section>


    

    <section id="contact">
        <p class="section__text__p1">Get in Touch</p>
        <h1 class="title">Contact Me</h1>
        <div class="contact-info-upper-container">
            <div class="contact-info-container">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/email.png" alt="Email icon" class="icon contact-icon email-icon" />
                <p><a href="mailto:johndoe123@gmail.com">johndoe123@gmail.com</a></p>
            </div>
            <div class="contact-info-container">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="./assets/linkedin.png" alt="LinkedIn icon" class="icon contact-icon" />
                <p><a target="_blank" href="https://www.linkedin.com/" rel="noopener">LinkedIn</a></p>
            </div>
        </div>
    </section>

    

    <footer>
        <nav>
            <div class="nav-links-container">
                <ul class="nav-links">
                    <li><a href="#about">About</a></li>
                    <li><a href="#experience">Experience</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#blogs">Blogs</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <p>Copyright &#169; 2024 @John Doe. All Rights Reserved.</p>
    </footer>
    



				
			

CSS (style.css)

				
					
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&amp;display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
   overflow-x: hidden;
  /* font-family: 'Nunito', sans-serif; */

}

html {
  scroll-behavior: smooth;
}

p {
  color: rgb(85, 85, 85);
}

/* TRANSITION */

a,
.btn {
  transition: all 300ms ease;
}

/* DESKTOP NAV */

nav,
.nav-links {
  display: flex;
}

nav {
  justify-content: space-around;
  align-items: center;
  height: 17vh;
}

.nav-links {
  gap: 2rem;
  list-style: none;
  font-size: 1.5rem;
  opacity: .7;
}

a {
  color: black;
  text-decoration: none;
  text-decoration-color: white;
}

a:hover {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 1rem;
  text-decoration-color: rgb(181, 181, 181);
}

.logo {
  font-size: 2rem;
  opacity: .85;
}

.logo:hover {
  cursor: default;
}

/* HAMBURGER MENU */

#hamburger-nav {
  display: none;
}

.hamburger-menu {
  position: relative;
  display: inline-block;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 30px;
  cursor: pointer;
}

.hamburger-icon span {
  width: 100%;
  height: 2px;
  background-color: black;
  transition: all 0.3 ease-in-out;
}

.menu-links {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  width: fit-content;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3 ease-in-out;
}

.menu-links a {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: black;
  text-decoration: none;
  transition: all 0.3 ease-in-out;
}

.menu-links li {
  list-style: none;
}

.menu-links.open {
  max-height: 300px;
}

.hamburger-icon.open span:first-child {
  transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.open span:last-child {
  transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
  transform: none;
}

.hamburger-icon span:first-child {
  opacity: 1;
}

.hamburger-icon span:first-child {
  transform: none;
}

/* SECTIONS */

section {
  padding-top: 4vh;
  height: 96vh;
  margin: 0 10rem;
  box-sizing: border-box;
  min-height: fit-content;
}

.section-container {
  display: flex;
}

/* PROFILE SECTION */

#profile {
  display: flex;
  justify-content: center;
  gap: 5rem;
  height: 80vh;
}
#profile1{
  border-radius: 50%;
  /* width: 23rem;
  height: 23rem; */
}

.section__pic-container {
  display: flex;
  height: 300px;
  width: 300px;
  margin: auto 0;
}

.section__text {
  align-self: center;
  text-align: center;
}

.section__text p {
  font-weight: 600;
}

.section__text__p1 {
  text-align: center;
}

.section__text__p2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.title {
  font-size: 3rem;
  text-align: center;
  opacity: .92;
  /* margin-bottom: 2rem; */
  
}

#socials-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

/* ICONS */

.icon {
  cursor: pointer;
  height: 2rem;
  /* opacity: ; */
}

/* BUTTONS */

.btn-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  font-weight: 600;
  transition: all 300ms ease;
  padding: 1rem;
  width: 8rem;
  border-radius: 2rem;
  /* font-weight: normal; */
}
a .btn {
  font-weight: 600;
  transition: all 300ms ease;
  padding: 1rem;
  width: 8rem;
  border-radius: 2rem;
}

.btn-color-1,
.btn-color-2 {
  border: rgb(53, 53, 53) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover {
  cursor: pointer;
}

.btn-color-1,
.btn-color-2:hover {
  background: rgb(53, 53, 53);
  color: white;
}

.btn-color-1:hover {
  background: rgb(0, 0, 0);
}

.btn-color-2 {
  background: none;
}

.btn-color-2:hover {
  border: rgb(255, 255, 255) 0.1rem solid;
}

.btn-container {
  gap: 1rem;
}

/* ABOUT SECTION */

#about {
  position: relative;
}

.about-containers {
  gap: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
  /* width: 100%; */
}

.about-details-container {
  justify-content: center;
  flex-direction: column;
  width: 60vw;
  margin: auto;
}

.about-containers,
.about-details-container {
  display: flex;
  /* width: 80vw; */
}

.about-pic {
  border-radius: 2rem;
}

.arrow {
  position: absolute;
  right: -5rem;
  bottom: 2.5rem;
}

.details-container {
  padding: 1.5rem;
  flex: 1;
  background: white;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  text-align: center;
  
}

.section-container {
  gap: 4rem;
  height: 80%;
}

/* .section__pic-container {
  height: 400px;
  width: 400px;
  margin: auto 0;
} */

/* EXPERIENCE SECTION */

#experience {
  position: relative;
}

.experience-sub-title {
  color: rgb(85, 85, 85);
  font-weight: 600;
  font-size: 1.75rem;
  margin-bottom: 2rem;
}

.experience-details-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.article-container {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2.5rem;
  margin: auto;
  /* margin: 0 3rem; */
  justify-content: space-around;
  
}

article {
  display: flex;
  width: 10rem;
  justify-content: space-around;
  /* margin-left: 1rem;
  /* gap: 0.5rem; */
}

article .icon {
  cursor: default;
}
article p {
  visibility: hidden;
}

/* PROJECTS SECTION */

#projects {
  position: relative;
}

.color-container {
  border-color: rgb(163, 163, 163);
  background: rgb(250, 250, 250);
}

.project-img, .blog-img {
  border-radius: 1rem;
  width: 90%;
  height: 90%;
  object-fit: cover;
  /* height: 25rem; */
  /* width: 100%; */
  /* display: block; */
  margin: auto;
 
}


.project-title {
  margin: 1rem;
  color: black;
  opacity: .8;
}

.project-btn {
  color: black;
  border-color: rgb(163, 163, 163);
}

/* blog  */

.blog-img {
  border-radius: 1rem;
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* height: 25rem; */
  /* width: 100%; */
  /* display: block; */
  margin: auto;
 
}

/* CONTACT */

#contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 70vh;
}

.contact-info-upper-container {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  border: rgb(53, 53, 53) 0.1rem solid;
  border-color: rgb(163, 163, 163);
  background: (250, 250, 250);
  margin: 2rem auto;
  padding: 0.5rem;
}

.contact-info-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem;
}

.contact-info-container p {
  font-size: larger;
}

.contact-icon {
  cursor: default;
}

.email-icon {
  height: 2.5rem;
}

/* FOOTER SECTION */

footer {
  height: 26vh;
  margin: 0 1rem;
}

footer p {
  text-align: center;
}


.highlight{
  font-weight: bolder;
}


/* theme */
.dark-mode{
  background-color: rgb(43, 43, 43);
  color: aliceblue;
}

.whiteText{
  color: aliceblue;
}


				
			

CSS (mediaqueries.css)

				
					@media screen and (max-width: 1400px) {
  #profile {
    height: 83vh;
    margin-bottom: 6rem;
  }

  .about-containers {
    flex-wrap: wrap;
  }

  #experience,
  .experience-details-container {
    margin-top: 2rem;
    margin-bottom: 20rem;
  }
}

@media screen and (max-width: 1200px) {
  #desktop-nav {
    display: none;
  }

  #hamburger-nav {
    display: flex;
  }

  #experience,
  .experience-details-container {
    margin-top: 2rem;
    margin-bottom: 20rem;
  }

  #profile,
  .section-container {
    display: block;
  }

  .arrow {
    display: none;
  }

  section,
  .section-container {
    height: fit-content;
  }

  section {
    margin: 0 5%;
  }

  .section__pic-container {
    width: 300px;
    height: 300px;
    margin: 0 auto 2rem;
  }

  .about-containers {
    margin-top: 0;
  }

  #aboutTitle {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 600px) {

  /* body{
    background-color: aqua;
  } */
  #contact,
  footer {
    height: 40vh;
  }

  #profile {
    height: 83vh;
    margin-bottom: 0;
  }

  article {
    font-size: 1rem;
  }

  footer nav {
    height: fit-content;
    margin-bottom: 2rem;
  }

  .about-containers,
  .contact-info-upper-container,
  .btn-container {
    flex-wrap: wrap;

  }

  .contact-info-container {
    margin: 0;
  }

  .contact-info-container p,
  .nav-links li a {
    font-size: 1rem;
  }

  .experience-sub-title {
    font-size: 1.25rem;
  }

  .logo {
    font-size: 1.5rem;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .section__pic-container {
    width: auto;
    height: 50vw;
    justify-content: center;
  }

  /* .section__pic-container {
    width: 300px;
    height: 300px;
    margin: 0 auto 2rem;
  } */
  .section__text__p2 {
    font-size: 1.25rem;
  }

  .about {
    margin-top: 5rem;
  }

  .title {
    font-size: 2rem;
    /* margin-bottom: 15rem; */
    /* margin-top: 4rem; */
  }

  #aboutTitle {
    margin-bottom: 2rem;
  }

  .text-container {
    text-align: justify;
    margin: none;
    padding: 0;
    /* width: 90vw; */

  }

  #projects {
    margin-bottom: 1rem;
  }

}
				
			

JavaScript (script.js)

				
					function toggleMenu() {
  const menu = document.querySelector(".menu-links");
  const icon = document.querySelector(".hamburger-icon");
  menu.classList.toggle("open");
  icon.classList.toggle("open");
}


				
			

Output :

OUTPUT
More HTML CSS JS Projects
Get Huge Discounts

Find More Projects

Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …

COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …

Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …

Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …

KBC Game using Python with Source Code Introduction : Welcome to this blog post on building a “Kaun Banega Crorepati” (KBC) game …

Basic Logging System in C++ With Source Code Introduction : It is one of the most important practices in software development. Logging …