• Home
  • /
  • Developer Portfolio Website Using HTML, CSS & JS 

Developer Portfolio Website Using HTML, CSS & JS

HTML

				
					<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Arshyan | Web Developer</title>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</head>

<body>
  <!-- Particles background -->
  <div id="particles-js"></div>

  <!-- Main Content -->
  <header class="navbar">
    <h1 class="logo">Arshyan</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Skills</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-left">
      <h2>Hi There,<br> I'm <span class="highlight">Arshyan</span></h2>
      <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2094722033678002"
     data-ad-slot="2248279416"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="typing-text">I Am Into <span id="typed"></span></p>
      <a href="#" class="btn">About Me ↓</a>
     <div class="social-icons">
  <a href="https://linkedin.com" class="icon linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a>
  <a href="https://github.com" class="icon github" target="_blank"><i class="fab fa-github"></i></a>
  <a href="https://twitter.com" class="icon twitter" target="_blank"><i class="fab fa-twitter"></i></a>
  <a href="https://facebook.com" class="icon facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>
    </div>
    <div class="hero-right">
      <img decoding="async" src="arshyan.png" alt="Arshyan Avatar">
    </div>
  </section>


  <!-- About Me -->
  <section id="about" class="section about">
    <div class="container">
      <h2>About Me</h2>
      <p class="about-text">
        I'm <strong>Arshyan</strong>, a creative and self-driven frontend developer with a strong passion for crafting
        responsive, engaging, and visually stunning websites. My journey began with simple HTML pages and has grown into
        building real-world interactive UI projects. <br><br>
        I love solving problems with code, turning design ideas into reality, and continuously learning new technologies
        like JavaScript, React, and animations to enhance user experience.
      </p>
    </div>
  </section>

  <!-- Projects -->
  <section id="projects" class="section projects">
    <div class="container">
      <h2>My Projects</h2>
      <p class="projects-text">
        I build beginner-friendly and real-world web projects to teach and showcase practical skills. Some of my recent
        mini-projects include:
      </p>
      <div class="project-list">
        <div class="project-card">
          <i class="fas fa-user-lock project-icon"></i>
          <h3>Login & Signup Form</h3>
          <p>Modern form design with validation and toggle animation.</p>
        </div>
        <div class="project-card">
          <i class="fas fa-calculator project-icon"></i>
          <h3>Calculator App</h3>
          <p>Fully functional calculator using pure JavaScript.</p>
        </div>
        <div class="project-card">
          <i class="fas fa-envelope-open-text project-icon"></i>
          <h3>Contact Form</h3>
          <p>Stylish contact layout with input fields and button animation.</p>
        </div>
        <div class="project-card">
          <i class="fas fa-hourglass-half project-icon"></i>
          <h3>Countdown Timer</h3>
          <p>Coming Soon page with dynamic countdown logic and smooth design.</p>
        </div>
        <div class="project-card">
          <i class="fas fa-images project-icon"></i>
          <h3>Image Slider</h3>
          <p>Auto-sliding, animated carousel using HTML, CSS & JS. Fully responsive.</p>
        </div>
        <div class="project-card">
          <i class="fas fa-code project-icon"></i>
          <h3>Code Editor</h3>
          <p>Live HTML/CSS/JS editor with preview, theme toggle, and fullscreen support.</p>
        </div>
      </div>
    </div>
    </div>
  </section>


  <!-- Contact -->
  <section id="contact" class="section contact">
    <div class="container">
      <h2>Contact Me</h2>
      <p class="contact-text">
        Let's build something amazing together! I’m available for freelance, collaborations, or just a quick tech chat.
      </p>
      <a href="mailto:youremail@example.com" class="btn"> Email Me</a>
    </div>
  </section>


  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
  <script>
    // Load particle config
    particlesJS.load('particles-js', 'particles.json', function () {
      console.log('Particles.js loaded!');
    });

    // Typed text animation
    new Typed('#typed', {
      strings: ['Web Development', 'UI Design', 'Frontend Projects'],
      typeSpeed: 50,
      backSpeed: 30,
      loop: true
    });
  </script>


</body>

</html>

CSS

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

body {
  font-family: 'Outfit', sans-serif;
  color: #222;
  background: #ffffff;
  overflow-x: hidden;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #f5f7ff;
}

.navbar {
  position: fixed;
  width: 100%;
  padding: 20px 60px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.navbar .logo {
  font-size: 24px;
  color: #7f27ff;
}

.navbar nav a {
  margin-left: 30px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.hero {
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 140px 10% 60px;
}

.hero-left h2 {
  font-size: 42px;
  line-height: 1.4;
}

.highlight {
  color: #ff9800;
}

.typing-text {
  font-size: 20px;
  color: #880e4f;
  margin: 10px 0 30px;
}

.btn {
  padding: 12px 28px;
  background: #3200ff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: background 0.3s;
}

.btn:hover {
  background: #2400b3;
}

.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 25px;
  justify-content: center;
}

.social-icons .icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.social-icons .linkedin {
  background-color: #0077b5;
}
.social-icons .github {
  background-color: #333;
}
.social-icons .twitter {
  background-color: #1da1f2;
}
.social-icons .facebook {
  background-color: #1877f2;
}

.social-icons .icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


.hero-right img {
  max-width: 320px;
  border-radius: 50%;
  background: #ffd700;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-right {
    margin-top: 30px;
  }
}




.section {
  padding: 120px 10% 100px;
  text-align: center;
  background: #fff;
}

.section:nth-child(even) {
  background: #f0f4ff;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.about-text, .projects-text, .contact-text {
  font-size: 20px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 40px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.project-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card h3 {
  font-size: 20px;
  color: #5e35b1;
  margin-bottom: 10px;
}

.project-card p {
  font-size: 16px;
  color: #444;
}

.contact-text {
  max-width: 600px;
  margin: 0 auto 30px;
}
.project-icon {
  font-size: 36px;
  color: #7f27ff;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.project-card:hover .project-icon {
  transform: rotate(10deg) scale(1.1);
}

/* MOBILE FRIENDLY RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    padding: 15px 20px;
  }

  .navbar nav {
    margin-top: 10px;
  }

  .navbar nav a {
    margin: 10px;
    font-size: 16px;
  }

  .hero {
    flex-direction: column;
    text-align: center;
    padding: 120px 5% 60px;
  }

  .hero-left h2 {
    font-size: 32px;
  }

  .typing-text {
    font-size: 18px;
  }

  .btn {
    padding: 10px 22px;
    font-size: 16px;
  }

  .hero-right img {
    max-width: 220px;
  }

  .section {
    padding: 80px 6% 60px;
  }

  .about-text,
  .projects-text,
  .contact-text {
    font-size: 18px;
  }

  .project-card h3 {
    font-size: 18px;
  }

  .project-card p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .navbar .logo {
    font-size: 20px;
  }

  .hero-left h2 {
    font-size: 26px;
  }

  .typing-text {
    font-size: 16px;
  }

  .btn {
    font-size: 15px;
    padding: 8px 20px;
  }

  .social-icons {
    gap: 14px;
  }

  .social-icons .icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .project-icon {
    font-size: 28px;
  }

  .project-card {
    padding: 20px 15px;
  }

  .project-card h3 {
    font-size: 16px;
  }

  .project-card p {
    font-size: 14px;
  }
}

Click Here to Download Full File

Download Full Project File

Share this post

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top