DEV Community: Ehsan Pourhadi

Tech Hiring: A Generalist's Frustration

Ehsan Pourhadi — Fri, 06 Feb 2026 19:01:58 +0000

I just realized something: recruiters have never gotten me a job.
Every single job I’ve had came from talking directly to the team or a manager.

Recruiters are one of the worst things that happened to tech.
They’re useless.

To be clear, most recruiters are actually very nice people. The interviews often go well. I’m not nervous. I have a solid story about my work and my career, and I know how to tell it.
And yet, nothing.

I once had a recruiter tell me, “They really liked you, but your WordPress background didn’t really fit us.”
Bro, I haven’t touched WordPress in like eight years. How is that even relevant?

Another one told me, “They really like you, but you don’t have enough leadership.”
Bro, I’ve been running teams since 2018. Taking care of people. Scaling teams , Planning work for entire teams. Handling conflicts. mentoring juniors and interns, Delivering projects.
I’m even taking a leadership course now just to get it “down on paper.”

I had a recruiter from London calling on behalf of another recruiting company in Stockholm to offer me a job in Malmö, Sweden.
Read that again. That’s not global talent acquisition, that’s a bad game of telephone.

I had another one ask me, “What do you do for sustainability?”
Bro, why is that important in the first interview?
What a stupid question.
I still gave a good answer. I’ve stopped using plastic for the past few years.
But seriously, why does that matter at this stage?

I had another interview at 11:30 with some recruiter. The moment I saw her, she looked tired, hungry and annoyed before the interview even started. She didn’t listen to anything I said.
She just went, “Yeah… now can you do our stuff?”
Bro. That is the worst question I’ve ever heard.
You’re having a bad day, and now I lose a chance at a job because of it?

I’ve also had interviews with AI systems.
Three of them.
The first one went horribly. It didn’t get me at all.
The other two went pretty well.
That alone should tell you something about how random this process is becoming.

I also noticed recruiters constantly reschedule interviews because of “something.”
Meetings move. Calls get delayed. Things get pushed.
But when you miss a detail, suddenly that’s a red flag.

I have a portfolio website that clearly lists every stack I’ve worked with and how many years I’ve worked with each one.
They never look at it.
Instead, they ask me the same questions again during the interview.
Why did I even send the link?

Recruiters spend half the interview telling a story about the company that I honestly don’t care about.
All I care about is:

the team
the product
how you manage people

I will fix everything else inside the team.
I will work cross-team.
We will solve problems together.
That’s how real work gets done.

Then they ask a few technical questions they don’t even understand themselves.

Recruiters cannot sell me.
They don’t understand me, my work, or my value.

So how do I even get a new job now?

Last year in the UK, I applied to 2000+ jobs.
I got 4 first interviews with recruiters. Then nothing.

In Sweden and Copenhagen, I applied to 70+ jobs.
I got 20+ first interviews. Then nothing.

Now, about me.

I discovered programming at 14, doing networking and linux setup, Moved to FrontPage. Then Dreamweaver with PHP/MySQL.
Fought with Photoshop just to slice images and use them as background images.
Worked with Flash and Fireworks.

Later I moved to WordPress because everybody wanted WordPress. Then Drupal and Laravel,
A few years of Ruby on Rails and NodeJs.
For the last 8 years, I’ve been working with React and most of the JavaScript frameworks.
I’m also worked with Spring Boot, playing with Java, and Electron JS to build desktop communication app that was used by 1 million users worldwide.

I do, Front-end, Backend, Design, DevOps, Managing projects, people and product roadmaps.

Besides coding, and certificates just to prove that I actually know my stuff, I’ve worked with different people in different situations, with different types of customers.
Years of experience solving weird, messy, real-world problems.

I’m a team player. I learned early in my career that you create far more impact as a team than as a solo hero.
That lesson stuck.

I regularly hold workshops and presentations for my team to keep everyone up to date with the latest tech. Not because it’s required. but because knowledge should move fast inside a team.

I’ve worked across different industries:
advertising, helping people in different branches, telecom for the last few years.

Right now, I’m taking an AI course and a leadership course.
I’m building applications with a Go backend and a Wails app.

My favorite language? i use to say js but now I don’t have one.
I can start a project in NestJS and move it to Go.
Start a frontend in React and move it to Next.js or something else.
The tool is not the point. Solving the problem is. That's what am good at! That's what i want to do!

I am a generalist builder, a systems thinker, and a team-first engineer in an industry that keeps trying to hire checklist-shaped humans through people who don’t understand the work. That mismatch hurts more the more senior and adaptable i become.

The strange part of the universe here is that the more capable you are across time, people, and technology, the harder you are to reduce to a keyword search, and the worse recruiters become at seeing you at all.

So tell me, what does that say about me? How do i get a job now?

UI ‘Isms’ Explained by Me Poking Buttons

Ehsan Pourhadi — Fri, 06 Feb 2026 09:07:38 +0000

Alright, this one started as a couple of bookmarks… and then somehow turned into a tiny design museum I built in my browser at 1:47am.

I kept seeing these words everywhere, glassmorphism, neubrutalism, claymorphism and my brain did that thing where it nods confidently while understanding absolutely nothing. So instead of reading another “Top UI Trends” post, I did what usually works for me:
I opened an empty HTML file and started breaking things until the vibes made sense.

Whats is this "ism" thing?
In the context of design and art, adding "-ism" to the end of a word turns a specific technique or philosophy into a distinct movement or category. In the digital design world, new trends pop up every few years. To make them easier to discuss, designers give them a name ending in "-ism" (or "-morphism" for form/shape).

This post is that experiment.
Not definitions-from-a-podium, but touch it, poke it, feel why it feels that way.

We’re going to build tiny ui element per design style, tweak a couple of properties, and watch the personality change in real time.

Think of it like switching CSS environments and noticing how your app’s mood changes.

Design styles aren’t decorations.
They’re constraint systems — opinions about depth, hierarchy, feedback, and affordances.

So instead of talking about styles abstractly, I built the same small UI six times.
Same intent. Same structure.
Different rules.

Glassmorphism — UI as atmosphere

Glassmorphism works when the interface feels like a layer, not a surface.
It only works if there’s something behind it. Otherwise, it’s just a semi-transparent rectangle having an identity crisis.
The moment contrast drops too far or blur gets lazy, the UI collapses into fog.

The real levers here are:

opacity
background blur
tint color
stroke strength

🧠 Mental model: glassmorphism is like a variable that never quite resolves, it always depends on context.

🧰 Tool to use: https://hype4.academy/tools/glassmorphism-generator

Neumorphism / skeuomorphism — memory as affordance

Skeuomorphism doesn’t want you to learn the interface.

It wants your muscle memory from real life.

It’s about borrowing trust from physical experience.

Textures. Shadows. Materials. Stuff that looks touchable even when it’s not, all doing one job:

“You’ve used something like this before.”

What to notice

If the shadows don’t imply weight, the illusion breaks.

Skeuomorphism fails quietly, it just starts feeling fake.

🧠 Mental model: skeuomorphism is backwards compatibility for humans.

🧰 Tool to use: https://neumorphism.io

Neobrutalism - clarity through aggression

Neobrutalism has no interest in being polite.

Hard edges.
Bold colors.
Zero blur.
Drop shadows that refuse to be subtle.

The goal isn’t beauty.
It’s unambiguous intent.

Controls here focus on:

shadow offset
border thickness
contrast

What to notice

Remove the shadow and everything flattens into ambiguity.

Neobrutalism lives or dies by separation.

🧠 Mental model: neobrutalism is like skipping abstraction layers and talking straight to the hardware.

🧰Tool: https://www.neobrutalism.dev/

Claymorphism - volume-first UI

Claymorphism feels like neumorphism that discovered depth sliders and never looked back.

Everything feels inflated.

Heavy.

Touchable.

The best explanation I’ve found:

Inflate neumorphism until it becomes adorable.

The real controls:

corner radius
vertical lift

What to notice

Lower the lift too much and the UI loses authority.
Clay needs weight to feel believable.

🧠 Mental model: claymorphism is depth without sharpness — like rendering UI in a softer physics engine.

🧰 Tool to use: https://hype4.academy/tools/claymorphism-generator

Minimalism - hierarchy without decoration

Minimalism isn’t about removing things.
It’s about removing excuses.

When borders, colors, and shadows disappear,

spacing becomes your strongest primitive.

There’s only one honest control here:

spacing

What to notice

If spacing becomes arbitrary, hierarchy collapses instantly.

Minimalism is unforgiving, which is why it’s powerful.

🧠 Mental model: minimalism is aggressive refactoring of UI.

Terminalism (I made this up my self) information over comfort

Terminal-style UI isn’t cosplay.

It’s what happens when the interface stops trying to be friendly and starts trying to be honest.

This style assumes a few things up front:

the user cares more about state than aesthetics
density is a feature, not a bug
text is the interface

There’s no depth here. No illusion of touch.

Everything is explicit, linear, and slightly uncomfortable, on purpose.

The constraints are brutal but clarifying:

monospace typography
limited color palette
visible focus
zero decoration that doesn’t carry meaning

When people say “this feels like a real tool”, this is usually what they mean.

The only real levers you get are:

density (line height + spacing)
contrast (readability vs eye strain)

Push either too far and the UI becomes unusable.

That tension is the whole lesson.

Why this one earns its place

When you put this next to:

glassmorphism
liquid glass
claymorphism

…the contrast is almost uncomfortable.

And that’s the point.

This style makes something very clear, very fast:

Most interfaces are just structured text wearing expensive clothes.

Terminalisum strips the clothes off and asks whether the structure still holds.

That’s a lesson worth keeping in the set.

The takeaway (this surprised me)

Once you apply the same UI intent to every style,

something interesting happens:

Some styles are generous.

Others are strict.

Some forgive mistakes.

Others amplify them.

Design systems aren’t just visual languages.

They’re behavioral contracts between your UI and your user.

And once you feel that difference in your hands,

no style ever feels like a vibe again.

Where this goes next

This whole article could easily turn into:

a single playground with a style switcher
shared HTML + per-style CSS variables
a repo for learning design systems by breaking them

But even as-is, the lesson sticks:

Real design styles reveal themselves only when you force them to solve real UI problems.

That’s where the truth leaks out.

New Year, New You Portfolio Challenge

Ehsan Pourhadi — Tue, 27 Jan 2026 17:42:47 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m a full-stack developer based in Sweden who enjoys turning messy ideas into clean, scalable web applications. I like good code, thoughtful UX, and working closely with designers and product folks to build things that actually get used. Currently exploring new opportunities and looking for my next role somewhere in the EU.

Portfolio

--labels dev-tutorial=devnewyear2026

How I Built It

One month. That's how long it took me to build my entire portfolio. And honestly? A lot of that time was spent undoing things, changing my mind, asking AI agents to try different approaches, and updating the same Plan.md file so many times I should've just lived in it.

But today? It's live. 🚀 ehsan-pourhadi.com/

Let me walk you through what actually happened, what I learned, and all the weird stuff I hid in my site that nobody asked for but I built anyway.

The Philosophy: Keep It Simple, Make It Weird

First, let me tell you what I didn't change: the core idea that all portfolio data lives in one JSON file. I kept that because it works. Separate content in MDX, separate data in JSON, build pages from both. No overthinking.

But everything else? Yeah, Started with a brand new installation of Astro and keep adding stuff.

The big realization was: nobody scrolls. Like, genuinely nobody. I had this beautiful parallax effect on my about page. Total waste. I ripped it out and replaced it with a compact overview of my experience and education. Now it's scannable. Fast. Honest.

What I'm Most Proud Of

1. New /work Page (The Game Changer)

This one genuinely changed how I think about portfolios.

Instead of listing all portfolio items under the work menu, I created a dedicated /work page that shows places I've worked. Nice and scannable.

Then when you click into /work/{workplace}, that's where the deep stuff lives:

Short descriptions of my responsibilities there
Soft skills for that role
Projects related to that workplace
Team members (with avatars from the boring-avatars npm package for people I don't have photos of)

Why? Because it's easier to scan. You see the company, click if you care, then you get the full context. It's not a wall of portfolio items, it's a story about where I've been and what I did there.

Clean overview first, details only if you want them.

I still keep the /portfolio page too though, that's where you can see everything in one place if you just want to browse all my work without the "by company" filter. Sometimes people want the complete list, so I kept that.

2. Better Skill Representation

I got tired of progress bars and arbitrary 1-10 numbers. Now each skill has a level description:

Beginner 1-4: I've experimented and built something basic for personal use.
Professional 5-7: I've worked with it professionally and deployed it to production.
Advanced 8-9: Several years of experience, regularly working with it in production.
Expert 10: Highly confident, capable of mentoring others, comfortable making architectural decisions.

Plus I added years to each skill. So instead of looking at a radar chart and seeing meaningless numbers, you understand what I've actually done with each tool. Way more useful.

3. Separated /products from /portfolio

New distinction:

/portfolio: Client work and collaborative projects
/products: Stuff I built completely myself

This matters because it shows the difference between "code I wrote within a team" and "full-stack projects I owned from start to finish." Both are valuable, but they're different. Now people can see both.

4. Search and AI Chat (Algolia Agent Studio)

I integrated Algolia search to show I can actually work with third-party APIs. Full-text search across my entire site. But the cooler part? I built a chat feature using Algolia Agent Studio where you can ask questions about me, my projects, my skills. It's supposed to be an AI agent that knows everything about my portfolio.

Problem: Still waiting on my Beta access to go live with it. So right now it exists, it works locally, but the world can't use it yet. Classic.

The lesson here? Sometimes you build cool stuff and it's not ready. That's fine.

5. Color Redesign: Red → Yellow/Orange

I used red and purple as my primary colors for years. Loved it. But then... every AI agents started using the same red/purple combo.

Switched to yellow as primary, orange as secondary, blue as accent.

It stands out. It's warmer. It doesn't look like every other AI tool's marketing site. The secondary color (orange-400) gets heavy use, and the blue accent adds sophistication. Much better distribution of color—80/20 rule applies even to design.

6. Guestbook with Bad Word Filtering

Remember guestbooks? That old internet vibe? Yeah, I missed it. Built one using Upstash Redis and Vercel Serverless, with bad word filtering using npm packages.

I didn't even search for the filtering packages—I just told my AI agent the problem and it threw back two options. I checked what they did, and they were exactly what I needed. Felt like magic.

The guestbook lets people leave messages. It filters the gross stuff. It saves to Redis. It works. And honestly? I hope people use it. It feels retro in the best way.

7. Music Player That Actually Works

Replaced the static Spotify embed with a custom media player and custom audio visualization. The hard part? Making it work with Astro Islands without losing the state managed in Zustand, and making sure music keeps playing when you navigate between pages.

Built a GlobalAudioPlayer that handles this. You start a song, navigate around, come back—it's still playing. Small detail that most sites forget about.

8. Resume Page and Print Layout

Updated my resume layout so if you actually print it, the header and footer disappear, the layout reformats nicely, and you get a professional-looking resume with proper page breaks.

Small detail, but it matters when someone wants to download a PDF.

9. AI Prompts Shared Publicly

I use specific prompts for AI work, and I wanted to share them. So I created a /prompts page with the prompts I actually use. They're tuned to how I work, how I write, and what I ask for.

Still iterating on this because I want it to feel authentic, not like I'm selling a course.

10. GitHub Contributions Animation

I added my GitHub contribution graph because it's a visual representation of how active I am. Yeah, it doesn't show work I did on Bitbucket or private repos, so it's incomplete, but it's still useful.

Found a really cool animation idea on Reddit and adapted it. Now my contributions have this nice animated reveal effect.

11. New /roles Page

This one's for the future mostly, but I created a page that shows roles I can work as based on my experience and skills. Not the titles I've had, but the actual work I can do.

It needs more love (better storytelling, actual links), but the structure is there.

12. Testimonials with Motion Animations

Had testimonials on my LinkedIn for years. Brought them to the site with animations inspired by PrebuiltUI. They slide in, they rotate slightly, they feel alive.

13. Credits Page

Built with help from multiple AI tools and refined by me? Gotta credit where credit's due. Added a /credits page that lists all the tools, libraries, and AI assistance that went into building this.

14. Deployed to Google Cloud with Docker and Caddy

With help from an AI agent, this took maybe 15 minutes. Created a Dockerfile, set up Caddy as the web server, pushed to Google Cloud. Done.

The deployment is easy when someone walks you through it. But I actually understand what's happening now, so next time I can do it myself.

15. The Floating Island (And Recraft.ai)

I wanted something next to my name on the homepage. Not a boring background, not a video. Something weird.

I found Recraft.ai (generative vector art from prompts) and spent time refining a prompt until I got this floating island with a machine on it and a tiny man (me) operating it. It feels like a modern metaphor for a developer using tools to generate code.

Then I animated some binary (0s and 1s) floating around it. It's the kind of thing nobody needs, but when you see it? You remember it.

16. 3D Cards with Mouse-Tracking Perspective

Looked at a ton of CodePen inspiration (there's this one by Smit29 that's just chef's kiss). Built 3D cards that follow your mouse, shift their perspective, and cast moving shadows.

Nothing groundbreaking, but they feel premium. They make the site more interactive without being gimmicky.

17. Easter Eggs Everywhere 🥚

I went full chaotic developer mode here.

Console Easter Egg: Open dev tools and you'll see messages that... let's just say they're me having fun with my own site.

Game Mode: There's a secret code (you can find it in the developer tools hint 👀) that unlocks a clicker game. You get points, unlock new pages, the whole thing. The long-term plan is to actually gate some portfolio items behind this, make people earn seeing what I've built. But for now, it's just pure dopamine.

Pixel World: This one's my favorite. Scroll to the bottom of the page, then keep scrolling. Ten times. Magic happens. A whole pixel art world appears—neon cats that run randomly, pixel art that follows light/dark mode. And if you click the fire ten times? Welcome to hell mode. The aesthetic shifts. Everything burns.

I worked with AI on this one using Nanobannan's AntiGravity, got some concept art, then spent a few hours in Photoshop cleaning it up and cutting it into usable pieces. That part? All me. AI got me 70% there, I finished the last 30%.

The Duck: There's also just a tiny debug duck that lives randomly in the footer. No reason. It's there. It's cute. That's it.

What I Learned

Throw Everything at the Wall

The design philosophy that worked best: try 10 ideas, see what sticks, pick the 3 that feel right. Don't overthink it. The floating island was an experiment. The 3D cards were an experiment. Some experiments failed (the Neo4j graph idea was too cluttered). But the ones that worked really worked.

80/20 on Color

Don't use your primary and secondary colors for everything. Reserve them. Use accent colors liberally. That's what makes a design feel balanced and not overwhelming. I've been over-saturating primary color for years, this redesign fixed that.

Agents Need a Plan.md

Always create a Plan.md and mark things done as you go. Manually verify everything works. I updated my plan probably 50 times during this project. Sounds tedious, but it kept me sane when I was undoing an hour of work and trying a different approach.

Talk to Agents Like a Client

When I didn't like what an agent produced, I stopped using my "developer brain" and started talking like a client would talk to me:

"Nah, I don't like this. Can we try something else?"

Instead of:

"Refactor the component architecture to use XYZ pattern..."

Simpler language often gets better results. And when agents did something I liked, I'd say "good job, we're done, now refactor this to follow best practices and make it production ready." That cleanup magic is real.

Using Antigravity:

Besides the chat and Agents features, I had a bit of a fight getting Prettier to behave. I ended up rolling back to an older version of the Prettier VS Code extension to make it work properly. Also, the auto-suggestions were sometimes a little too fast and occasionally interrupted my typing flow.

Nobody Scrolls

Seriously, rip out the long scrolling sections. People scan fast. Show them what matters in 2 seconds or they bounce. Compact, scannable layouts > beautiful narratives nobody reads.

Header Should Only Show Important Stuff

I removed /services because I don't freelance or contract—I work as a consultant or full-time. Having a services page made no sense. Now the header is clean and purposeful.

What's Next

/life page: A more personal, storytelling section about my life, career journey, and actual personal experiences (not just professional achievements).
Better image handling and lazy loading: Current setup is good but not optimized.
Better content overall: Video presentations for each product, better photography for portfolio items.
IoT projects: I've done Arduino and Raspberry Pi projects (temperature sensors, relay switches, auto plant watering, Pi-Hole setup) that deserve to live on the site.
More coherent design: Everything's close, but I want it to feel even more unified and intentional.

Building UI using CSS shapes

Ehsan Pourhadi — Fri, 16 Jan 2026 08:03:30 +0000

I'm a total sucker for that cyberpunk, high-tech, neon aesthetic. You know the vibe, angular shapes, diagonal cuts, glowing borders, the kind of UI that looks like it came straight out of a sci-fi movie. My portfolio already has that look, and honestly, getting it working on the web was harder than I expected.

A few years ago I found augmented-ui, which was perfect for making gaming cards and flashy components. But trying to use it for actual web content? Different story. I spent hours making random stuff that looked cool but didn't work for real layouts. Eventually, I grabbed some clip-path inspiration from it, modified everything to fit an 8-point grid (percentage values were driving me nuts), and made 3-4 CSS classes that I still use in my site.

It worked. It looked unique. But it was hard.

Then one day I was lurking around the internet and stumbled onto CSS Shapes.

Wait. This is a thing?

The Figma → CSS Pipeline That Actually Worked

I already had tons of cyberpunk UI inspiration bookmarked (you can see them all here), so I did a quick search and found this Figma cyberpunk UI kit. Naturally, I tried copying the shapes.

Except... the groups weren't flat vectors. And flattening them in Figma changed the shapes. Ugh.

So I tried something wild:

Export the shape as SVG from Figma
Flatten the SVG using lean-svg.netlify.app
Convert it to CSS shape using css-generators.com/svg-to-css

And OMG. It worked. Like, shockingly well.

I sat there in disbelief for a minute, then immediately started building CyberTechUI, a full UI component library made entirely with CSS shapes.

/* A cyberpunk button shape generated from SVG */
.bu1 { 
  clip-path: shape(
    from 10.53% 100%,
    line to 0% 75.38%,
    vline to 0%,
    hline by 10.53%,
    vline by 100%,
    close,
    move by 0% -100%,
    hline by 78.95%,
    vline by 100%,
    hline to 10.53%,
    close,
    move by 89.47% 0%,
    hline by -10.53%,
    vline by 100%,
    hline by 10.53%,
    vline to 75%,
    line by -2.63% -6.25%,
    vline to 31.25%,
    line by 2.63% -6.25%,
    vline to 0%,
    close
  ); 
}

I made cards, buttons, tabs, checkboxes, everything you'd need for a complete kit. Integrated it with shadcn so you can install components with one click. The buttons alone have 7 different shape variants (bu1-bu7). Added the shapes as inline CSS in each component. It felt like magic.

The Firefox Betrayal

And then I tested it in Firefox.

Nothing.

CSS shapes. Don't. Work. In. Firefox.

I sat there staring at my screen like... what? Safari supports it. Chrome supports it. Edge supports it. But Firefox? Nope. Can I Use confirmed it, Firefox has zero support for CSS Shapes.

This was genuinely the first time I'd hit a feature that Safari had but Firefox didn't. Usually it's the other way around! I'd built this whole thing assuming cross-browser support was fine because MDN documented it and Chrome/Safari were good. Wrong assumption.

Lesson learned: Check Can I Use before you build the whole thing, not after.

For now, CyberTechUI gracefully degrades in Firefox (aka: it just shows regular boxes). Not ideal, but it works.

The Tab Component Hell

I made each component individually first, buttons, cards, inputs, all looking sharp. Then I tried putting them together into a cohesive design system.

Cue: hours of tiny adjustments while i watching Youtube.

The worst offender? The Tab component. I wanted each tab to have a unique cyberpunk shape. Not just one shape for all tabs, no, I wanted seven different shapes depending on the tab position and state.

It was absurd. I spent way too much time on it. But when it finally worked, it looked so good.

Lesson learned: Build the system first, components second. Or at least test how they fit together before you commit to seven different clip-paths.

The Fake Border Hack That Saved Everything

Here's the thing about CSS shapes: borders don't play nice with clip-path. The border gets clipped too, which means you lose half of it or it looks janky.

I knew this from my own site. It's always been annoying.

But for the checkbox component, I needed borders. The design didn't work without them.

So I faked it.

I tried two approaches:

Option 1: The ::before pseudo-element

.cyber-checkbox {
  position: relative;
  background: var(--primary);
  clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
}

.cyber-checkbox::before {
  content: '';
  position: absolute;
  inset: 2px; /* The "border" width */
  background: var(--background);
  clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
}

The main div is the "border" color. The ::before is slightly smaller and sits on top as the background.

Option 2: Nested divs with calc (this is what I went with)

const CLIP_PATH = "polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)";

<div className="w-5 h-5 bg-primary" style={{ clipPath: CLIP_PATH }}>
  <div 
    className="w-[calc(100%-2px)] h-[calc(100%-2px)] bg-background"
    style={{ clipPath: CLIP_PATH }}
  >
    {/* Inner content */}
  </div>
</div>

The second approach worked way better for me. More control over the border width, easier to adjust per component, and plays nicer with dynamic states (checked, focus, error).

What's Next

This started as a UI component library, but honestly, I'm just getting started. The same technique, converting vectors to CSS shapes, works for way more than buttons and cards.

I'm definitely making high-tech HUDs, game interfaces, sci-fi displays. The kind of stuff you'd see in a space simulator or a cyberpunk dashboard. Now that I know the pipeline works, I can crank these out.

Also, CSS aspect-ratio is a lifesaver for keeping shapes looking good across responsive layouts. Pair that with CSS shapes and you can make some genuinely wild stuff that still works on mobile.

If you're into this aesthetic, check out CyberTechUI. It's open source, it's weird, and it definitely doesn't work in Firefox yet.

But hey, it looks cool.

The WordPress Blocks I Built in 2016 Still Work in 2026 (Just Different Syntax)

Ehsan Pourhadi — Tue, 13 Jan 2026 15:55:51 +0000

So I found myself scrolling through old GitHub repos last week (we all do it, right?), and I stumbled on Blockpress - this WordPress thing I built like 10 years ago when I was shipping 20+ sites at an agency.

It was just a collection of content blocks with ACF (Advanced Custom Fields). Hero sections, testimonials, feature grids - boring stuff, but reusable. I got tired of building the same "About Us" section for the 47th time, so I made blocks I could just drop in.

Looking at it now? The structure still made sense. So I ported it to React + Shadcn. Called it AtlasBlocks.

The Thing That Surprised Me

Reading 10-year-old PHP and converting it to React was... weirdly easy.

Not because I'm some genius (definitely not), but because the patterns are basically identical:

// 2015 WordPress/ACF
get_field('title')
get_field('description')

// 2026 React
props.title
props.description

Same concept. Different words.

WordPress loops? → Array.map()

Template parts? → React components

ACF repeaters? → Array of objects in props

The syntax evolved. The logic didn't. We're still passing data into templates and rendering stuff. 🤷‍♂️

The Dumb Mistake (30 Minutes I'll Never Get Back)

I added MCP (Model Context Protocol) support so people could install blocks with AI agents. Setup was surprisingly easy - like 1-2 hours with some Vercel functions.

But then I got stuck for 30 minutes getting 401/404 errors. I was convinced Vercel had security issues or was blocking my requests.

Nope.

I was posting to an old deploy URL instead of the production URL. Copy-paste error. Changed one URL, everything worked. Classic. 😅

One Tradeoff I'm Still Thinking About

The world has way too many component libraries. I know this. You know this.

But here's the thing - I wanted blocks for content, not UI components. The stuff every site needs but nobody wants to build for the 100th time. And I wanted them styled with Shadcn/Tailwind so I could actually reuse my own work.

So yeah, I added another library to the pile. Is that good for the ecosystem? Probably not. Is it good for my personal DX? Definitely yes.

Sometimes you build things for yourself first. 🤷

What Actually Stuck

Web development looks different now. Modern React, Vite, Tailwind, Shadcn - it all feels shiny and new.

But fundamentally? We're solving the same problems we solved a decade ago. We're just doing it with better syntax and faster tools.

Your old code probably isn't as outdated as you think. The patterns age better than the syntax.

AtlasBlocks is on GitHub if you want to check it out. It's open source, uses Shadcn + Tailwind, and installs with MCP support.

But honestly, the real takeaway for me was realizing how little has fundamentally changed in 10 years. Makes me wonder what my 2036 self will think when they port this to whatever comes after React. 🚀

How I Built a Music Game in One Sunday (Powered by Tea, Chaos and AI 🤣🎧🔥)

Ehsan Pourhadi — Tue, 09 Dec 2025 15:50:54 +0000

It all started 7:30 in the morning. Sunday. I made my breakfast, egg 🥚 in a butty and a cup ☕ of Cardemon Ahmed tea. Peak comfort. Peak genius mode. I was lurking around the internet like a bored raccoon trying to catch what’s new, scrolling, scrolling, scrolling, until my brain suddenly went "yo... build something". And of course I listen to that voice, because that voice has gotten me into some pretty fun trouble before. I wanted to code something new, something silly, something cool, something that would make me go "🤣🤣 look at this weird thing I made".

And then the idea 💡 came back to me, like an old meme you forgot but still love. Ride inside my music. I have tons of unreleased tracks 😎 just sitting on my hard drive collecting dust like ancient artifacts, so why not use those. And I knew Expo and React Native already so boom, decision made. Web, Android, iOS, full cross platform madness. I also wanted tilt controls. Tilt on phone. Mouse on web. Tilt on browser mobile too because why not. Full chaos.

So I opened bolt.new because they support Expo and it gives you a nice base to work with, like a boilerplate but with vibes. I asked it to help me setup the project and even in the very first step I added collision detection because I knew I was going to need it later anyway. Felt good to have that in place early instead of trying to duct tape it at the end like I usually do 😭.

🔊 Audio Analysis: Scan First, Upload Later

The plan was very clear:

Analyze my tracks locally
Extract all the frequency bands, envelopes, beats, bpm
Save that analysis into a database, So the game never analyzes audio again
Instant geometry loading everywhere

Bolt.new helped me configure Supabase. When everything was ready, I simply changed the database owner to my own Supabase project and it migrated automatically. Honestly one of the smoothest “move to my account plz” moments I’ve ever had.

Then me and my AI helper gremlins wrote a local script to:

analyze each track
generate geometry data
upload that data to Supabase

Only after the analysis finished did the script upload the actual audio files to Supabase Storage. Correct order. Everything clean and organized (for once 😭).

This whole pipeline took maybe 2 hours and suddenly I had a full library of levels ready.

🌀 Drawing the Level: Frequency Torture Testing

Next I had to use the analyzed data to actually shape the tunnel. This part took a lot of testing:

some frequencies made the tunnel too chaotic
some were too soft
some made everything look like melted spaghetti

But bolt.new made testing super fast, push code, it rebuilds, test instantly via Expo QR or web preview. After tweaking values on different tracks, I finally found combinations I liked:

bass = big movement
kicks = tunnel squeeze
treble = tiny flicks
quiet moments = wide open space

When it started to look and feel fun, I knew I was on the right path.

🎮 Game Logic, Pages, UI, The Gameplay Skeleton

After the tunnel felt good, I moved on to building:

main menu
game screen
scoring
movement
collision updates
restart logic
loading screen
small UI fixes

Eventually switched from bolt.new to VS Code when I needed fine control over spacing, padding, margins, and a preloader.

🧠 Using Multi Agents in VS Code for the First Time

This was the first time I really used multi-agent workflows in VS Code, and honestly it clicked for me in a cool way.

I learned:

👉 One agent can “hold the context” for a task
👉 If I needed something totally different, I could open a new agent
👉 That way I didn’t confuse a single agent by jumping topics

So I had different agents working on:

Agent 1: handling gameplay logic
Agent 2: adjusting projectile speeds and physics
Agent 3: fixing UI spacing
Agent 4: generating helper components
Agent 5: working on enemy patterns

It ended up feeling like I had a tiny chaotic dev team living inside my editor. Except nobody complained. And nobody asked for coffee ☕🤣

🎨 Getting Graphics: Enter Gemini Nanobanana 🍌✨

Time for visuals. I can’t draw anything, so I used Gemini Nanobanana to:

generate a color palette
generate assets using that palette
export everything
clean up in Photoshop (crop, resize, remove backgrounds)
ask VS Code agents to replace placeholder SVGs with the new PNGs

Suddenly the whole game became alive. Colorful. A little too neon. Just how I like it.

⚡ Adding Enemies, Powerups, Shields and Other Fun Stuff

Once the graphics looked good, it was time for more gameplay elements:

enemies
powerups
shields
visual effects
hit reactions
tiny details everywhere

Every time I thought “ok done”, my brain quietly said
“hmmm… but what if… more stuff?”
and then I added more stuff.

🏆 Leaderboard Time

Since levels are endless (the music loops), I wanted high scores and user profiles.

I went back to bolt.new, asked it to set up Supabase Auth, made a few policy changes, and soon:

users got auto-created
they could update their display name
leaderboard worked great

One of the easiest setups of the whole day thanks to AI helping me config everything.

🚀 Final Build, Deploy and Bedtime

Once everything worked:

built the app
pushed to GitHub
deployed the web version on GitHub Pages
tested on phone
fixed small bugs

By the time I finished, it was already 22:00. I was tired, happy, a bit confused how fast the day went. I tried the game a few times in bed, smiled at my own weird creation, and fell asleep 😴

Final thoughts

Could I spend more time polishing? Yes.
Fix rendering and loading issues? Sure.
Add more ships, enemies, power-ups? Absolutely.
Turn it into a full commercial game? Maybe one day.

But for a single Sunday coding session, this is insane.

And honestly, I’m super happy with what I built. AI didn’t replace me, it amplified me. Gave me momentum. Removed boring stuff. Let me stay in “flow mode.”

This Sunday was one of my most fun coding days in a long time.
And now I can literally ride inside my own music.

Life = good ❤️🎧🚀

Roast My Portfolio

Ehsan Pourhadi — Sun, 09 Feb 2025 14:06:40 +0000

Hello everyone,
After getting a little feedback am here with another version of my portfolio.
All the data for portfolio is coming from 1 json file.
Feel free to explore the website here: https://ehsan-pourhadi.com/
You can also check out the source code on GitHub: https://github.com/ehsanpo/astro-template
Looking forward to your feedback!

Roast my portfolio

Ehsan Pourhadi — Mon, 23 Dec 2024 10:06:35 +0000

ello everyone,

I've been working on my personal portfolio website and would love to hear your thoughts and feedback! It's built using Astro.js, Tailwind CSS, and TypeScript.

Feel free to explore the website here: https://ehsan-pourhadi.com/

You can also check out the source code on GitHub: https://github.com/ehsanpo/portfolio-astro

Looking forward to your feedback!

My Dev Tools 2024: Streamlining Development

Ehsan Pourhadi — Fri, 16 Aug 2024 13:36:55 +0000

For a developer, possessing a proficient collection of tools is crucial for optimizing processes and enhancing productivity. By 2024, my toolbox comprises essential applications and configurations that I deem indispensable. Below is a summary of the tools and their respective justifications that I employ.

Web Browsers; Firefox and Chrome

Firefox is my preferred browser for development work because of its powerful developer tools, advanced privacy features, and compatibility with the newest web standards.

Although Firefox is my preferred browser, I also use Chrome. Due to its widespread use and extensive set of development tools, Chrome continues to be essential for testing and debugging purposes.

I optimize my Firefox browsing experience by utilizing a variety of essential plugins.

Empty Cache Button: A simple extension to clear the cache without needing to dig into the settings.
React Developer Tools: Essential for working with React applications, providing a detailed view of component hierarchies and props.
Redux DevTools: Critical for debugging Redux state changes in complex applications.
RescueTime for Firefox: Tracks time spent on various sites, helping me stay productive and focused.
Apollo Client Devtools: A must-have for developers working with GraphQL, this tool allows for deep inspection of GraphQL queries and caching.
FoxyProxy: Simplifies proxy management, allowing easy switching between multiple proxy configurations.
WAVE Evaluation Tool: Useful for accessibility testing, providing visual feedback about the accessibility of web content.
User-Agent Switcher: Allows quick switching between different user-agent strings for testing purposes.

The Command Line Interface; Warp

The Command Line Interface, sometimes known as CLI, is a user interface that allows users to interact with a computer program or operating system through text commands. One example of a CLI is Warp.

Warp is a terminal that provides a user-friendly interface. The software is equipped with AI-powered command recommendations, block-based workflows, and a range of keyboard shortcuts, which distinguishes it as an alternative to traditional terminals.

IDE: Visual Studio Code

Visual Studio Code functions as my integrated programming environment (IDE).

brew install  cask visual studio code

Exploring VS Code Extensions

General Development:

- actionforge.actionforge: Automate routine tasks and boost productivity.
- amodio.tsl-problem-matcher: Simplifies TypeScript linting and problem matching.
- better-ts-errors.better-ts-errors: Enhances TypeScript error messages for easier debugging.
- bradlc.vscode-tailwindcss: Tailwind CSS IntelliSense support for rapid UI development.
- christian-kohler.npm-intellisense: Autocompletes npm modules, saving time during development.
- dbaeumer.vscode-eslint: Integrates ESLint into VS Code, ensuring consistent code quality.
- esbenp.prettier-vscode: Formats code consistently across projects using Prettier.
- github.copilot: AI-powered code completion for faster and smarter coding.

Specialized Tools:

- ms-azuretools.vscode-docker: A must-have for containerized application development.
- ms-vscode-remote.remote-containers: Seamlessly connect to and develop within containers.
- vscode-icons-team.vscode-icons: Customizable icons for a visually pleasing workspace.
- yoavbls.pretty-ts-errors: Further improves the clarity of TypeScript error messages.

Productivity Enhancers:

- gruntfuggly.todo-tree: Organizes TODO comments in your code.
- oderwat.indent-rainbow: Colorizes indent levels, making code structure more visible.
- silofy.hackthebox: A specialized extension for cybersecurity enthusiasts.
- vscjava.vscode-java-pack: Comprehensive tools for Java development.
- wix.vscode-import-cost: Displays the cost of importing npm packages.

Additional Tools

Password Manager: I utilize the Keeper® Password Manager & Digital Vault to effectively handle and safeguard my passwords, guaranteeing that all my accounts are shielded using robust and distinct passwords.
API Testing: I utilize both Postman and Insomnia for the creation and testing of APIs. Both tools have robust capabilities for testing RESTful APIs, with Postman offering a wider range of functions and Insomnia standing out for its simplicity and superior performance.
Web performance analysis can be effectively conducted using the remarkable tool called YellowLabTools. The tool offers comprehensive analyses on performance bottlenecks, aiding in the optimization of online applications for enhanced speed and efficiency.
Note-Taking: I utilize the software application Obsidian to fulfill all of my note-taking requirements. Obsidian's versatility and robust linking structure make it well-suited for effectively organizing intricate information. The plugins that are crucial for me include:
- Dataview: Enables me to retrieve and exhibit notes in a well-organized fashion.
- The GitHub Link feature facilitates convenient connecting of notes to GitHub repositories.
- Jira Issue: Enables the direct monitoring of Jira issues within Obsidian.
- The Templater feature offers sophisticated templating capabilities, making it easier to create new notes and documents.

Automating Routine Tasks

In order to ensure that all aspects are current and functioning well, I employ a daily script that automates updates and carries out regular maintenance tasks. This script guarantees that my environment is consistently prepared for the day's tasks.

The link provided is a GitHub gist with the URL:

https://gist.github.com/ehsanpo/1c205438c1e67b7c8e12a35e996e50f3

Here’s a breakdown of the script:

Homebrew Updates:
The script checks for and installs updates for all Homebrew packages, including cask applications.

brew update
brew upgrade
brew upgrade --cask 
brew cleanup -s

System Diagnostics:
It runs diagnostics to ensure the system is in good health.

brew doctor
brew missing

Log Maintenance:
To manage disk space and keep the system clean, the script deletes logs on the first Monday of each month.

DAY_OF_WEEK=$(date +%u)
DAY_OF_MONTH=$(date +%d)

if [ "$DAY_OF_WEEK" -eq 1 ] && [ "$DAY_OF_MONTH" -le 7 ]; then
    rm ~/bin/brew_update_logs.txt
fi

MAC Address Spoofing:
For privacy and security, the script changes the MAC address each day.

NEWMAC=$(openssl rand -hex 6 | sed 's/\(..\)/\1:/g; s/.$//')
sudo ifconfig en0 ether $NEWMAC

Weather Report:
The script greets me with the weather forecast, adding a personal touch to my start of the day.

Weather=$(curl -s http://wttr.in/malmo?T | grep -m 1 -Eo -e '-?[[:digit:]].*°.+')
say "Weather today is $Weather"

Tools Powered by Artificial Intelligence

By 2024, AI tools have seamlessly integrated into my development workflow, offering indispensable aid, streamlined automation, and innovative contributions throughout different phases of development:

ChatGPT is utilized for various purposes such as ideation, code debugging, content generation, and document drafting. The natural language comprehension of this tool simplifies intricate problem-solving tasks and enhances my productivity by delivering prompt and precise responses.
GitHub Copilot is seamlessly integrated into Visual Studio Code, providing advanced coding assistance by offering code completions, producing complete functions, and even predicting the subsequent steps in my code. It is akin to having an always available AI-driven partner coder to provide assistance.
I depend on Midjourney to create AI-powered visual content for my design and creative projects. Midjourney specializes on transforming abstract concepts into visually captivating outcomes, expediting the design workflow. Their expertise lies in producing graphics, concept art, and UI elements.
Suno offers cutting-edge audio tools powered by artificial intelligence, which are highly valuable for producing soundscapes, voiceovers, and several other types of audio content. Suno enhances my work by providing great audio capabilities, whether it's for an application, a game, or even just improving a presentation.

looking for a side game while developing

Ehsan Pourhadi — Mon, 20 Jun 2022 11:29:23 +0000

Hi! my task this week to fix some issues in our web app build, so i have 2-3 min between every build test that i want to play some game in browser while i wait for my build!

Portfolio 22

Ehsan Pourhadi — Sun, 22 May 2022 07:50:20 +0000

Hi!
Just wanted to share my work on my portfolio here and see what you think is missing. Right now I'm mostly working to get all of my work in my portfolio, and have about ten more projects to add.

Am having a hard time writing a descriptions text for every project! mostly because I have done the same job and that is converting a design to code in different languages and frameworks.

The site is built with Gatsby JS, SaSS, and lot s of clip-path

https://ehsanpo.github.io/Portfolio22/