Project Case Study
arep.studio v2 Overview
A portfolio website built for a motion graphic artist and designer. The focus is on letting the creative work speak for itself through clean layout and smooth animations.
Framework
next
Route
/apps/arep-studio-v2
Status
ongoing
A portfolio website I built for a motion graphic artist. It showcases their creative work with smooth animations and includes a contact form for client inquiries. Live and in use at arep.studio.
Hero
Featured Work
Project Gallery
Contact Form
Challenge Statement
The client needed a portfolio that feels premium and visually expressive, but still makes it easy for potential clients to browse work and get in touch. The previous version didn't have a working contact form, so inquiries were being lost.
A beautiful portfolio means nothing if visitors can't actually reach the person behind it. The missing contact form was a real problem — potential clients had no way to get in touch.
- Clean, visual-first layout that keeps the focus on the artist's work rather than competing with it.
- Working contact form with email delivery — visitors can send real inquiries directly from the site.
- Smooth page transitions and scroll animations that match the creative, premium feel the client wanted.
Solution Approach
Built a modern, animation-rich portfolio with a clear visual hierarchy that puts the creative work front and center. Added a fully working contact form with email delivery so potential clients can reach out directly from the site.
- Designed the layout to prioritize featured work with generous spacing and deliberate section pacing, so each piece gets proper attention.
- Structured navigation to be minimal and intuitive — visitors can browse categories without losing context of where they are.
- Set up email delivery using Nodemailer with Zoho SMTP, configured through environment variables so it works seamlessly across staging and production.
Technologies Stack
- Next.js — Framework — server-rendered pages with fast navigation
- TypeScript — Language — type-safe development across all components
- Tailwind CSS — Styling — responsive layout with utility classes
- Framer Motion — Animation — scroll-triggered effects and page transitions
- Nodemailer — Email — powers the contact form with Zoho SMTP delivery
- Vercel — Hosting — production deployment with automatic previews