╔═══════════════════════════════════════════════════════╗
║ ║
║ ✦ F A R A N I N A M ✦ ║
║ ║
║ frontend developer · ui obsessed ║
║ turning ideas into pixels ║
║ ║
╚═══════════════════════════════════════════════════════╝
const faran = {
location : "Gujranwala, Pakistan 🇵🇰",
pronouns : "he / him",
focus : "crafting beautiful interfaces from scratch",
philosophy: "no frameworks needed — just clean code",
currently : "building glassmorphic UIs with pure HTML · CSS · JS",
ask_me_about: ["UI design", "CSS animations", "frontend architecture"],
};
┌─────────────────────────────────────────────────────────┐
│ │
│ ✦ C A L C U L A T O R │
│ │
│ A glassmorphic calculator with 4 animated themes, │
│ scientific mode, and calculation history. │
│ Built in pure HTML, CSS & JS — zero dependencies. │
│ │
│ · Frosted glass panels with backdrop blur │
│ · 3D press buttons with ripple effects │
│ · Dusk · Forest · Ember · Arctic themes │
│ · sin · cos · tan · log · √ · x² · 1/x · π │
│ · Full keyboard support │
│ │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ │
│ ✦ N O T E S │
│ │
│ A glassmorphic notes app with tags, pinning, │
│ and instant search. │
│ Built in pure HTML, CSS & JS — zero dependencies. │
│ │
│ · Write · Tag · Pin · Search │
│ · Auto-saves to localStorage │
│ · Filter by tag or pinned │
│ · Delete confirmation modal │
│ · Ctrl+N to create a new note │
│ │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ │
│ ✦ W E A T H E R │
│ │
│ A glassmorphic weather app with real-time data │
│ and a 5-day forecast. │
│ Built in pure HTML, CSS & JS — OpenWeatherMap API. │
│ │
│ · Search any city or auto-detect location │
│ · Temperature · Humidity · Wind · Pressure │
│ · Sunrise & sunset in local city time │
│ · 5-day forecast with visual temp bars │
│ · Timezone-aware display │
│ │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ │
│ ✦ T Y P I N G S P E E D │
│ │
│ A glassmorphic typing speed test with live WPM, │
│ detailed results, and persistent history. │
│ Built in pure HTML, CSS & JS — zero dependencies. │
│ │
│ · Live WPM · Accuracy · Countdown timer │
│ · Correct · Wrong · Total character stats │
│ · 15s · 30s · 60s · 120s modes │
│ · History of last 20 runs saved locally │
│ · Tab to restart · Space to advance word │
│ │
└─────────────────────────────────────────────────────────┘
| Project | Description |
|---|---|
| Password Generator | Cryptographic password generator with strength meter & history |
| Movies | Movie search with cast, trailers, filters & favorites |
| Calendar | Calendar with month/week/day views, drag & drop & recurring events |
⠀building → more beautiful things
⠀learning → CSS art · advanced animations
⠀exploring → glassmorphism · neumorphism · brutalism
