import React from 'react';import{createRoot}from'react-dom/client';import{ArrowUpRight,Download,Mail,MapPin}from'lucide-react';import'./style.css';
const projects=[['E-commerce App','UI/UX · Mobile','Mobile shopping experience with user flows, wireframes, high-fidelity screens and reusable components.'],['Wedding Planner Website','UI/UX · Web','Website design concept for exploring and organizing wedding-planning services.'],['Online Shopping System','Web design · Development','Online shopping project combining interface design, HTML/CSS, PHP and MySQL.'],['Graphic Design Selection','Graphic Design','Branding, social media creatives, posters, print design and visual communication.']];
function App(){return <><header><a className="logo" href="#">AF<span>.</span></a><nav><a href="#work">Work</a><a href="#about">About</a><a href="#experience">Experience</a><a href="#contact">Contact</a><a className="resume" href="/Afrin-Fathima-CV.pdf" download>Resume <Download size={15}/></a></nav></header><main><section className="hero" id="home"><div><small>DESIGNER · BANGALORE, INDIA</small><h1>Thoughtful design.<br/><i>Meaningful</i> experiences.</h1><p>I'm <b>Afrin Fathima</b> — a Graphic and UI/UX Designer combining visual storytelling, clear interfaces, and a user-centered approach to digital experiences.</p><div className="actions"><a className="dark" href="#work">Explore my work <ArrowUpRight/></a><a href="#contact">Let’s connect ↗</a></div><small className="meta">GRAPHIC DESIGN · UI/UX DESIGN · PRODUCT THINKING</small></div><div className="art"><span>DESIGN NOTES / 01</span><div className="sun"></div><div className="orbit"></div><strong>Ideas<br/><i>into</i><br/>experiences<span>.</span></strong><label>CURIOUS BY NATURE<br/>INTENTIONAL BY DESIGN</label></div></section><div className="ticker">USER-CENTERED DESIGN ✳ VISUAL STORYTELLING ✳ DIGITAL EXPERIENCES ✳</div>
<section id="work" className="section"><small>01 / SELECTED WORK</small><h2>Design in <i>practice.</i></h2><p className="sub">A mix of interface design, digital product work, and visual communication.</p><div className="projects">{projects.map((p,i)=><article><a className={'preview p'+i} href="#case-studies"><div className="fake-screen"><div className="bar">● ● ●</div><div className="lines"></div><div className="tiles"><b/><b/><b/></div></div><span className="number">0{i+1} ↗</span></a><small>{p[1].toUpperCase()}</small><h3>{p[0]}</h3><p>{p[2]}</p></article>)}</div></section>
<section id="about" className="band"><div><small>02 / ABOUT ME</small><h2>Design with<br/><i>purpose & personality.</i></h2></div><div><p className="lead">I’m a designer with a graphic design foundation and a growing focus on intuitive digital products.</p><p>My visual communication experience informs my approach to hierarchy, typography, consistency, and clarity. My computer science background helps me collaborate across design and development.</p><div className="stats"><b>30+<small>CREATIVES DESIGNED</small></b><b>2021–25<small>COMPUTER SCIENCE ENGINEERING</small></b></div></div></section>
<section id="experience" className="section"><small>03 / EXPERIENCE</small><h2>Where I’ve <i>grown.</i></h2><div className="timeline"><article><small>MAY 2025 — PRESENT</small><div><h3>Graphic Designer</h3><p>Kaizen Infoserve Pvt. Ltd. · Bangalore</p><p>Create marketing visuals, posters and social creatives; support branding and promotional work.</p></div></article><article><small>AUGUST 2024</small><div><h3>UI/UX Designer Intern</h3><p>Shanthi IT Solution · Chennai</p><p>Supported UI structure, responsive design, layout and usability improvements.</p></div></article><article><small>JULY 2023</small><div><h3>Web Developer Intern</h3><p>Code Bind Technologies · Trichy</p><p>Assisted with HTML/CSS front-end development and responsive web pages.</p></div></article></div></section>
<section className="band"><div><small>04 / SKILLS & TOOLKIT</small><h2>What I bring <i>to the table.</i></h2></div><div className="skillgrid">{[['UX DESIGN','Wireframing','Prototyping','User flows','Design systems','Usability','Interaction design'],['VISUAL DESIGN','Branding','Social media','Posters & print','Typography','Layout design'],['TOOLS','Figma','Photoshop','Illustrator','InDesign','Canva','CorelDRAW'],['WEB BASICS','HTML','CSS','Basic React.js']].map(g=><div><small>{g[0]}</small><p>{g.slice(1).join(' · ')}</p></div>)}</div></section>
<section id="case-studies" className="section"><small>05 / CASE STUDIES</small><h2>Show the <i>process.</i></h2><p className="sub">Add verified project context, your role, process, final screens, and outcomes. Do not claim unmeasured results.</p><div className="casegrid">{projects.map(p=><article><small>{p[1].toUpperCase()}</small><h3>{p[0]}</h3><p>Project brief, problem, goals, process, iterations, final design, and learnings — add details from your original project.</p></article>)}</div></section>
<section id="contact" className="contact"><small>06 / CONTACT</small><h2>Have a good idea?<br/><i>Let’s make it clear.</i></h2><p>Open to design opportunities, collaborations, and creative projects.</p><a className="email" href="mailto:afrinfathima8504@gmail.com">afrinfathima8504@gmail.com <ArrowUpRight/></a><div className="contactmeta"><span><MapPin/> Bangalore, India</span><a href="mailto:afrinfathima8504@gmail.com"><Mail/> Email me</a><a href="/Afrin-Fathima-CV.pdf" download><Download/> Download CV</a></div></section></main><footer><a className="logo" href="#">AF<span>.</span></a><span>© 2026 Afrin Fathima · Designed with intention</span><a href="#home">Back to top ↑</a></footer></>}
createRoot(document.getElementById('root')).render(<App/>);