Mari Estúdio arte & Tattoo is a visually striking, fully responsive landing page for a tattoo artist. Built using React, Next.js, TypeScript, CSS3, and HTML5, this project highlights advanced web development, UI/UX choices, and problem-solving in real-world client scenarios. Deploy is handled by Vercel for speed and global reach.
The client requested a cyberpunk-styled landing page to showcase her portfolio, services, and provide contact options. Key requirements:
- Futuristic design true to the cyberpunk theme
- Seamless, mobile-first navigation
- High performance and SEO
- Easy updates and scalability
- React: Component-driven, dynamic UI.
- Next.js: Server-side rendering and static generation for fast loads.
- TypeScript: Type safety and scalable code.
- CSS3/HTML5: Rich visuals, custom animations, semantic structure.
- Vercel: Seamless deployment and CI/CD pipeline.
- Dynamic portfolio and scheduling sections
- Cyberpunk animations and color palette
- Optimized mobile-first breakpoints for all device sizes
- SEO best practices and accessibility improvements
- Fast, global deployment via Vercel
- Responsiveness: Initial layouts broke on various screens (tablets, iPhones). Refactored using CSS Grid, Flexbox, and relative units (
em,%,vw), with rigorous device and browser testing. - Browser Compatibility: Safari had unique CSS bugs; fixed with vendor prefixes and feature detection.
- Client Feedback: Several iterations balanced bold aesthetics with usability (contrast, font size, touch targets).
- Performance: Images optimized, lazy loading implemented, and unused CSS purged to speed up navigation.
The project is live on Vercel, ensuring fast, reliable access and automatic updates with every push.
Positive Outcomes:
- Notable increase in online appointment requests.
- Brand recognition and online visibility improved through distinct visual identity.
- Users praised the mobile experience and fast navigation.
Negative Points / Lessons Learned:
- Some users found the color palette intense; future projects will prioritize accessibility and offer theme toggles.
- Initial launch missed some alt tags, impacting accessibility and SEO (fixed in subsequent releases).
- Multi-language support was not included but will be prioritized for similar clients in the future.
Mari Ink Cyberpunk Agenda is a showcase of modern web technology and creative design, delivering measurable value to the client and end users. The challenges faced led to professional growth and process improvements, making this a standout piece in my portfolio.
git clone https://github.com/eryckassis/mari-ink-cyberpunk-agenda.git
cd mari-ink-cyberpunk-agenda
npm install
npm run dev
