$ whoami
> faraninm
$ cat identity.json{
"name": "Faran Inam",
"location": "Gujranwala, Punjab, Pakistan",
"role": "Front-end builder & CAD designer",
"tagline": "making the web a little more beautiful",
"signature_style": "glassmorphism",
"stack": ["HTML5", "CSS3", "JavaScript ES6+"],
"cad": ["AutoCAD", "CATIA", "Fusion"],
"uses_frameworks": false,
"philosophy": "master the fundamentals before reaching for the framework",
"open_to": ["collaboration", "feedback", "learning in public"]
}I'm a builder who lives between two worlds: the pixels of the browser and the precision of engineering drawings.
On the web side, I craft glassmorphic, framework-free apps: frosted panels, soft blur, subtle glow, and smooth animation, all written in plain HTML, CSS and JavaScript. On the engineering side, I design in AutoCAD, CATIA and Fusion, where every line has a dimension and every dimension has a reason.
Both disciplines taught me the same lesson: the details are the design.
💭 "Master the fundamentals before reaching for the framework."
| Understand the DOM, the box model and the event loop before adopting a tool that hides them. | Good UI isn't decoration. Clear hierarchy, comfortable contrast and smooth motion make software feel trustworthy. | CAD taught me precision. I bring that discipline to spacing, structure and clean code. |
| Skill | What I do with it |
|---|---|
| 🏗️ Semantic HTML | Clean, accessible structure that reads well to browsers and humans |
| 🎨 Modern CSS | Glassmorphism, backdrop-filter, gradients, Grid, Flexbox, animations, theming |
| ⚡ Vanilla JavaScript | State handling, DOM manipulation, APIs, localStorage, drag & drop |
| 🌐 API Integration | Fetching live data for weather and movie apps |
| 📏 2D Drafting | Technical drawings and layouts in AutoCAD |
| 🧊 3D Modeling | Parts and assemblies in CATIA and Fusion |
| 🔀 Version Control | Git and GitHub workflow |
Glassmorphic calculator with 4 animated themes, a scientific mode, and full calculation history.CSS JavaScript
|
📝 NotesCSS JavaScript
|
☁️ WeatherCSS JavaScript
|
⌨️ Typing-SpeedCSS JavaScript
|
📅 CalenderJavaScript
|
🎬 MoviesCSS JavaScript
|
A portfolio of 2D drafting and 3D modeling work across AutoCAD, CATIA and Fusion, organized by software.AutoCAD CATIA Fusion
|
|
Every project of mine starts from the same handful of ingredients. Here's the core of the look:
.glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}Ingredients: a colorful gradient backdrop, a translucent layer, a blur, a thin bright border, and a soft shadow. That's it. ✨
| 🌐 Web Development | 📐 CAD Design |
|---|---|
| Layout with Grid & Flexbox | Layout with sketches & constraints |
| Reusable components | Reusable parts & assemblies |
| Responsive breakpoints | Scaled views & drawing sheets |
| Debugging in DevTools | Checking dimensions & tolerances |
| Clean, readable code | Clean, readable drawings |
Different tools, same mindset: structure, precision, and craft.
- Build glassmorphic apps with pure HTML, CSS & JS
- Ship six web projects: Calculator, Notes, Weather, Typing-Speed, Calender, Movies
- Publish a CAD portfolio across AutoCAD, CATIA & Fusion
- Add live demos (GitHub Pages) for every web project
- Add screenshots and GIF previews to each repo
- Build a personal portfolio website
- Add project galleries with renders to the CAD repo
- Learn TypeScript once the JavaScript fundamentals feel unshakable
- Contribute to open-source projects
const faran = {
fuel: "chai ☕",
favoriteProperty: "backdrop-filter",
favoriteShortcut: "Ctrl + S (pressed compulsively)",
worstEnemy: "a misaligned pixel",
bestFriend: "console.log()",
motto: () => "Make it work, make it right, make it beautiful."
};
console.log(faran.motto());I'm always happy to talk about UI design, vanilla JavaScript, or CAD. The best way to reach me is to open an issue on any of my repos, and I'd love feedback on my projects.
