A zero-framework personal portfolio — built from scratch with pure HTML, CSS, and JavaScript — featuring glassmorphism, 6 live themes, SaaS product showcase, and custom animations.
A personal brand site that doubles as proof-of-skill — every design decision is a deliberate showcase of frontend capability.
Build a portfolio that doesn't look like a template — one that demonstrates real design and frontend skill while presenting projects, experience, and a live SaaS product professionally.
Recruiters, potential clients, and fellow developers who want to understand who Evan is, what he builds, and whether he's capable of going beyond tutorial-level work.
Dark glassmorphism with purple as the signature accent. Clean spatial hierarchy, generous white space, and purposeful micro-animations — nothing decorative without function.
A dedicated SaaS Products section for WritexNova — a real commercial product with Stripe payments — sets this apart from every standard projects portfolio page.
Most portfolios fail because they look identical. The challenge was to build something genuinely personal and memorable.
Recruiters see hundreds of Bootstrap and Tailwind portfolios daily. If yours looks the same, it communicates that you can follow instructions — not that you can create original things.
Zero frameworks. Every component designed and coded from scratch — the portfolio itself is proof of the skill it claims to demonstrate.
Deliberately chosen for full control — no abstraction layers between the code and the browser.
Every feature was designed to serve a purpose — showcase skill, improve UX, or present content more effectively.
No framework means solving problems frameworks handle automatically. Here's what came up.
Supporting 6 color themes and dark/light mode without maintaining 12 separate stylesheets was an upfront architecture challenge.
All colors as CSS variables. Theme switching updates one data-theme attribute, cascading all changes instantly with zero per-element JS.
Cards needed smooth perspective tilt on hover without layout thrashing or jank on lower-end devices.
perspective() rotateX/Y driven by mouse-to-card offset, with mousemove throttled via requestAnimationFrame to maintain 60fps.
The glassmorphism blur requires backdrop-filter which isn't uniformly supported, especially in older Firefox.
-webkit-backdrop-filter prefix for Safari. Semi-transparent solid background fallback — cards remain readable in all environments.
No framework safety net means no hiding from the fundamentals.
Managing 1200+ lines of hand-written CSS requires deliberate naming and section structure. BEM-inspired class names and clear comments kept the codebase navigable as it grew.
Spacing, hierarchy, and color balance aren't aesthetic preferences — they affect readability and trust. Getting them right required iteration, not intuition alone.
Desktop-first sections needed heavy rewrites for mobile. Switching to mobile-first mid-project on later sections saved significant debugging time.
Started as 4 sections. Grew to include SaaS products, games, and case studies. Treating it as a living document — not a one-time build — is the correct mindset.
A fully handcrafted portfolio — live at a custom domain with a real SaaS product that no template can replicate.
Purple, Blue, Green, Orange, Rose, Cyan — all driven by CSS variables. Full dark/light mode support across every theme, toggled in one click.
Pure HTML, CSS, and JavaScript throughout. Every animation, every card, every interaction — coded from scratch. The portfolio itself is the proof of skill.
shahriarevan.com — deployed via GitHub Pages with Namecheap CNAME DNS configuration. Auto-deploys on every git push.