🚀 Welcome To New Project

Modern Template For Future Projects

Project A
Project B
Project C

About This Project

Built with clean design and modern UI.

width:100%; top:0; z-index:1000; } nav ul{ display:flex; gap:20px; list-style:none; } nav a{ color:white; text-decoration:none; font-weight:500; } nav a:hover{ color:var(--primary); } /* MENU TOGGLE */ .menu-toggle{ display:none; cursor:pointer; font-size:24px; } /* SETTINGS PANEL */ .settings{ position:fixed; right:20px; bottom:20px; background:#1e293b; padding:15px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.5); } button{ padding:8px 12px; border:none; border-radius:6px; background:var(--primary); color:black; cursor:pointer; } /* SECTIONS */ section{ padding:120px 10%; } .hero{ text-align:center; } .cards{ display:flex; gap:20px; flex-wrap:wrap; } .card{ background:#1e293b; padding:20px; border-radius:10px; width:250px; } /* DARK / LIGHT */ .light-mode{ --bg:#f1f5f9; --text:#000000; --primary:#2563eb; } @media(max-width:768px){ nav ul{ display:none; flex-direction:column; background:#1e293b; position:absolute; top:70px; right:10%; padding:10px; } .menu-toggle{ display:block; } }

Welcome 🚀

Advanced Portfolio with Menu & Settings

About

Frontend Developer

Projects

Project 1
Project 2

Contact

Email: example@mail.com

p{ opacity:0.8; margin-bottom:20px; } .btn{ padding:10px 20px; background:#3b82f6; color:white; text-decoration:none; border-radius:6px; transition:0.3s; } .btn:hover{ background:#2563eb; }

👋 Halo, Saya Afandi

Frontend Developer | Build Modern Website

Lihat GitHub Saya
width:50px; height:50px; border:5px solid #38bdf8; border-top:5px solid transparent; border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin{ 100%{transform:rotate(360deg);} } /* NAVBAR */ nav{ position:fixed; width:100%; background:#111827; padding:15px 40px; display:flex; justify-content:space-between; align-items:center; z-index:1000; } nav h2{ color:#38bdf8; } nav ul{ list-style:none; display:flex; gap:25px; } nav a{ color:white; text-decoration:none; font-weight:500; } nav a:hover{ color:#38bdf8; } .toggle{ cursor:pointer; background:#38bdf8; border:none; padding:5px 10px; border-radius:5px; } /* HERO */ .hero{ height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; } .hero h1{ font-size:50px; } .hero span{ color:#38bdf8; } .hero p{ margin-top:15px; font-size:18px; opacity:0.8; } .hero button{ margin-top:25px; padding:12px 30px; border:none; border-radius:8px; background:#38bdf8; cursor:pointer; font-weight:bold; } /* SECTION */ .section{ padding:100px 20px; text-align:center; } .section h2{ font-size:35px; margin-bottom:40px; color:#38bdf8; } /* SKILL BAR */ .skill{ width:80%; max-width:500px; margin:15px auto; text-align:left; } .skill-bar{ height:10px; background:#1e293b; border-radius:10px; overflow:hidden; } .skill-fill{ height:10px; background:#38bdf8; } /* PORTFOLIO */ .cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; } .card{ width:280px; background:#1e293b; padding:20px; border-radius:10px; transition:0.3s; } .card:hover{ transform:translateY(-8px);