PROTOCOL ACTIVATED

Valorant Inspired Portfolio

View Work

ABOUT ME

I am a passionate developer and designer inspired by Valorant's bold aesthetic. I create immersive, high-impact web experiences.

PROJECTS

Agent UI

Valorant agent selection inspired interface.

Stats Tracker

Track your Valorant stats with style.

Landing Page

Animated Valorant themed landing page.

CONTACT

Reach out for collaborations or just to say hi!

Email Me

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap'); :root { --red: #ff4655; --dark: #0f1923; --light: #ece8e1; --accent: #1f2a36; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Rajdhani', sans-serif; background-color: var(--dark); color: var(--light); } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } header { background-color: rgba(15, 25, 35, 0.95); border-bottom: 2px solid var(--red); position: fixed; width: 100%; z-index: 100; } .nav-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { font-size: 1.5rem; color: var(--red); font-weight: 700; } nav ul { list-style: none; display: flex; gap: 2rem; } nav a { text-decoration: none; color: var(--light); font-weight: 600; transition: color 0.3s ease; } nav a:hover { color: var(--red); } .hero { height: 100vh; background: url('https://images.contentstack.io/v3/assets/bltb6530b271fddd0b1/blt6577b1f58530e6b2/5eeb7f4998f79d692170ddda/Valorant_2020_EP01_PlayVALORANT_ContentStackThumbnail_1200x625_MB01.png') center/cover no-repeat; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; padding: 0 1rem; } .overlay { position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(15,25,35,0.7); } .hero-content { position: relative; z-index: 1; } .hero-content h1 { font-size: 3rem; color: var(--red); margin-bottom: 1rem; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; } .btn { background-color: var(--red); color: var(--light); padding: 0.75rem 2rem; text-decoration: none; font-weight: 700; border-radius: 4px; transition: background-color 0.3s ease; } .btn:hover { background-color: #e03a48; } section { padding: 6rem 0; } .about h2, .projects h2, .contact h2 { font-size: 2.5rem; color: var(--red); margin-bottom: 1.5rem; text-align: center; } .about p, .contact p { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.1rem; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 2rem; margin-top: 3rem; } .project-card { background-color: var(--accent); padding: 2rem; border-radius: 8px; border: 2px solid var(--red); transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .project-card h3 { margin-bottom: 1rem; color: var(--red); } footer { background-color: rgba(15, 25, 35, 0.95); border-top: 2px solid var(--red); text-align: center; padding: 2rem; font-size: 0.9rem; margin-top: 2rem; } @media(max-width:768px){ nav ul { flex-direction: column; gap: 1rem; } }