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>Debarchana Mahapatra Portfolio</title>
    <link rel="stylesheet" href="portfolio.css" />
    <link rel="stylesheet" href="portfoliomediaqueries.css" />
  </head>
  <body>
    <nav id="desktop-nav">
      <div class="logo">Debarchana Mahapatra</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>
        </ul>
      </div>
    </nav>
    <nav id="hamburger-nav">
      <div class="logo">Debarchana Mahapatra</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>
        </div>
      </div>
    </nav>
    <section id="profile">
      <div class="section__pic-container">
        <img src="profile.jpg" alt="Debarchana Mahapatra profile picture" />
      </div>
      <div class="section__text">
        <p class="section__text__p1">Hello, I'm</p>
        <h1 class="title">Debarchana Mahapatra</h1>
        <p class="section__text__p2">Full Stack Java Developer and UI/UX Designer</p>
        <div class="btn-container">
          <button 
            class="btn btn-color-2"
            onclick="window.open('Debarchana Full Stack java developer.pdf')"
          >
            Download CV
          </button>
          <button class="btn btn-color-1" onclick="location.href='./#contact'">
            Contact Info
          </button>
        </div>
        <div id="socials-container">
          <img
            src="linkedin.png"
            alt="My LinkedIn profile"
            class="icon"
            onclick="location.href='https://www.linkedin.com/in/debarchana-mahapatra-092294159/'"
          />
          <img
            src="github.png"
            alt="My Github profile"
            class="icon"
            onclick="location.href='https://github.com/Debarchana-Mahapatra'"
          />
        </div>
      </div>
    </section>
    <section id="about">
      <p class="section__text__p1">Get To Know More</p>
      <h1 class="title">About Me</h1>
      <div class="section-container">
        <div class="section__pic-container">
          <img
            src="Debarchana.jpeg"
            alt="Profile picture"
            class="about-pic"
          />
        </div>
        <div class="about-details-container">
          <div class="about-containers">
            <div class="details-container">
              <img
                src="experience.png"
                alt="Experience icon"
                class="icon"
              />
              <h3>Experience</h3>
              <p> Annalect,Omnicom Media Service<br />Full Stack Java Development and UI/UX Designing</p>
            </div>
            <div class="details-container">
              <img
                src="education.png"
                alt="Education icon"
                class="icon"
              />
              <h3>Education</h3>
              <p>Btech In MechanicaL Engineering From Government College Of Engineering <br /> Full Stack Java Developer</p>
            </div>
          </div>
          <div class="text-container">
            <p><h3>Internship</h3><h5> <a href="Bharat Intern_Certificate .pdf" >Full Stack Developer Intern-Bharat Intern</a>>
              <br>
              <a href="CODING SAMURAI.pdf" >Web Developer -Coding Samurai Internship</a>>
            </h5>
              <br>

            </p>
          </div>
        </div>
      </div>
      <img
        src="arrow.png"
        alt="Arrow icon"
        class="icon arrow"
        onclick="location.href='./#experience'"
      />
    </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">Full Stack Development</h2>
            <div class="article-container">
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>HTML</h3>
                  <p>Experienced</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>CSS</h3>
                  <p>Experienced</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>SASS</h3>
                  <p>Begineer</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>JavaScript</h3>
                  <p>Basic</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Java</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>MYSQL</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>J2EE</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                /> <div>
                  <h3>GIT</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>JDBC</h3>
                  <p>Intermediate</p>
                </div>
              </article>
            </div>
          </div>
          <div class="details-container">
            <h2 class="experience-sub-title">UI/UX Designing</h2>
            <div class="article-container">
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Photoshop</h3>
                  <p>Experienced</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Google Web Designer</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Figma</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>After Effect</h3>
                  <p>Basic</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Illustrator</h3>
                  <p>Intermediate</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Indesign</h3>
                  <p>Basic</p>
                </div>
              </article>
              <article>
                <img
                  src="checkmark.png"
                  alt="Experience icon"
                  class="icon"
                />
                <div>
                  <h3>Behance / Mock up</h3>
                  <p>Intermediate</p>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
      <img
        src="arrow.png"
        alt="Arrow icon"
        class="icon arrow"
        onclick="location.href='./#projects'"
      />
    </section>
    <section id="projects">
      <br>
      <br>
      <br>
      <br>
      
      <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="project-1.png"
                alt="Project 1"
                class="project-img"
              />
            </div>
            <h2 class="experience-sub-title project-title">Project One</h2>
            <div class="btn-container">
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/'"
              >
                Github
              </button>
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/'"
              >
                Live Demo
              </button>
            </div>
          </div>
          <div class="details-container color-container">
            <div class="article-container">
              <img
                src="project-2.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/'"
              >
                Github
              </button>
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/'"
              >
                Live Demo
              </button>
            </div>
          </div>
          <div class="details-container color-container">
            <div class="article-container">
              <img
                src="project-3.png"
                alt="Project 3"
                class="project-img"
              />
            </div>
            <h2 class="experience-sub-title project-title">Project Three</h2>
            <div class="btn-container">
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/'"
              >
                Github
              </button>
              <button
                class="btn btn-color-2 project-btn"
                onclick="location.href='https://github.com/'"
              >
                Live Demo
              </button>
            </div>
          </div>
        </div>
      </div>
      <img
        src="arrow.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="email.png"
            alt="Email icon"
            class="icon contact-icon email-icon"
          />
          <p><a href="mailto:debarchana@gmail.com">debarchana@gmail.com</a></p>
        </div>
        <div class="contact-info-container">
          <img
            src="linkedin.png"
            alt="LinkedIn icon"
            class="icon contact-icon"
          />
          <p><a href="https://www.linkedin.com/in/debarchana-mahapatra-092294159/">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="#contact">Contact</a></li>
          </ul>
        </div>
      </nav>
      <p> All Rights Reserved.</p>
    </footer>
    <script src="portfolio.js"></script>
  </body>
</html>