{"id":19791447,"url":"https://github.com/mlangumier/portfolio","last_synced_at":"2026-03-06T20:02:01.015Z","repository":{"id":262303397,"uuid":"876629649","full_name":"mlangumier/Portfolio","owner":"mlangumier","description":"A Next.js 15 portfolio using TypeScript, TailwindCSS 4, with Internationalization, dark theme and other features.","archived":false,"fork":false,"pushed_at":"2025-05-24T09:51:12.000Z","size":4067,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-07T00:07:18.802Z","etag":null,"topics":["bash","eslint","husky","internationalization","next-intl","nextjs15","prettier","react19","scripts","tailwind","tailwind-css","tailwindcss","tailwindcss-v4","typescript5"],"latest_commit_sha":null,"homepage":"https://mathieulangumier.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlangumier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-22T09:46:10.000Z","updated_at":"2025-06-12T06:58:06.000Z","dependencies_parsed_at":"2024-11-11T18:32:00.460Z","dependency_job_id":"8d451bf8-fc3c-4c3a-86a9-915594bcc4f8","html_url":"https://github.com/mlangumier/Portfolio","commit_stats":null,"previous_names":["mlangumier/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mlangumier/Portfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlangumier%2FPortfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlangumier%2FPortfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlangumier%2FPortfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlangumier%2FPortfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlangumier","download_url":"https://codeload.github.com/mlangumier/Portfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlangumier%2FPortfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30195531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"ssl_error","status_checked_at":"2026-03-06T18:57:34.882Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bash","eslint","husky","internationalization","next-intl","nextjs15","prettier","react19","scripts","tailwind","tailwind-css","tailwindcss","tailwindcss-v4","typescript5"],"created_at":"2024-11-12T07:03:08.539Z","updated_at":"2026-03-06T20:02:00.981Z","avatar_url":"https://github.com/mlangumier.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portfolio\n\nHello and welcome! This project is meant to showcase some of my skills as well as examples of projects I have been working on. I will be adding more features, pages, and projects, so feel free to come back from time to time and [check out what's new](https://mathieulangumier.vercel.app)!\n\n![Screenshot of the Hero section](./public/screenshot-design-hero.png)\n\n**I am currently looking for a new opportunity, so if you're looking for someone with this set of skills, feel free to [send me a message](https://www.linkedin.com/in/mathieu-langumier/)!**\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Who am I?](#who-am-i)\n- [The Project](#the-project)\n  - [Starting Process](#starting-process)\n    - [A Rocky Start](#a-rocky-start)\n    - [Rework - Design with Figma](#rework---design-with-figma)\n  - [Stack](#stack)\n    - [Core Stack - React/Next.js \\\u0026 TypeScript + Zod](#core-stack---reactnextjs--typescript--zod)\n    - [Style - Tailwind CSS v4](#style---tailwind-css-v4)\n    - [Teamwork - Docker, Git, Github](#teamwork---docker-git-github)\n    - [Formatting - Prettier, ESLint, Husky](#formatting---prettier-eslint-husky)\n    - [Internationalization - Next-intl](#internationalization---next-intl)\n    - [Deployment - Vercel](#deployment---vercel)\n- [How to Use this Project](#how-to-use-this-project)\n  - [Next.js](#nextjs)\n  - [Docker](#docker)\n  - [Style \\\u0026 Formatting](#style--formatting)\n- [Future](#future)\n- [Contact](#contact)\n\n## Who am I?\n\nHi, I'm **Mathieu Langumier**. I'm a `Front-end Developer` with around two years of experience in `React`, `Next.js` \u0026 `TypeScript`. I've also worked on projects with Ionic, Prismic, Vue.js \u0026 Node/Express.js with PostgreSQL. I love taking part in all aspects of developing a project. Creating and assembling the different pieces, and seeing how they all interact with eachother, is fascinating! That's why my long-term **goal** is to work as a `Full-stack Developer` and truly work on all aspects on a project.\n\nOutside of coding, I always try and take some time to play D\u0026D or video games with friends, enjoy a show with a good story, or simply do something relaxing, like reading a book or spending time whittling little animals while listening to music.\n\n## The Project\n\nAlthough this project only displays a landing page, the idea was to **setup** the project as I would in a **professional environment**. Therefore, I'm using some dependencies that are not necessary for the project in its current state. But, since I will be adding other pages and features, this starting setup will allow me to expand and add features without refactoring the whole project - which I have already done once (see the following section).\n\n### Starting Process\n\n#### A Rocky Start\n\nIndeed, as I was planning the content and structure of this project, one thing I didn't plan for was the design. Sure, I had spent some time researching portfolios, templates and other ideas, but I didn't have a definitive visual guide. So, I started coding, never sure of what style I wanted, or if my components' style would go well with the rest. But I already had most of the content I had planned at this time, so I decided to finish this version, and then started working on a **[proper design in Figma](https://www.figma.com/design/VfFVEGdjzBooyy6RyFCJzK/Portfolio?node-id=0-1\u0026t=XGvWvvBTXZ2xmJpN-1)**.\n\n#### Rework - Design with Figma\n\nAnd it was a great experience! I hadn't worked on **`Figma`** for a while - usually integrating designs, but not creating them - but I still remembered how to set up the `theme \u0026 variables`, `components \u0026 variants`, and how to work with the `12-columns layout`. Applying this knowledge, and at the same time researching and learning about design \u0026 UI/UX's best practices allowed me to rework this website in a way that fit what I had in mind and would be much more visually appealing.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/screenshot-layout-versions.png\" alt=\"Screent of two versions of the new design\"/\u003e\n\u003c/p\u003e\n  \u003cp align=\"center\"\u003eTwo versions of the new design\u003c/p\u003e\n\n### Stack\n\nNow, as I said, the goal was to setup this project as I would in a professional environment. With that in mind, there were a few things to consider, and dependencies to pick:\n\n#### Core Stack - React/Next.js \u0026 TypeScript + Zod\n\nMy area of expertise, so these were the best candidates for this project. `React` for the effective use of hooks, `Next.js` for server \u0026 client components, and `TypeScript` because using types makes managing data and props so much easier, and `Zod` is perfect for data validation and type inference with TS.\n\n#### Style - Tailwind CSS v4\n\nI see what you're wondering: \"No ShadCn??\", and I have thought about it, but my goal was to first work on more advanced `Tailwind CSS` features, and get a more in-depth understanding of this library. Now that I have, there is a good chance I'm going to use ShadCN on future projects, and I might even add it to this project at some point.\n\n#### Teamwork - Docker, Git, Github\n\nUsing `Git` for versioning - of course - allows me to keep using branch management and merging methods as I would when working within a team.\nSince `Github` is free, it is the perfect tool to keep our project on. Moreover, this allows us to use Vercel for deployment with minimal setup.\n`Docker` is perfect for a team, it allows everyone to use the project with the same setup regarding Node, NPM and other setup. (Not relevant here because it's not set up, but it also simplifies the use of back-end projects for Front-end developers).\n\n#### Formatting - Prettier, ESLint, Husky\n\n`Prettier` \u0026 `ESLint` allows everyone working on this project to use the same formatting rules, regardless of their VSCode settings. It prevents another contributor from saving a file and having their VSCode auto-formatting the whole file - which would show on commits.\n`Husky` is an additional tool we use to setup a script preventing commits to pass if there are any remaining stylistic or formatting errors.\n\n#### Internationalization - Next-intl\n\nStarting this project, I wanted it to be available in both `French` \u0026 `English`, and since I'm using Next.js, this was the first choice.\nBeing able to understand and speak English is an important skill in this career, and I wanted my portfolio to be available outside of France, since I'm also interested in working outside of France.\n\n#### Deployment - Vercel\n\nFor simplicity of use, and because it is free, `Vercel` was my first choice when I was looking to deploy this project. Because their team also works on Next.js, that makes it the optimal way to host a Next.js project. Also, using its Github integration allows me to auto-deploy every pull request made on selected branches (**main** for production, **develop** for development)\n\n## How to Use this Project\n\nIf you want to use this project, suggest some changes, or just see how I've set things up, you can start the project in two ways.\n\n### Next.js\n\nThe simplest way is to start the project the same way you would any other: `npm i` \u0026 `npm run dev`.\nSome information about the script: `\"dev\": \"next dev --turbopack --experimental-https\"`:\n\n- `--turbopack` is a new Next.js 15 feature, it's a bundler that allows faster local development (not necessary in this project, but always good to have)\n- `--experimental-https` generates self-signed certificates that will allow us to use webhooks \u0026 authentication without issue later. The url for localhost will now start with `https`.\n\n### Docker\n\nTo start the project using Docker - optimal for collaborative environments - we'll want to change a few things: change the host name, add `https certificates`, and start the development server with Docker.\n\n- **Change Host name**: Go into your host name file - `~/../../etc/hosts` for Ubuntu - and add the name `mathieulangumier.local` to the list (you can change it, this is an example).\n- **Activate Https certificates**:\n  - Install [mkcert](https://github.com/FiloSottile/mkcert)\n  - Then use this command to generate the certificates: `mkcert --cert-file mathieulangumier.local.crt --key-file mathieulangumier.local.key mathieulangumier.local`\n  - Create a `/certs` folder in your project's root and place the two new files inside of it.\n- **Use Docker**:\n  - Install `Docker` \u0026 `Docker-compose`\n  - Use `docker-compose build` to run the project the first time.\n  - After that, you can stick with `docker-compose up` to start the dev server and work on your project. You can close the server by pressing `Ctrl + C`, then shutting them down using `docker-compose down` (not required).\n- **Warning**: We've set up `Nginx`, but it might not start if you already have another Nginx or Apache server running on port `443`. If this happens, make sure to shut down the other server and try again.\n\nAnd you're all set! Enjoy!\n\n### Style \u0026 Formatting\n\nWhile working on this project, `Husky` will prevent you from committing changes if there are linting or formatting issues. To avoid this, you can comment the commands in `./.huksy/pre-commit`, which will prevent Husky from checking your code before commit.\nDon't forget to reactivate it once you're done!\n\n`Tailwind CSS` \u0026 its intellisense allow us to use auto-completion of custom props via VSCode settings. To do that, simply add your prop name to the extension's list in `Tailwind CSS: class attributes`. On this project, we're added `containerStyle` to our list.\n\n## Future\n\nWhat's coming? What am I working on?\nWell, I'm not going to say anything until the next featured are deployed, or - if you're curious - until you see the related commits. What I can tell you, however, is that I will be updating this portfolio regularly with corrective changes, updating the dependencies and related code if required, adding new features, new pages, and at some point new projects. Stay tuned!\n\n## Contact\n\nIf you have any questions, you can either send me an email via this [Portfolio](https://mathieulangumier.vercel.app/#contact) or contact me on [LinkedIn](https://www.linkedin.com/in/mathieu-langumier/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlangumier%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlangumier%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlangumier%2Fportfolio/lists"}