Maria Ebrahimi - Code Lab

Code Lab

// section.code-lab

Small, self-contained front-end experiments. Every snippet runs live in your browser — open the playground, read the source, and download a single HTML file to use anywhere.

Open playground

Interactive Todo List

A dependency-free todo list with add, toggle, delete and clear-completed — implemented three ways: vanilla JS, React, and Next.js with TypeScript + Tailwind.

HTMLReactNext.jsJavaScriptReactNext.js

Open playground

Particle Network Canvas

An animated constellation of particles that link to each other and follow the cursor — drawn on a raw 2D canvas with requestAnimationFrame, in vanilla JS, React (hooks + effect cleanup) and Next.js with typed props.

HTMLReactNext.jsJavaScriptCanvasAnimation

Open playground

Password Strength Checker

Live password scoring with a segmented meter, rule checklist and show/hide toggle — the same UI in raw HTML/CSS/JS, React JSX, and Next.js with TypeScript + Tailwind.

HTMLReactNext.jsJavaScriptFormsValidation

Open playground

Glassmorphism Weather Card

A frosted-glass weather card on an animated gradient background — backdrop-filter, keyframes and shadow layering, as raw CSS, as a data-driven React component, and as a typed zero-JS Next.js Server Component.

HTMLReactNext.jsCSSGlassmorphismAnimation

// tip: each download is one dependency-free .html file

Front-End Developer

Let's Talk

Ready to build something great together?

I'm currently available for new opportunities and exciting projects.
Feel free to reach out — I usually reply within 24 hours.