Personal Portfolio Website Template – HTML CSS JS

71 0 Websites CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Personal Portfolio Website Template – HTML CSS JS

<nav class="nav">
  <a href="#home" class="logo">AR<span>.</span></a>
  <ul id="links">
    <li><a href="#about">About</a></li><li><a href="#work">Work</a></li><li><a href="#skills">Skills</a></li><li><a href="#contact">Contact</a></li>
  </ul>
  <button id="burger" aria-label="Menu">☰</button>
</nav>

<header id="home" class="hero">
  <div class="hero-text">
    <p class="hi">👋 Hi, I'm Alex Rivera</p>
    <h1>I build <span id="typed"></span><i class="cursor">|</i></h1>
    <p class="lead">Front-end developer & UI designer crafting fast, accessible and delightful web experiences.</p>
    <div class="cta"><a href="#work" class="btn">View my work</a><a href="#contact" class="btn ghost">Hire me</a></div>
  </div>
  <div class="hero-img"><div class="ring"></div><div class="face">AR</div></div>
</header>

<section id="about" class="reveal">
  <h2>About me</h2>
  <p class="center">5 years turning ideas into products. I love clean code, bold typography and motion that means something.</p>
  <div class="stats"><div><b data-n="48">0</b><span>Projects</span></div><div><b data-n="32">0</b><span>Happy clients</span></div><div><b data-n="5">0</b><span>Years</span></div></div>
</section>

<section id="work" class="reveal">
  <h2>Selected work</h2>
  <div class="filters"><button class="on" data-f="all">All</button><button data-f="web">Web</button><button data-f="app">App</button><button data-f="brand">Branding</button></div>
  <div class="projects">
    <article data-c="web" style="--g:linear-gradient(135deg,#ff7e5f,#feb47b)"><div class="thumb">🛍️</div><h3>Shoply</h3><p>E-commerce storefront</p></article>
    <article data-c="app" style="--g:linear-gradient(135deg,#6a11cb,#2575fc)"><div class="thumb">💪</div><h3>FitTrack</h3><p>Fitness tracking app</p></article>
    <article data-c="brand" style="--g:linear-gradient(135deg,#11998e,#38ef7d)"><div class="thumb">🌿</div><h3>Leafy</h3><p>Brand identity</p></article>
    <article data-c="web" style="--g:linear-gradient(135deg,#fc466b,#3f5efb)"><div class="thumb">🎧</div><h3>Wavely</h3><p>Music landing page</p></article>
    <article data-c="app" style="--g:linear-gradient(135deg,#f7971e,#ffd200)"><div class="thumb">🍕</div><h3>Foodie</h3><p>Food delivery app</p></article>
    <article data-c="brand" style="--g:linear-gradient(135deg,#00c6ff,#0072ff)"><div class="thumb">✈️</div><h3>Skyway</h3><p>Travel brand kit</p></article>
  </div>
</section>

<section id="skills" class="reveal">
  <h2>Skills</h2>
  <div class="skills">
    <div class="sk"><span>HTML & CSS</span><div><i style="--w:95%"></i></div></div>
    <div class="sk"><span>JavaScript</span><div><i style="--w:88%"></i></div></div>
    <div class="sk"><span>React</span><div><i style="--w:80%"></i></div></div>
    <div class="sk"><span>UI / UX Design</span><div><i style="--w:85%"></i></div></div>
  </div>
</section>

<section id="contact" class="reveal">
  <h2>Let's work together</h2>
  <form id="cf">
    <input required placeholder="Your name"><input required type="email" placeholder="Your email">
    <textarea required rows="4" placeholder="Tell me about your project">

CSS

:root { --bg:#0b0d17; --card:#141829; --text:#eef0fa; --muted:#9aa1bd; --acc:#7b61ff; --acc2:#00d4ff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Poppins", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
.nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 6vw; z-index: 20; transition: .3s; }
.nav.scrolled { background: rgba(11,13,23,.8); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,.3); padding: 10px 6vw; }
.logo { font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; }
.logo span, .hi { color: var(--acc2); }
.nav ul { display: flex; gap: 30px; list-style: none; }
.nav ul a { color: var(--text); text-decoration: none; position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--acc2); transition: .3s; }
.nav ul a:hover::after, .nav ul a.on::after { width: 100%; }
#burger { display: none; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }

.hero { min-height: 100vh; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 100px 6vw 40px; }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.15; margin: 10px 0 16px; }
#typed { background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cursor { font-style: normal; color: var(--acc2); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lead { color: var(--muted); max-width: 520px; font-size: 1.1rem; }
.cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 13px 28px; border-radius: 99px; background: linear-gradient(90deg, var(--acc), var(--acc2)); color: #fff; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font: inherit; transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(123,97,255,.4); }
.btn.ghost { background: none; border: 2px solid var(--acc); }
.hero-img { position: relative; width: min(340px, 70vw); aspect-ratio: 1; flex-shrink: 0; }
.ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--acc), var(--acc2), var(--acc)); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.face { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #262c4a, #10121f); display: grid; place-items: center; font-size: 5rem; font-weight: 800; }

section { padding: 90px 6vw; }
h2 { text-align: center; font-size: 2.2rem; margin-bottom: 20px; }
.center { text-align: center; max-width: 600px; margin: 0 auto; color: var(--muted); }
.stats { display: flex; justify-content: center; gap: 60px; margin-top: 40px; text-align: center; flex-wrap: wrap; }
.stats b { font-size: 2.6rem; color: var(--acc2); display: block; }
.stats span { color: var(--muted); }
.filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.filters button { border: 1px solid #2a3050; background: none; color: var(--text); padding: 8px 18px; border-radius: 99px; cursor: pointer; font: inherit; }
.filters button.on { background: var(--acc); border-color: var(--acc); }
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.projects article { background: var(--card); border-radius: 18px; overflow: hidden; transition: transform .35s, opacity .35s; cursor: pointer; }
.projects article:hover { transform: translateY(-8px); }
.projects article.hide { display: none; }
.thumb { height: 170px; background: var(--g); display: grid; place-items: center; font-size: 4rem; }
.projects h3, .projects p { padding: 0 18px; }
.projects h3 { margin-top: 14px; } .projects p { color: var(--muted); padding-bottom: 18px; }
.skills { max-width: 640px; margin: 0 auto; }
.sk { margin: 20px 0; }
.sk div { height: 10px; background: var(--card); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.sk i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width 1.4s ease; }
.visible .sk i { width: var(--w); }
#cf { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#cf input, #cf textarea { background: var(--card); border: 1px solid #2a3050; border-radius: 12px; padding: 14px; color: var(--text); font: inherit; outline: none; }
#cf input:focus, #cf textarea:focus { border-color: var(--acc); }
#cmsg { text-align: center; color: #7dffb3; }
.foot { text-align: center; padding: 30px; color: var(--muted); border-top: 1px solid #1d2238; }
.reveal { opacity: 0; transform: translateY(40px); transition: 1s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 800px) {
  #burger { display: block; }
  .nav ul { position: fixed; top: 64px; right: 0; left: 0; flex-direction: column; align-items: center; background: rgba(11,13,23,.97); padding: 24px; transform: translateY(-150%); transition: .4s; }
  .nav ul.open { transform: none; }
  .hero { flex-direction: column-reverse; text-align: center; justify-content: center; }
  .cta { justify-content: center; } .lead { margin: 0 auto; }
  .hero-img { width: 200px; }
  .face { font-size: 3rem; }
}

// Personal portfolio: typing effect, scroll reveal, counters, project filter
var words = ['websites.', 'web apps.', 'landing pages.', 'dashboards.', 'experiences.'];
var typed = document.getElementById('typed'), wi = 0, ci = 0, del = false;
(function type() {
  var w = words[wi];
  typed.textContent = w.slice(0, ci);
  if (!del && ci === w.length) { del = true; return setTimeout(type, 1400); }
  if (del && ci === 0) { del = false; wi = (wi + 1) % words.length; }
  ci += del ? -1 : 1;
  setTimeout(type, del ? 45 : 95);
})();

Comments 0

…

Personal Portfolio Website Template – HTML CSS JS

Recommended

Comments 0