Portfolio Website

The goal was to showcase the skills I adquired doing this react course [link] and the ones I've developed on my own.

this site is a single page application that combines static and dynamic routes in order to allow fast time loads, good SEO, and avoid unnecessary redeploys on changing content. There's pending work to do.

I wanted to create a mobile focused UI that only displayed each section as a fullpage layour with scroll snap sections. Video link here

• React as the main core of the app.
• Redux for state management
• Next.js: Server-side rendering, static site generation, and dynamic routing for optimal performance and SEO.
• Vercel blob: Dynamic storage to fetch without rebuilding the app.
• Motion: Custom animations
• TypeScript: Type-safe codebase for reliability and scalability.
• Tailwind CSS: Utility-first styling for rapid, consistent UI development.
• Jest: (Planned) Unit tests for robust code quality.
• Playwright/Cypress: (Planned) End to end tests.

Swipe mobile first intuitive UI

• API Routes: Dynamic data fetching with Vercel Blob and server-side logic using Next.js API endpoints.
• Content Management: Projects, skills, and texts are managed via structured JSON and MDX files for easy localization and updates. Motion animated visually appealing components
• Dark/Light Mode: Modern theme toggle with CSS variables and system preference support.
• Accessibility: Semantic HTML, keyboard navigation, and ARIA best practices.

For my fullpage layout, I created my component SectionTransitionWrapper:

// Example: SectionTransitionWrapper usage
<SectionTransitionWrapper>
  <Section id="about">About</Section>
  <Section id="projects">Projects</Section>
  <Section id="contact">Contact</Section>
</SectionTransitionWrapper>

This component ensures each section fills the viewport and enables smooth scroll snap navigation between them, providing a mobile-first, app-like experience.

• Internationalization (i18n)
• Light mode
• Unit and end-to-end (e2e) tests
• Further performance optimizations, specially with motion components
• Rate limits on blob files
• Sanitize file paths

if (filePathArr.some(part => part.includes('..'))) {
  return NextResponse.json({ error: "Invalid file path." }, { status: 400 });
}

github issues link

• Next.js & React: Modern SPA, dynamic/static routes
• Framer Motion: Animations and smooth transitions
• Responsive Design: Fluid UI, mobile-first, accessibility
• Section Navigation: Hash/anchor links, smooth scrolling
• Image Optimization: Next.js <Image />, fast loads

• API Routes: RESTful endpoints, error handling
• Vercel Blob Storage: Dynamic content, predictable filenames
• Content Centralization: JSON/MDX for easy updates

• ESLint/Prettier/TypeScript: Code quality, lint/type checks
• MDX Rendering: Error handling, fallbacks
• Testing: Jest, Playwright (planned)
• CI/CD & Deployment: Vercel, env variables

• Peer Dependencies: Resolving npm compatibility issues
• Managing Packages: Keeping Next.js, React, TypeScript, and all dependencies up to date and compatible

• UI/UX Iteration: Layout, feedback, real device testing
• Migration: React Router v7, Remix loaders/actions → Next.js
• Stacking Context: Debugging z-index issues
• Conventional Commits: Consistent commit messages