Cartes.dev

Cartes.dev — Previous Portfolio Website

Portfolio website for Cartes.dev, the previous version of my portfolio.

This website showcases Next.js’s Static Generation feature using Markdown files (MDX) as the data source.

The main technologies used are:

• Next.js
• React.js
• MDX
• Tailwind CSS
• Vercel

Run the project

The project is Open Source and can be found on Github

$ git clone https://github.com/alfonsocartes/cartes_dev.git
$ cd cartes_dev
$ npm install
$ npm run dev

Technology Stack Used

• Javascript (ECMAScript): The core language for the portfolio site, used for interactive UI elements like dark mode toggling, image carousels for project showcases, and dynamic content rendering from MDX files.
• Next.js: Chosen as the framework for the portfolio to leverage its Static Site Generation capabilities, producing pre-rendered HTML pages from MDX content at build time for fast page loads and excellent SEO across all project and blog post pages.
• Next.js Static Site Generation: Used to pre-render all portfolio pages, blog posts, and project pages at build time from MDX source files, resulting in a fully static site with near-instant navigation and no server runtime needed.
• Next.js Image Optimization: Automated responsive image generation and lazy loading for project screenshots and blog images, serving appropriately sized WebP images to reduce page weight and improve load performance.
• React.js: Enabled the component-based architecture for the portfolio — reusable components for project cards, screenshot carousels, navigation, and the dark mode toggle were shared across all pages while MDX allowed embedding React components directly within blog and project content.
• MDX: Used as the content authoring format for all blog posts and project pages, combining Markdown’s readability with the ability to embed interactive React components (image carousels, code blocks with syntax highlighting) directly within the content.
• Tailwind CSS: Provided the utility-first styling system for the portfolio’s responsive layout, dark mode theming, and consistent design across all pages without writing custom CSS files.
• Vercel: Deployed and hosted the statically generated portfolio site, providing automatic builds on git push, global CDN distribution, and seamless integration with Next.js features like image optimization.