Landing Page
Capivo
My first professional project — a pixel-perfect landing page built with Next.js and Material UI during my internship.
Category
- Role
- Front-End Intern
- Timeline
- Internship
- Team Size
- Cross-functional team
- Year
- 2024
- Technologies
- Next.jsTypeScriptMaterial UI
01
Overview
Capivo was the first company I started my professional journey with as a front-end developer during my internship. My first real assignment was building the company's landing page, with a focus on accurate design implementation and production-ready quality.
I built the page with Next.js, TypeScript, and Material UI to present Capivo's services, portfolio, clients, and identity as a web and mobile development partner.
02
The Challenge
For me, the challenge wasn't the project's complexity — it was moving from learning projects into a real team, meeting code quality standards, communicating with teammates, and turning a design into production-ready interfaces.
The work also required pixel-perfect implementation, a responsive experience across devices, and visual consistency through Material UI.
03
My Role
I owned the company's landing page during the internship, including:
- Turning the Figma design into a pixel-perfect interface.
- Building the landing page with Next.js, TypeScript, and Material UI.
- Making sure the site worked across different screen sizes.
- Collaborating with the team and iterating on feedback until the final version shipped.
My role went beyond shipping screens — it included learning in a professional environment, applying review feedback, and delivering something ready for real use.
04
Process
01
Discovery
I reviewed the design, identified the required components, and planned how to implement them — including marketing sections like services, portfolio, clients, and about.
02
Planning
We structured the page into clear sections and decided how to build components with Material UI while keeping responsiveness and design consistency.
03
Development
I built the page with Next.js, TypeScript, and Material UI, focusing on accurate implementation, responsiveness, and reusable UI for each design section.
04
Testing
Before handoff, I validated:
- Pixel-perfect alignment with the design.
- Compatibility across screen sizes and devices.
- Core sections such as services, portfolio, and clients.
- Team feedback after reviews.
05
Launch
I applied the team's review notes until the page was ready, then shipped a live version that reflects the company's brand.
05
Features
Pixel-perfect implementation
I translated the design into a matching interface, with attention to the small details that make the page feel polished and consistent.
Responsive design
I delivered a solid experience across devices and screen sizes, from mobile to desktop.
Material UI
I used Material UI components to build consistent, maintainable interfaces across the page.
Complete marketing sections
I built the page sections to present Capivo's services, work, clients, and identity as a trusted development partner.
06
Technical Highlights
On this project I focused on applying professional implementation standards for the first time inside a real team, with attention to UI accuracy and responsiveness.
What I worked with:
- Next.js.
- TypeScript.
- Material UI.
- Pixel Perfect Implementation.
- Responsive Design.
- Component-Based UI.
- Team collaboration and code reviews.
07
Results
During the internship, I:
- Delivered my first professional project.
- Gained experience working inside a real development team.
- Applied production UI best practices for the first time.
- Shipped the page live on the final URL.
08
Lessons Learned
This experience was the starting point of my career. I learned that professional work is more than writing code — it includes communicating with the team, meeting quality standards, and caring about the details that make a product ready for real use.
