index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vasanth.M</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="mediaqueries.css" />
  </head>
  <body>
    <nav id="desktop-nav">
      <div class="logo">Vasanth.M</div>
      <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="#contact">Contact</a></li>
          <li>
            <img
              id="modeToggle"
              class="icon color-icon"
              src="./assets/theme_light.png"
              src-light="./assets/theme_light.png"
              src-dark="./assets/theme_dark.png"
              alt="Color them icon"
            />
          </li>
        </ul>
      </div>
    </nav>
    <nav id="hamburger-nav">
      <div class="logo">Vasanth.M</div>
      <div class="hamburger-menu">
        <div class="hamburger-icon" onclick="toggleMenu()">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="menu-links">
          <li><a href="#about" onclick="toggleMenu()">About</a></li>
          <li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
          <li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
          <li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
          <li>
            <img
              id="modeToggle2"
              class="icon color-icon"
              src="./assets/theme_light.png"
              src-light="./assets/theme_light.png"
              src-dark="./assets/theme_dark.png"
              alt="Color them icon"
            />
          </li>
        </div>
      </div>
    </nav>
    <section id="profile">
      <div class="section__pic-container">
        <img class="pic"  src="./assets/gupta.jpg" alt="Vasanth profile picture" />
      </div>
      <div class="section__text" id="shiv">
        <p class="section__text__p1">Hello, I'm</p>
        <h1 class="title">Vasanth.M</h1>
        <p class="section__text__p2">Frontend Developer</p>
        <div class="btn-container">
          <button
          class="btn btn-color-2"
            onclick="window.open('./assets/vasanth Resume.pdf')"
          >
            Download CV
          </button>
          <button class="btn btn-color-1" onclick="location.href='./#contact'">
            Contact Info
          </button>
        </div>
        <div id="socials-container">
          <img
            src="./assets/linkedin_light.png"
            src-light="./assets/linkedin_light.png"
            src-dark="./assets/linkedin_dark.png"
            alt="My LinkedIn profile"
            class="icon linkedin-icon"
            onclick="location.href='https://www.linkedin.com/in/vasanth2004/'"
          />
          <img
            src="./assets/github_light.png"
            src-light="./assets/github_light.png"
            src-dark="./assets/github_dark.png"
            alt="My github profile"
            class="icon github-icon"
            onclick="location.href='https://github.com/Vasanth6379'"
          />
        </div>
      </div>
    </section>
    <section id="about">
      <p class="section__text__p1" id="get">Get To Know More</p>
      <h1 class="title">About Me</h1>
      <div class="section-container">
        <div class="section__pic-container">
           <img
            src="./assets/shiv.jpg"
            alt="Profile picture"
            class="about-pic"
          />
        </div>
        <div class="about-details-container">
          <div class="about-containers">
            <div class="details-container">
              <img
                src="./assets/experience_light.png"
                src-light="./assets/experience_light.png"
                src-dark="./assets/experience_dark.png"
                alt="Experience icon"
                class="icon"
              />
              <h3>Fresher</h3>
              <p> websites Developer</p>
            </div>
            <div class="details-container">
              <img
                src="./assets/education_light.png"
             cdd    src-light="./assets/education_light.png"
                src-dark="./assets/education_dark.png"
                alt="Education icon"
                class="icon"
              />
              <h3>Education</h3>
              <p>BE<br />Computer Science</p>  <p> III-Year</p>
            </div>
          </div>
          <div class="text-container">
            <p>
              Created dynamic and responsive websites with HTML, CSS, JavaScript, and latest frameworks. 
              Created easy-to-use user interfaces and web 
              performance optimized for smooth user experiences.
            </p>
          </div>
        </div>
      </div>
      <img
        src="./assets/arrow_light.png"
        src-light="./assets/arrow_light.png"
        src-dark="./assets/arrow_dark.png"
        alt="Arrow icon"
        class="icon arrow"
        onclick="location.href='./#experience'"
      />
    </section>
    <section id="experience">
      <p class="section__text__p1"> Explore </p>
      <h1 class="title">My Skills</h1>
      <div class="experience-details-container">
        <div class="about-containers">
          <div class="details-container">
            <h2 class="experience-sub-title">Skills</h2>
            <div class="article-container">
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>HTML</h3>
                  <p>Advance</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                <h3>CSS</h3>
                  <p>Advance</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>App</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>JavaScript</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Git Github</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Figma</h3>
                  <p>Intermediate</p>
                </div>
              </article>
            </div>
          </div>
          <div class="details-container">
            <h2 class="experience-sub-title">Other Skills
            </h2>
            <div class="article-container">
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Designing</h3>
                  <p>Technical</p>
                
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Management Skill</h3>
                  <p>Event</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Photoshop</h3>
                  <p>Poster design</p>
                </div>
              </article>
              <article>
                <img
                  src="./assets/checkmark_light.png"
                  src-light="./assets/checkmark_light.png"
                  src-dark="./assets/checkmark_dark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Content Creater</h3>
                  <p>Unique</p>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
      <img
        src="./assets/arrow_light.png"
        src-light="./assets/arrow_light.png"
        src-dark="./assets/arrow_dark.png"
        alt="Arrow icon"
        class="icon arrow"
        onclick="location.href='./#projects'"
      />
    </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
                src="./assets/vasa.png"
                alt="Project 1"
                class="project-img"
              />
            </div>
            <h2 class="experience-sub-title project-title">My Portfolio</h2>
            <div class="btn-container">
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='http://127.0.0.1:5500/index.html'"
              >
                Github link
              </button>
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='http://127.0.0.1:5500/index.html'"
              >
                Live Demo
              </button>
            </div>
          </div>
          <div class="details-container color-container">
            <div class="article-container">
              <img
                src="./assets/git.png"
                alt="Project 2"
                class="project-img"
              />
            </div>
            <h2 class="experience-sub-title project-title">Project Two</h2>
            <div class="btn-container">
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/Vasanth6379'"
i
                 > Github link
              
                
              </button>
            <div class="btn-container">
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/Vasanth6379/vm.git'"
              >
                Live Demo
              </button>
            </div>
          </div>
        </div>
      </div>
      <img
        src="./assets/arrow_light.png"
        src-light="./assets/arrow_light.png"
        src-dark="./assets/arrow_dark.png"
        alt="Arrow icon"
        class="icon arrow"
        onclick="location.href='./#contact'"
      />
    </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
            src="./assets/email_light.png"
            src-light="./assets/email_light.png"
            src-dark="./assets/email_dark.png"
            alt="Email icon"
            class="icon contact-icon email-icon"
          />
          <p><a href="mailto:guptashivanshi250@gmail.com">vasanthm371@gmail.com</a></p>
        </div>
        <div class="contact-info-container">
          <img
            src="./assets/linkedin_light.png"
            src-light="./assets/linkedin_light.png"
            src-dark="./assets/linkedin_dark.png"
            alt="My LinkedIn profile"
            class="icon linkedin-icon"
            onclick="location.href='http://www.linkedin.com/in/vasanth2004'"
          />
          <p><a href="http://www.linkedin.com/in/vasanth2004">linkdein</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="#contact">Contact</a></li>
          </ul>
        </div>
      </nav>
      <p>Copyright &#169; 2025 Vasanth.M . All Rights Reserved.</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>