Portfólio Pessoal
Platform for presenting professional background, projects, and experience
A portfolio built from scratch to bring together experience, technologies, and case studies in an editorial, responsive experience designed to grow.
Overview
The project in perspective.
An independent platform for presenting professional background, technologies, experience, and projects with more context than a traditional resume.
- Objective
- Present professional information through a clear, accessible structure that is simple to update as new projects are completed.
- Context
- The portfolio also serves as a lab for applying Next.js architecture, visual systems, SEO, responsiveness, and development best practices.
- Project type
- Professional portfolio
- Role
- Full stack design and development
- Status
- In development
- Year
- 2026
01
What this project demonstrates
Data-driven architecture
Content is separated from components so new projects do not require structural interface changes.
Responsive experience
Layouts and components are designed to keep reading comfortable across different screen sizes.
Built-in accessibility
Keyboard navigation, visible focus, semantics, and reduced motion were considered from the start.
Foundation for growth
Dynamic routes, per-project metadata, and a modular structure support the portfolio's evolution.
02
My role
Product direction
Defined the narrative, content hierarchy, and goals for each portfolio area.
Visual identity
Created a dark editorial technology system with reusable tokens and moderate accent color usage.
Frontend development
Implemented the interface with Next.js App Router, TypeScript, Tailwind CSS, and reusable components.
Quality and discovery
Organized metadata, project pages, navigation, and content to support maintenance and future evolution.
03
Features
Anchor navigation
Direct access to the home page's main areas with keyboard support and a responsive menu.
Dynamic case studies
Individual pages generated from typed data to explore each project in depth.
Modular sections
Independent components for professional background, projects, technologies, and contact while preserving consistency.
Integrated contact
A secure form and alternative links make conversation more accessible to recruiters and partners.
SEO and metadata
Global and individual metadata improve presentation in search engines and shared links.
Resume available
A download action integrated into the portfolio without relying on external services.
04
Gallery
Interfaces and visual records that help explain the project's experience and primary flows.
01
Portfolio identity
A visual composition representing the project's personal brand and technical proposition.
Objective: Establish a recognizable, consistent professional presence in shares and site entry points.
05
Architecture
Next.js
App Router, dynamic routes, rendering, and the performance foundation.
Typed components and data
A reusable interface connected to centralized content files.
Deployment-ready hosting
A structure ready to be published on a platform compatible with Next.js.
Supporting elements
- SEO
- Accessibility
- Secure contact form
- Resume
- Vercel-ready
06
Technical stack
Frontend
- Next.js
- React
- TypeScript
- Tailwind CSS
Backend
- Route Handlers
- Resend
- Zod
Database
- No database in this version
Infrastructure
- Vercel
- Environment variables
- GitHub
Quality
- ESLint
- TypeScript
- SEO
- Accessibility
07
Technical decisions
No ready-made template
The interface was designed for this professional identity and content, without inheriting a generic theme's limitations.
Data outside components
Projects, experience, and technologies live in dedicated files to reduce repetition and simplify updates.
Server Components by default
Interactivity is limited to the required points to preserve simplicity and performance.
Accessibility as a requirement
Semantics, visible focus, and motion preferences are part of the implementation, not an afterthought.
08
Learnings
- Structuring a small, coherent design system for a real application.
- Using the App Router, dynamic routes, and Next.js metadata in a portfolio project.
- Balancing visual presence, performance, SEO, and accessibility.
- Creating a modular foundation for publishing new case studies.
09
Result
The portfolio has become a complete professional platform that presents projects in depth and can keep evolving without losing visual consistency.
- A home page with a complete professional narrative
- Case studies generated from data
- Integrated contact, resume, and social links
- Foundation ready for new projects and publication
10
Links
Explore the public resources available to learn more about the project.
Next step
Let's build something together.
I am open to professional opportunities, projects, and conversations about software development.
Get in touch