Projects Section

This is the most important part of your portfolio. Show 3-6 real projects. Quality over quantity!

Each project card should have:

Screenshot or preview image
Project name
Short description (1-2 lines)
Tech stack tags (HTML, CSS, PHP...)
Live link + GitHub link

Task

Build 3 project cards for your portfolio. Use placeholder info for now — replace with real projects later.

Tasks

Projects Section & Cards About Me Section

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:sans-serif;background:#0d1b2a;color:#fff;padding:60px 20px}
.projects h2{text-align:center;font-size:1.8rem;margin-bottom:40px;color:#00bcd4}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:960px;margin:0 auto}
.card{background:#1e1e2e;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-img{height:160px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,#162032,#1a3a5c)}
.card-body{padding:18px}
h3{margin-bottom:6px;font-size:1rem}
p{color:rgba(255,255,255,.6);font-size:.85rem;line-height:1.6;margin-bottom:12px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tags span{background:rgba(0,188,212,.1);color:#00bcd4;padding:3px 10px;border-radius:50px;font-size:.72rem;font-weight:600;border:1px solid rgba(0,188,212,.2)}
.links{display:flex;gap:12px}
.links a{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none;font-weight:600}
.links a:hover{color:#00bcd4}

Preview