Table component
This component started as a Figma design that I then converted to code using Meng To's Figma to AI Code plugin. I then used Cursor to add sorting by column, partial selection, and some styling.
Employees
Add or remove employees and modify the data of existing ones.
| Sarah Chen | sarah.chen@acme.co | Active | 34 | Engineering | Yes | |
| Marcus Rodriguez | m.rodriguez@acme.co | On Leave | 29 | Product | No |
Dynamic Island
Recreated the transitions of Apple's Dynamic Island. Click to cycle through the different sizes.
New slide
I was planning an animation that plays when a new page loads. For this prototype, I used staggerChildren to orchestrate the animation of the cards.
3D Coins
I've been learning 3D modeling recently. I made these coins with Spline which allowed me to export them into Next.js. For the material of the coins, I wanted to make a shiny metal that looked heavy. I applied different rotation speeds to further give the impression of a dense alloy.
Progressive card
A two-step dialog that changes to accommodate different types of input. Made with Framer Motion, Tailwind and React.
Progressive card
This is the first page. It's simple and not very tall.
Quick menu
A concept for quicly jumping around a web app. Made with Framer Motion, Tailwind and React.