Webleb - UI Elements - Sample Developer Portfolio Landing Page

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Portfolio</title>
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
</head>
<body>
  <header>
    <div class="container">
      <h1>John Doe</h1>
      <p>Front-end Developer | JavaScript Enthusiast</p>
      <button id="theme-toggle">Toggle Dark Mode</button>
    </div>
  </header>

<section class="about">
    <div class="container">
      <h2>About Me</h2>
      <p>I'm a passionate front-end developer specializing in modern web technologies, including React, Vue, and TypeScript.</p>
    </div>
  </section>

<section class="skills">
    <div class="container">
      <h2>Skills</h2>
      <ul>
        <li>HTML, CSS, JavaScript</li>
        <li>React, Vue, Svelte</li>
        <li>TypeScript, Tailwind CSS</li>
        <li>API Integration, Firebase</li>
      </ul>
    </div>
  </section>

<section class="projects">
    <div class="container">
      <h2>Projects</h2>
      <div class="project-card">
        <h3>Portfolio Website</h3>
        <p>A personal website showcasing my work and blog.</p>
      </div>
      <div class="project-card">
        <h3>E-commerce App</h3>
        <p>A React-based online store with Stripe integration.</p>
      </div>
    </div>
  </section>

<section class="contact">
    <div class="container">
      <h2>Contact Me</h2>
      <p>Email: johndoe@example.com</p>
      <div class="social-links">
        <a href="#" target="_blank">GitHub</a>
        <a href="#" target="_blank">LinkedIn</a>
      </div>
    </div>
  </section>

</body>
</html>

CSS

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.container {
  width: 80%;
  margin: auto;
  text-align: center;
}

/* Header */
header {
  background: #0073e6;
  color: white;
  padding: 2rem 0;
}

header h1 {
  margin: 0;
}

#theme-toggle {
  background: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Sections */
section {
  padding: 3rem 0;
}

.skills ul {
  list-style: none;
  padding: 0;
}

.skills li {
  display: inline-block;
  background: #0073e6;
  color: white;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
}

.project-card {
  background: white;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact .social-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #0073e6;
}

/* Dark Mode */
.dark-mode {
  background: #333;
  color: white;
}

.dark-mode .project-card {
  background: #444;
}

.dark-mode #theme-toggle {
  background: #444;
  color: white;
}

Sample Developer Portfolio Landing Page

Recommended

Rotating Circle Loading Page

Essential portfolio

CSS OTP Page

HTML

CSS

JS

Recommended

Rotating Circle Loading Page

Essential portfolio

CSS OTP Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS