This is my personal portfolio and blog, showcasing my work in web development and photography. The site is built with Next.js, leveraging its powerful features for a seamless user experience.
This project is a complete rewrite of my previous portfolio which was built with React Vite. The new version uses Next.js for better performance and a better SEO.
This website was designed to be content driven, allowing me to easily update my projects and blog posts without needing to modify the codebase. The content is managed through a combination of Markdown files (.mdx) allowing me to write rich text content with images, code snippets, and more.
The previous one came with another project, Julia MarkdownJoy, which was a Markdown converter made with Julia, with the same approach as what MDX already does. My previous portfolio went with its own sub-project, including this one- SnapFileThing. An easy way for me to host my documents, photos, projects screenshots.
Before SnapFileThing, I've first started a POC written in Rust for serving all the content of the site and hosting the files, but I quickly realized that Next.js already provides a great solution for this. So I decided to stick with Next.js and use its built-in features for serving static content, also improving the performance and SEO of the site.
| Technology | Description | Version |
|---|---|---|
| Stack | T3 Stack: Next.js, TypeScript, Tailwind CSS, and more | |
| Next.js | React framework for building server-rendered applications | 15.2.3 |
| TypeScript | Typed superset of JavaScript | 5.8.3 |
| React | JavaScript library for building user interfaces | 19.0.0 |
| Bun | JavaScript runtime for fast builds and development | 1.2.18 |
Making this project with Next.js was a way to leverage the power of Vercel's platform for continuous integration and deployment. The project is hosted on Vercel, which provides automatic deployments on every push to the main branch, ensuring that the latest changes are always live.
- All the texts are traduced in French and English, using the
next-i18nextpackage for internationalization, check themessages/directory for the translations. - The
content/directory contains all the Markdown files, and constants for the projects and blog posts (tags, categories, etc.). -
- All the URLs that are in the website are in the
URLs.tsfile.
- All the URLs that are in the website are in the
- The
lib/directory contains the utility functions and components used throughout the site, as well as the mdx components for fetching and rendering the Markdown content. -
- Some common utils methods are in the
lib/utils.tsand the mailer is in thelib/mailer.tsfile.
- Some common utils methods are in the
- The
components/directory contains the React components used in the site, including the layout, header, footer, and other reusable components. - The
app/directory contains the Next.js app directory structure, including the pages, API routes, and other application-specific code.
Eric Philippe - Web Developer & Photographer