diff --git a/404.html b/404.html index 9ec1074..e43ab88 100644 --- a/404.html +++ b/404.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

404 - Page Not Found

Tripser Blog

Live websiteSite as I left it
Tripser Blog

Shop

CodesandboxGithub
Shop

CSS only modal

CSS only modal
Go back Home
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +
ProjectsBlogResume

404 - Page Not Found

Tripser Blog

Live websiteSite as I left it
Tripser Blog

Shop

CodesandboxGithub
Shop

CSS only modal

CSS only modal
Go back Home
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/404.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/404.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/404.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/404.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/blog.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/blog.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/blog.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/blog.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/index.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/index.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/index.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/index.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/black-jack.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/black-jack.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/black-jack.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/black-jack.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/brick-breaker.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/brick-breaker.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/brick-breaker.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/brick-breaker.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/calculator.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/calculator.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/calculator.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/calculator.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/clock.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/clock.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/clock.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/clock.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/color-game.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/color-game.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/color-game.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/color-game.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/connect-4.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/connect-4.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/connect-4.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/connect-4.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/dad-jokes.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/dad-jokes.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/dad-jokes.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/dad-jokes.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/date-counter.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/date-counter.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/date-counter.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/date-counter.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/drum-machine.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/drum-machine.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/drum-machine.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/drum-machine.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/eli-paris.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/eli-paris.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/eli-paris.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/eli-paris.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/etch-a-sketch.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/etch-a-sketch.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/etch-a-sketch.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/etch-a-sketch.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/giphy-search.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/giphy-search.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/giphy-search.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/giphy-search.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/hangman.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/hangman.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/hangman.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/hangman.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/higher-or-lower.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/higher-or-lower.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/higher-or-lower.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/higher-or-lower.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/kpmg-careers.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/kpmg-careers.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/kpmg-careers.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/kpmg-careers.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/kpmg-law.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/kpmg-law.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/kpmg-law.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/kpmg-law.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/memory.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/memory.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/memory.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/memory.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/minesweeper.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/minesweeper.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/minesweeper.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/minesweeper.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/movies.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/movies.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/movies.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/movies.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/omega.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/omega.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/omega.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/omega.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/onomo.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/onomo.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/onomo.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/onomo.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/padel.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/padel.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/padel.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/padel.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/pokemon.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/pokemon.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/pokemon.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/pokemon.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/quiz.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/quiz.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/quiz.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/quiz.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/quotes.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/quotes.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/quotes.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/quotes.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/recipes.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/recipes.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/recipes.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/recipes.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/shop.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/shop.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/shop.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/shop.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/simon-game.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/simon-game.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/simon-game.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/simon-game.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/sliding-puzzle.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/sliding-puzzle.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/sliding-puzzle.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/sliding-puzzle.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/snake.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/snake.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/snake.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/snake.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/star-match.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/star-match.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/star-match.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/star-match.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tetris.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tetris.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tetris.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tetris.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tic-tac-toe.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tic-tac-toe.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tic-tac-toe.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tic-tac-toe.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/timer.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/timer.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/timer.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/timer.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tripser-blog.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tripser-blog.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/tripser-blog.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/tripser-blog.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/projects/whack-a-donkey-kong.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/projects/whack-a-donkey-kong.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/projects/whack-a-donkey-kong.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/projects/whack-a-donkey-kong.json diff --git a/_next/data/CoRGpb6DHYu7ljeUH6D_8/resume-remy-beumier.json b/_next/data/aB9WYO3zGYKZxL5WPw_SD/resume-remy-beumier.json similarity index 100% rename from _next/data/CoRGpb6DHYu7ljeUH6D_8/resume-remy-beumier.json rename to _next/data/aB9WYO3zGYKZxL5WPw_SD/resume-remy-beumier.json diff --git a/_next/static/CoRGpb6DHYu7ljeUH6D_8/_buildManifest.js b/_next/static/aB9WYO3zGYKZxL5WPw_SD/_buildManifest.js similarity index 98% rename from _next/static/CoRGpb6DHYu7ljeUH6D_8/_buildManifest.js rename to _next/static/aB9WYO3zGYKZxL5WPw_SD/_buildManifest.js index 44a8ecc..9e348cd 100644 --- a/_next/static/CoRGpb6DHYu7ljeUH6D_8/_buildManifest.js +++ b/_next/static/aB9WYO3zGYKZxL5WPw_SD/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,t,c,a,n,o,g,b){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,t,c,a,e,"static/chunks/540-a37f3d67b69247f8.js",b,"static/chunks/pages/index-7f9d57a1b987c96e.js"],"/404":[s,t,c,a,e,"static/chunks/pages/404-1c6f61834ff961c2.js"],"/_error":["static/chunks/pages/_error-171b0f04c224d08c.js"],"/blog":[s,t,c,a,e,"static/chunks/pages/blog-8456d7f369f9622d.js"],"/blog/change-nextjs-error-pages":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/change-nextjs-error-pages-19ad681a7f37a310.js"],"/blog/css-only-accordion":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-accordion-21e528cbc43699db.js"],"/blog/css-only-modal":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-modal-540c0ba4ee63af5c.js"],"/blog/css-only-responsive-navbar":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-responsive-navbar-f418fdc68826788c.js"],"/blog/css-only-toggle-switch-button":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-toggle-switch-button-69d596fa63fd29b1.js"],"/blog/fix-the-window-is-not-defined-error":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/fix-the-window-is-not-defined-error-ed2339bb43fb4e79.js"],"/blog/generate-a-sitemap-in-nextjs":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/generate-a-sitemap-in-nextjs-30f21239486a341b.js"],"/blog/get-web-analytics-in-nextjs-with-goatcounter":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/get-web-analytics-in-nextjs-with-goatcounter-b04bd57dac4e414b.js"],"/blog/markdown-tutorial":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/markdown-tutorial-af0ab487d517fe5a.js"],"/blog/nextjs-dark-mode":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/nextjs-dark-mode-3f8030028300e503.js"],"/blog/set-nextjs-lang":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-nextjs-lang-485174564e4809ff.js"],"/blog/set-up-eslint-into-nextjs":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-up-eslint-into-nextjs-c865a3fa3cf8649e.js"],"/blog/set-up-sass-in-the-best-way":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-up-sass-in-the-best-way-34ac4d36d2a06155.js"],"/projects":[s,t,c,a,e,b,"static/chunks/pages/projects-d92e2dcd46c39b9d.js"],"/projects/[slug]":[s,t,c,a,e,b,"static/chunks/pages/projects/[slug]-1c45ffd1a92e747f.js"],"/resume-remy-beumier":[s,e,"static/chunks/pages/resume-remy-beumier-081d34cc9efc7401.js"],sortedPages:["/","/404","/_app","/_error","/blog","/blog/change-nextjs-error-pages","/blog/css-only-accordion","/blog/css-only-modal","/blog/css-only-responsive-navbar","/blog/css-only-toggle-switch-button","/blog/fix-the-window-is-not-defined-error","/blog/generate-a-sitemap-in-nextjs","/blog/get-web-analytics-in-nextjs-with-goatcounter","/blog/markdown-tutorial","/blog/nextjs-dark-mode","/blog/set-nextjs-lang","/blog/set-up-eslint-into-nextjs","/blog/set-up-sass-in-the-best-way","/projects","/projects/[slug]","/resume-remy-beumier"]}}("static/chunks/fea29d9f-174a0b14c11b064f.js","static/chunks/805-551981d8e8134167.js","static/chunks/d9067523-083de8c74ef33ba2.js","static/chunks/cb355538-bf248ea9cf1f7142.js","static/chunks/2e3a845b-bf79c2a1b623f22c.js","static/chunks/136-77403b8a33c6482d.js","static/chunks/911-ff99b706a8b7e44a.js","static/css/2da0fb34b86b9cff.css","static/chunks/501-543124f55751f104.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST=function(s,e,t,c,a,n,o,g,b){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,t,c,a,e,"static/chunks/540-a37f3d67b69247f8.js",b,"static/chunks/pages/index-af8093a28be9b51c.js"],"/404":[s,t,c,a,e,"static/chunks/pages/404-1c6f61834ff961c2.js"],"/_error":["static/chunks/pages/_error-171b0f04c224d08c.js"],"/blog":[s,t,c,a,e,"static/chunks/pages/blog-8456d7f369f9622d.js"],"/blog/change-nextjs-error-pages":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/change-nextjs-error-pages-19ad681a7f37a310.js"],"/blog/css-only-accordion":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-accordion-21e528cbc43699db.js"],"/blog/css-only-modal":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-modal-540c0ba4ee63af5c.js"],"/blog/css-only-responsive-navbar":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-responsive-navbar-f418fdc68826788c.js"],"/blog/css-only-toggle-switch-button":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/css-only-toggle-switch-button-69d596fa63fd29b1.js"],"/blog/fix-the-window-is-not-defined-error":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/fix-the-window-is-not-defined-error-ed2339bb43fb4e79.js"],"/blog/generate-a-sitemap-in-nextjs":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/generate-a-sitemap-in-nextjs-30f21239486a341b.js"],"/blog/get-web-analytics-in-nextjs-with-goatcounter":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/get-web-analytics-in-nextjs-with-goatcounter-b04bd57dac4e414b.js"],"/blog/markdown-tutorial":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/markdown-tutorial-af0ab487d517fe5a.js"],"/blog/nextjs-dark-mode":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/nextjs-dark-mode-3f8030028300e503.js"],"/blog/set-nextjs-lang":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-nextjs-lang-485174564e4809ff.js"],"/blog/set-up-eslint-into-nextjs":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-up-eslint-into-nextjs-c865a3fa3cf8649e.js"],"/blog/set-up-sass-in-the-best-way":[s,t,c,a,e,n,o,g,"static/chunks/pages/blog/set-up-sass-in-the-best-way-34ac4d36d2a06155.js"],"/projects":[s,t,c,a,e,b,"static/chunks/pages/projects-d92e2dcd46c39b9d.js"],"/projects/[slug]":[s,t,c,a,e,b,"static/chunks/pages/projects/[slug]-1c45ffd1a92e747f.js"],"/resume-remy-beumier":[s,e,"static/chunks/pages/resume-remy-beumier-081d34cc9efc7401.js"],sortedPages:["/","/404","/_app","/_error","/blog","/blog/change-nextjs-error-pages","/blog/css-only-accordion","/blog/css-only-modal","/blog/css-only-responsive-navbar","/blog/css-only-toggle-switch-button","/blog/fix-the-window-is-not-defined-error","/blog/generate-a-sitemap-in-nextjs","/blog/get-web-analytics-in-nextjs-with-goatcounter","/blog/markdown-tutorial","/blog/nextjs-dark-mode","/blog/set-nextjs-lang","/blog/set-up-eslint-into-nextjs","/blog/set-up-sass-in-the-best-way","/projects","/projects/[slug]","/resume-remy-beumier"]}}("static/chunks/fea29d9f-174a0b14c11b064f.js","static/chunks/805-551981d8e8134167.js","static/chunks/d9067523-083de8c74ef33ba2.js","static/chunks/cb355538-bf248ea9cf1f7142.js","static/chunks/2e3a845b-bf79c2a1b623f22c.js","static/chunks/136-77403b8a33c6482d.js","static/chunks/911-ff99b706a8b7e44a.js","static/css/2da0fb34b86b9cff.css","static/chunks/501-543124f55751f104.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/CoRGpb6DHYu7ljeUH6D_8/_ssgManifest.js b/_next/static/aB9WYO3zGYKZxL5WPw_SD/_ssgManifest.js similarity index 100% rename from _next/static/CoRGpb6DHYu7ljeUH6D_8/_ssgManifest.js rename to _next/static/aB9WYO3zGYKZxL5WPw_SD/_ssgManifest.js diff --git a/_next/static/chunks/pages/index-7f9d57a1b987c96e.js b/_next/static/chunks/pages/index-af8093a28be9b51c.js similarity index 90% rename from _next/static/chunks/pages/index-7f9d57a1b987c96e.js rename to _next/static/chunks/pages/index-af8093a28be9b51c.js index 595f262..ec29edd 100644 --- a/_next/static/chunks/pages/index-7f9d57a1b987c96e.js +++ b/_next/static/chunks/pages/index-af8093a28be9b51c.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{8312:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(1995)}])},8764:function(e){"use strict";e.exports={2016:{first:"2016-12-23T22:57:59.000+01:00",latest:"2016-12-06T17:05:37.000+01:00",commits:61,repos:2,months:[{name:"Dec",commits:61}]},2017:{first:"2017-05-04T18:29:12.000+02:00",latest:"2017-01-01T18:13:15.000+01:00",commits:337,repos:4,months:[{name:"Jan",commits:57},{name:"Feb",commits:54},{name:"Mar",commits:48},{name:"Apr",commits:34},{name:"May",commits:17},{name:"Jun",commits:9},{name:"Jul",commits:16},{name:"Aug",commits:11},{name:"Sep",commits:21},{name:"Oct",commits:24},{name:"Nov",commits:17},{name:"Dec",commits:29}]},2018:{first:"2018-10-13T22:07:49.000+02:00",latest:"2018-10-13T22:07:49.000+02:00",commits:377,repos:75,months:[{name:"Jan",commits:31},{name:"Feb",commits:27},{name:"Mar",commits:78},{name:"Apr",commits:29},{name:"May",commits:17},{name:"Jun",commits:13},{name:"Jul",commits:8},{name:"Aug",commits:8},{name:"Sep",commits:10},{name:"Oct",commits:122},{name:"Nov",commits:22},{name:"Dec",commits:12}]},2019:{first:"2019-09-12T12:32:51.000+02:00",latest:"2019-01-04T11:49:44.000+01:00",commits:285,repos:6,months:[{name:"Jan",commits:25},{name:"Feb",commits:33},{name:"Mar",commits:28},{name:"Apr",commits:31},{name:"May",commits:27},{name:"Jun",commits:14},{name:"Jul",commits:24},{name:"Aug",commits:21},{name:"Sep",commits:21},{name:"Oct",commits:26},{name:"Nov",commits:17},{name:"Dec",commits:18}]},2020:{first:"2020-11-04T12:23:55.000+01:00",latest:"2020-10-09T16:58:47.000+02:00",commits:241,repos:14,months:[{name:"Jan",commits:18},{name:"Feb",commits:15},{name:"Mar",commits:26},{name:"Apr",commits:23},{name:"May",commits:30},{name:"Jun",commits:30},{name:"Jul",commits:19},{name:"Aug",commits:20},{name:"Sep",commits:23},{name:"Oct",commits:27},{name:"Nov",commits:7},{name:"Dec",commits:3}]},2021:{first:"2021-03-20T00:09:41.000+01:00",latest:"2021-03-19T16:55:06.000+01:00",commits:320,repos:35,months:[{name:"Feb",commits:12},{name:"Mar",commits:191},{name:"Apr",commits:15},{name:"May",commits:10},{name:"Jun",commits:3},{name:"Jul",commits:7},{name:"Aug",commits:5},{name:"Sep",commits:17},{name:"Oct",commits:24},{name:"Nov",commits:16},{name:"Dec",commits:20}]},2022:{first:"2022-09-26T22:39:49.000+02:00",latest:"2022-03-17T17:22:49.000+01:00",commits:168,repos:14,months:[{name:"Jan",commits:31},{name:"Feb",commits:26},{name:"Mar",commits:33},{name:"Apr",commits:9},{name:"May",commits:14},{name:"Jun",commits:8},{name:"Jul",commits:15},{name:"Aug",commits:2},{name:"Sep",commits:9},{name:"Oct",commits:8},{name:"Nov",commits:13}]},2023:{first:"2023-04-03T22:03:50.000+02:00",latest:"2023-10-30T18:19:21.000+01:00",commits:493,repos:20,months:[{name:"Jan",commits:9},{name:"Feb",commits:9},{name:"Mar",commits:10},{name:"Apr",commits:14},{name:"May",commits:23},{name:"Jun",commits:23},{name:"Jul",commits:43},{name:"Aug",commits:89},{name:"Sep",commits:47},{name:"Oct",commits:82},{name:"Nov",commits:98},{name:"Dec",commits:46}]},2024:{first:"2024-12-20T17:04:32.000+01:00",latest:"2024-12-20T14:56:10.000+01:00",commits:810,repos:17,months:[{name:"Jan",commits:96},{name:"Feb",commits:107},{name:"Mar",commits:135},{name:"Apr",commits:137},{name:"May",commits:16},{name:"Jun",commits:36},{name:"Jul",commits:58},{name:"Aug",commits:36},{name:"Sep",commits:35},{name:"Oct",commits:52},{name:"Nov",commits:59},{name:"Dec",commits:43}]},all:{first:"2024-12-20T17:04:32.000+01:00",latest:"2024-12-20T14:56:10.000+01:00",commits:3092,repos:145,months:[{name:"Jan",commits:267},{name:"Feb",commits:283},{name:"Mar",commits:549},{name:"Apr",commits:292},{name:"May",commits:154},{name:"Jun",commits:136},{name:"Jul",commits:190},{name:"Aug",commits:192},{name:"Sep",commits:183},{name:"Oct",commits:365},{name:"Nov",commits:249},{name:"Dec",commits:232}]}}},8809:function(e,s,t){"use strict";var n=t(7294);s.Z=function(){var e=(0,n.useState)(!1),s=e[0],t=e[1];return(0,n.useEffect)((function(){t(!0)}),[]),s}},1995:function(e,s,t){"use strict";t.r(s),t.d(s,{__N_SSG:function(){return F},default:function(){return S}});var n=t(5893),a=t(7771),m=t(80),i=t(2362),r=t(7294),o=t(8764),c=t.n(o),l=t(9009),d=t(8935),u=t(4195),h=t(3023),p=t(5358),j=t(6050),x=t(3558),f=t(8242),v=t(8809);function g(e){var s=e.data;return(0,v.Z)()?(0,n.jsx)(l.h,{minWidth:280,height:"80%",minHeight:300,children:(0,n.jsxs)(d.v,{data:s,margin:{top:5,right:10,left:-20,bottom:5},children:[(0,n.jsx)(u.q,{strokeDasharray:"3 3"}),(0,n.jsx)(h.K,{dataKey:"name"}),(0,n.jsx)(p.B,{}),(0,n.jsx)(j.u,{}),(0,n.jsx)(x.D,{}),(0,n.jsx)(f.$,{dataKey:"commits",fill:"#4db6ac"})]})}):(0,n.jsx)("p",{children:(0,n.jsx)("i",{children:"JavaScript is needed for graph to show"})})}function b(e){var s=e.number,t=(0,v.Z)(),a=(0,r.useState)(0),m=a[0],i=a[1];return(0,r.useEffect)((function(){var e=0,t=s/62.5,n=function(){(e+=t)0&&void 0!==arguments[0]?arguments[0]:.1,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,t=(0,r.useState)({}),n=t[0],a=t[1],m=(0,r.useRef)({});return(0,r.useEffect)((function(){var t=new IntersectionObserver((function(e){e.forEach((function(e){e.isIntersecting&&(setTimeout((function(){a((function(s){return(0,M.Z)((0,D.Z)({},s),(0,k.Z)({},e.target.id,!0))}))}),s),t.unobserve(e.target))}))}),{threshold:e});return Object.values(m.current).forEach((function(e){e&&t.observe(e)})),function(){Object.values(m.current).forEach((function(e){e&&t.unobserve(e)}))}}),[e,s]),{isVisible:n,refs:m}},F=!0;function S(e){var s=e.title,t=e.description,r=e.projects,o=e.posts,c=A(),l=c.isVisible,d=c.refs;return(0,n.jsxs)(w.Z,{title:s,description:t,children:[(0,n.jsx)("section",{id:"splash",className:"splash",children:(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"container","data-aos":"fade-up",children:(0,n.jsxs)("div",{className:"t-center",children:[(0,n.jsx)("h1",{children:"R\xe9my Beumier"}),(0,n.jsx)("p",{children:"Front-end Dev"}),(0,n.jsx)(J,{})]})})})}),(0,n.jsxs)("section",{id:"about",className:"about svg-divider",children:[(0,n.jsx)("div",{className:"home-shapes"}),(0,n.jsx)("div",{className:"container","data-aos":"fade-right",children:(0,n.jsxs)("div",{className:"cols cols-lg",children:[(0,n.jsxs)("div",{className:"col",children:[(0,n.jsx)("h2",{children:"I'm R\xe9my, a Web Lover based in Brussels, specialising in Web & Software Development."}),(0,n.jsxs)("p",{children:["From a young age, I\u2019ve always loved building things. My passion for ",(0,n.jsx)("strong",{children:"creation"})," began with Lego, grew with Minecraft, and ultimately led me to discover ",(0,n.jsx)("strong",{children:"web development"}),"."]}),(0,n.jsxs)("p",{children:["Over the years, my journey has been about mastering foundational ",(0,n.jsx)("strong",{children:"web technologies"})," and continuously evolving in technical, communicational, and organisational skills."]}),(0,n.jsxs)("p",{children:["I\u2019ve thrived in team-driven environments, leveraging industry-standard tools for"," ",(0,n.jsx)("strong",{children:"front-end"})," development, ",(0,n.jsx)("strong",{children:"version control"}),", workflow optimisation, design, and ",(0,n.jsx)("strong",{children:"project collaboration"}),"."]}),(0,n.jsxs)("p",{className:"mb-5",children:["React is at the core of my development work, complemented by modern front-end libraries,"," ",(0,n.jsx)("strong",{children:"cloud-based services"}),", advanced ",(0,n.jsx)("strong",{children:"styling"})," techniques, and a small but expanding focus on ",(0,n.jsx)("strong",{children:"back-end"})," development."]}),(0,n.jsxs)(_.Z,{href:"/resume-remy-beumier",target:"_blank",className:"btn mb-4 mr-4",children:["Check out my resume",(0,n.jsx)(a.rYR,{className:"ml-1"})]}),(0,n.jsxs)("a",{className:"btn mb-4",href:"remy-beumier-resume.pdf",target:"_blank",download:!0,children:["Download my resume",(0,n.jsx)(m.tEr,{className:"ml-1"})]})]}),(0,n.jsxs)("div",{className:"col centered-v",children:[(0,n.jsx)("img",{src:"/images/developer-thinking.svg",alt:"developer thinking next to a computer",width:"270",height:"112",loading:"lazy",className:"about__img mt-5 mb-5"}),(0,n.jsx)("div",{className:"about__languages my-2 mx-2",children:["react","typescript","firebase","node.js","javascript","css"].map((function(e){return(0,n.jsx)(_.Z,{href:"/projects?tech=".concat(e),children:(0,n.jsx)(T.Z,{name:e,color:!0})},e)}))})]})]})})]}),(0,n.jsx)("section",{id:"projects",className:"pattern",children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-left",children:[(0,n.jsx)("h2",{children:"Projects"}),(0,n.jsx)("p",{children:"I create projects both professionally and for fun. Here are some of my favourites."}),(0,n.jsx)(i.Z,{data:r.filter((function(e){return e.homepage})).slice(0,3),className:"mt-10 mb-10"}),(0,n.jsx)("div",{className:"btn-wrapper-right",children:(0,n.jsxs)(_.Z,{href:"/projects",className:"btn",children:["Check all projects",(0,n.jsx)(a.rYR,{className:"ml-1"})]})})]})}),(0,n.jsx)("section",{id:"blog",className:"alt",children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-right",children:[(0,n.jsx)("h2",{children:"Blog"}),(0,n.jsx)("p",{children:"I occasionally write articles about coding and the web. Here are my latest posts."}),(0,n.jsx)(i.Z,{data:o.slice(0,3),className:"mt-10 mb-10"}),(0,n.jsx)("div",{className:"btn-wrapper-right",children:(0,n.jsxs)(_.Z,{href:"/blog",className:"btn",children:["Check all posts",(0,n.jsx)(a.rYR,{className:"ml-1"})]})})]})}),(0,n.jsx)("section",{id:"data",className:"data",ref:function(e){return d.current.data=e},children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-left",children:[(0,n.jsx)("h2",{children:"Data"}),(0,n.jsx)("p",{children:"Here is a detailed overview of my coding activity, made of various commit statistics on Github."}),(0,n.jsx)(y,{isVisible:l})]})})]})}}},function(e){e.O(0,[838,151,365,594,805,540,501,774,888,179],(function(){return s=8312,e(e.s=s);var s}));var s=e.O();_N_E=s}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{8312:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(1995)}])},8764:function(e){"use strict";e.exports={2016:{first:"2016-12-06T17:05:37.000+01:00",latest:"2016-12-31T15:47:31.000+01:00",commits:61,repos:2,months:[{name:"Dec",commits:61}]},2017:{first:"2017-01-01T18:13:15.000+01:00",latest:"2017-12-31T11:17:24.000+01:00",commits:337,repos:4,months:[{name:"Jan",commits:57},{name:"Feb",commits:54},{name:"Mar",commits:48},{name:"Apr",commits:34},{name:"May",commits:17},{name:"Jun",commits:9},{name:"Jul",commits:16},{name:"Aug",commits:11},{name:"Sep",commits:21},{name:"Oct",commits:24},{name:"Nov",commits:17},{name:"Dec",commits:29}]},2018:{first:"2018-01-02T23:17:16.000+01:00",latest:"2018-12-28T18:35:08.000+01:00",commits:377,repos:75,months:[{name:"Jan",commits:31},{name:"Feb",commits:27},{name:"Mar",commits:78},{name:"Apr",commits:29},{name:"May",commits:17},{name:"Jun",commits:13},{name:"Jul",commits:8},{name:"Aug",commits:8},{name:"Sep",commits:10},{name:"Oct",commits:122},{name:"Nov",commits:22},{name:"Dec",commits:12}]},2019:{first:"2019-01-02T10:54:56.000+01:00",latest:"2019-12-26T17:41:02.000+01:00",commits:285,repos:6,months:[{name:"Jan",commits:25},{name:"Feb",commits:33},{name:"Mar",commits:28},{name:"Apr",commits:31},{name:"May",commits:27},{name:"Jun",commits:14},{name:"Jul",commits:24},{name:"Aug",commits:21},{name:"Sep",commits:21},{name:"Oct",commits:26},{name:"Nov",commits:17},{name:"Dec",commits:18}]},2020:{first:"2020-01-02T09:42:00.000+01:00",latest:"2020-12-09T09:52:49.000+01:00",commits:241,repos:14,months:[{name:"Jan",commits:18},{name:"Feb",commits:15},{name:"Mar",commits:26},{name:"Apr",commits:23},{name:"May",commits:30},{name:"Jun",commits:30},{name:"Jul",commits:19},{name:"Aug",commits:20},{name:"Sep",commits:23},{name:"Oct",commits:27},{name:"Nov",commits:7},{name:"Dec",commits:3}]},2021:{first:"2021-02-03T11:07:43.000+01:00",latest:"2021-12-30T13:27:21.000+01:00",commits:320,repos:35,months:[{name:"Feb",commits:12},{name:"Mar",commits:191},{name:"Apr",commits:15},{name:"May",commits:10},{name:"Jun",commits:3},{name:"Jul",commits:7},{name:"Aug",commits:5},{name:"Sep",commits:17},{name:"Oct",commits:24},{name:"Nov",commits:16},{name:"Dec",commits:20}]},2022:{first:"2022-01-03T11:34:22.000+01:00",latest:"2022-11-29T21:06:09.000+01:00",commits:168,repos:14,months:[{name:"Jan",commits:31},{name:"Feb",commits:26},{name:"Mar",commits:33},{name:"Apr",commits:9},{name:"May",commits:14},{name:"Jun",commits:8},{name:"Jul",commits:15},{name:"Aug",commits:2},{name:"Sep",commits:9},{name:"Oct",commits:8},{name:"Nov",commits:13}]},2023:{first:"2023-01-02T16:50:06.000+01:00",latest:"2023-12-25T10:33:55.000+01:00",commits:493,repos:20,months:[{name:"Jan",commits:9},{name:"Feb",commits:9},{name:"Mar",commits:10},{name:"Apr",commits:14},{name:"May",commits:23},{name:"Jun",commits:23},{name:"Jul",commits:43},{name:"Aug",commits:89},{name:"Sep",commits:47},{name:"Oct",commits:82},{name:"Nov",commits:98},{name:"Dec",commits:46}]},2024:{first:"2024-01-02T16:49:33.000+01:00",latest:"2024-12-22T16:12:31.000+01:00",commits:812,repos:17,months:[{name:"Jan",commits:96},{name:"Feb",commits:107},{name:"Mar",commits:135},{name:"Apr",commits:137},{name:"May",commits:16},{name:"Jun",commits:36},{name:"Jul",commits:58},{name:"Aug",commits:36},{name:"Sep",commits:35},{name:"Oct",commits:52},{name:"Nov",commits:59},{name:"Dec",commits:45}]},all:{first:"2016-12-06T17:05:37.000+01:00",latest:"2024-12-22T16:12:31.000+01:00",commits:3094,repos:145,months:[{name:"Jan",commits:267},{name:"Feb",commits:283},{name:"Mar",commits:549},{name:"Apr",commits:292},{name:"May",commits:154},{name:"Jun",commits:136},{name:"Jul",commits:190},{name:"Aug",commits:192},{name:"Sep",commits:183},{name:"Oct",commits:365},{name:"Nov",commits:249},{name:"Dec",commits:234}]}}},8809:function(e,s,t){"use strict";var n=t(7294);s.Z=function(){var e=(0,n.useState)(!1),s=e[0],t=e[1];return(0,n.useEffect)((function(){t(!0)}),[]),s}},1995:function(e,s,t){"use strict";t.r(s),t.d(s,{__N_SSG:function(){return F},default:function(){return S}});var n=t(5893),a=t(7771),m=t(80),i=t(2362),r=t(7294),o=t(8764),c=t.n(o),l=t(9009),d=t(8935),u=t(4195),h=t(3023),p=t(5358),j=t(6050),x=t(3558),f=t(8242),v=t(8809);function g(e){var s=e.data;return(0,v.Z)()?(0,n.jsx)(l.h,{minWidth:280,height:"80%",minHeight:300,children:(0,n.jsxs)(d.v,{data:s,margin:{top:5,right:10,left:-20,bottom:5},children:[(0,n.jsx)(u.q,{strokeDasharray:"3 3"}),(0,n.jsx)(h.K,{dataKey:"name"}),(0,n.jsx)(p.B,{}),(0,n.jsx)(j.u,{}),(0,n.jsx)(x.D,{}),(0,n.jsx)(f.$,{dataKey:"commits",fill:"#4db6ac"})]})}):(0,n.jsx)("p",{children:(0,n.jsx)("i",{children:"JavaScript is needed for graph to show"})})}function b(e){var s=e.number,t=(0,v.Z)(),a=(0,r.useState)(0),m=a[0],i=a[1];return(0,r.useEffect)((function(){var e=0,t=s/62.5,n=function(){(e+=t)0&&void 0!==arguments[0]?arguments[0]:.1,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,t=(0,r.useState)({}),n=t[0],a=t[1],m=(0,r.useRef)({});return(0,r.useEffect)((function(){var t=new IntersectionObserver((function(e){e.forEach((function(e){e.isIntersecting&&(setTimeout((function(){a((function(s){return(0,M.Z)((0,D.Z)({},s),(0,k.Z)({},e.target.id,!0))}))}),s),t.unobserve(e.target))}))}),{threshold:e});return Object.values(m.current).forEach((function(e){e&&t.observe(e)})),function(){Object.values(m.current).forEach((function(e){e&&t.unobserve(e)}))}}),[e,s]),{isVisible:n,refs:m}},F=!0;function S(e){var s=e.title,t=e.description,r=e.projects,o=e.posts,c=A(),l=c.isVisible,d=c.refs;return(0,n.jsxs)(w.Z,{title:s,description:t,children:[(0,n.jsx)("section",{id:"splash",className:"splash",children:(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"container","data-aos":"fade-up",children:(0,n.jsxs)("div",{className:"t-center",children:[(0,n.jsx)("h1",{children:"R\xe9my Beumier"}),(0,n.jsx)("p",{children:"Front-end Dev"}),(0,n.jsx)(J,{})]})})})}),(0,n.jsxs)("section",{id:"about",className:"about svg-divider",children:[(0,n.jsx)("div",{className:"home-shapes"}),(0,n.jsx)("div",{className:"container","data-aos":"fade-right",children:(0,n.jsxs)("div",{className:"cols cols-lg",children:[(0,n.jsxs)("div",{className:"col",children:[(0,n.jsx)("h2",{children:"I'm R\xe9my, a Web Lover based in Brussels, specialising in Web & Software Development."}),(0,n.jsxs)("p",{children:["From a young age, I\u2019ve always loved building things. My passion for ",(0,n.jsx)("strong",{children:"creation"})," began with Lego, grew with Minecraft, and ultimately led me to discover ",(0,n.jsx)("strong",{children:"web development"}),"."]}),(0,n.jsxs)("p",{children:["Over the years, my journey has been about mastering foundational ",(0,n.jsx)("strong",{children:"web technologies"})," and continuously evolving in technical, communicational, and organisational skills."]}),(0,n.jsxs)("p",{children:["I\u2019ve thrived in team-driven environments, leveraging industry-standard tools for"," ",(0,n.jsx)("strong",{children:"front-end"})," development, ",(0,n.jsx)("strong",{children:"version control"}),", workflow optimisation, design, and ",(0,n.jsx)("strong",{children:"project collaboration"}),"."]}),(0,n.jsxs)("p",{className:"mb-5",children:["React is at the core of my development work, complemented by modern front-end libraries,"," ",(0,n.jsx)("strong",{children:"cloud-based services"}),", advanced ",(0,n.jsx)("strong",{children:"styling"})," techniques, and a small but expanding focus on ",(0,n.jsx)("strong",{children:"back-end"})," development."]}),(0,n.jsxs)(_.Z,{href:"/resume-remy-beumier",target:"_blank",className:"btn mb-4 mr-4",children:["Check out my resume",(0,n.jsx)(a.rYR,{className:"ml-1"})]}),(0,n.jsxs)("a",{className:"btn mb-4",href:"remy-beumier-resume.pdf",target:"_blank",download:!0,children:["Download my resume",(0,n.jsx)(m.tEr,{className:"ml-1"})]})]}),(0,n.jsxs)("div",{className:"col centered-v",children:[(0,n.jsx)("img",{src:"/images/developer-thinking.svg",alt:"developer thinking next to a computer",width:"270",height:"112",loading:"lazy",className:"about__img mt-5 mb-5"}),(0,n.jsx)("div",{className:"about__languages my-2 mx-2",children:["react","typescript","firebase","node.js","javascript","css"].map((function(e){return(0,n.jsx)(_.Z,{href:"/projects?tech=".concat(e),children:(0,n.jsx)(T.Z,{name:e,color:!0})},e)}))})]})]})})]}),(0,n.jsx)("section",{id:"projects",className:"pattern",children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-left",children:[(0,n.jsx)("h2",{children:"Projects"}),(0,n.jsx)("p",{children:"I create projects both professionally and for fun. Here are some of my favourites."}),(0,n.jsx)(i.Z,{data:r.filter((function(e){return e.homepage})).slice(0,3),className:"mt-10 mb-10"}),(0,n.jsx)("div",{className:"btn-wrapper-right",children:(0,n.jsxs)(_.Z,{href:"/projects",className:"btn",children:["Check all projects",(0,n.jsx)(a.rYR,{className:"ml-1"})]})})]})}),(0,n.jsx)("section",{id:"blog",className:"alt",children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-right",children:[(0,n.jsx)("h2",{children:"Blog"}),(0,n.jsx)("p",{children:"I occasionally write articles about coding and the web. Here are my latest posts."}),(0,n.jsx)(i.Z,{data:o.slice(0,3),className:"mt-10 mb-10"}),(0,n.jsx)("div",{className:"btn-wrapper-right",children:(0,n.jsxs)(_.Z,{href:"/blog",className:"btn",children:["Check all posts",(0,n.jsx)(a.rYR,{className:"ml-1"})]})})]})}),(0,n.jsx)("section",{id:"data",className:"data",ref:function(e){return d.current.data=e},children:(0,n.jsxs)("div",{className:"container","data-aos":"fade-left",children:[(0,n.jsx)("h2",{children:"Data"}),(0,n.jsx)("p",{children:"Here is a detailed overview of my coding activity, made of various commit statistics on Github."}),(0,n.jsx)(y,{isVisible:l})]})})]})}}},function(e){e.O(0,[838,151,365,594,805,540,501,774,888,179],(function(){return s=8312,e(e.s=s);var s}));var s=e.O();_N_E=s}]); \ No newline at end of file diff --git a/blog.html b/blog.html index b88fd87..11c11a4 100644 --- a/blog.html +++ b/blog.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Blog

I write blog articles I wish I could have come across while building and enhancing this website. They aim to cover topics like React and Next.js, but are not limited to those.

JavaScript is needed for filters to show

Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +
ProjectsBlogResume

Blog

I write blog articles I wish I could have come across while building and enhancing this website. They aim to cover topics like React and Next.js, but are not limited to those.

JavaScript is needed for filters to show

Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/change-nextjs-error-pages.html b/blog/change-nextjs-error-pages.html index 075a38a..a4fc7be 100644 --- a/blog/change-nextjs-error-pages.html +++ b/blog/change-nextjs-error-pages.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Change Next.js error pages

Change Next.js error pages
Next.jsTutorial

Next.js handles many aspects of our website out of the box but, sometimes we want to go a step extra and change what they decided. One of those times was to change the default error pages to have something in line with the whole website. Let's see how we can make those pages our playing ground!

+
ProjectsBlogResume

Change Next.js error pages

Change Next.js error pages
Next.jsTutorial

Next.js handles many aspects of our website out of the box but, sometimes we want to go a step extra and change what they decided. One of those times was to change the default error pages to have something in line with the whole website. Let's see how we can make those pages our playing ground!

Error 404 page

Modifying the error 404 page is one step that we can't overlook. Every wrong or dead link will point to that page and we must take that to our advantage. It's as simple as creating 404.js in the pages folder.

export default function Custom404() {
@@ -31,4 +31,4 @@ 
Create the _error.js page

From there, we are now able to modify the wording on these pages, but not only. Almost everything that you can do with Next.js you, can do in this custom error page. Styling, adding components, and much more.

Sadly, as pointed in the official Next.js documentation, _error.js does not currently support Next.js Data Fetching methods like getStaticProps or getServerSideProps.

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/css-only-accordion.html b/blog/css-only-accordion.html index e436d40..866589d 100644 --- a/blog/css-only-accordion.html +++ b/blog/css-only-accordion.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

CSS only accordion

CSS only accordion
CssTutorial

Accordions can be a great way to display a lot of information in a small amount of space and can be a great addition to any website or web application. We will be using the details and summary HTML elements as a starting point.

+
ProjectsBlogResume

CSS only accordion

CSS only accordion
CssTutorial

Accordions can be a great way to display a lot of information in a small amount of space and can be a great addition to any website or web application. We will be using the details and summary HTML elements as a starting point.

This will allow us to not use any JavaScript and to focus on a CSS only approach to land a great design. This article piece is therefore in line with the following articles: a Navbar that works without any JS, a switch toggle button with no script and a simple CSS modal.

As you already understood, in this tutorial, we will be building an accordion component using only CSS. Let's dive into it with accessibility in mind and ensuring a correct cross-browser compatibility.

Start from the details and summary elements

@@ -86,4 +86,4 @@

Completed accordion look

We did it! A fully accessible, well-designed and smooth accordion. You probably observed the use of rem, meaning our component will follow the html element font-size.

TLDR: See the finalised code for this CSS only accordion on Codepen. You can take any level of inspiration from this and use it in your future developments.

-

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/css-only-modal.html b/blog/css-only-modal.html index 5d6084a..412ba41 100644 --- a/blog/css-only-modal.html +++ b/blog/css-only-modal.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

CSS only modal

CSS only modal
CssTutorial

Modals are really useful on websites and applications to give feedback to users or to ask for confirmation. They are often used to display additional content or to request user input. In this tutorial, we will be building a modal component using only CSS. Let's dive into it with accessibility in mind and ensuring correct cross-browser compatibility.

+
ProjectsBlogResume

CSS only modal

CSS only modal
CssTutorial

Modals are really useful on websites and applications to give feedback to users or to ask for confirmation. They are often used to display additional content or to request user input. In this tutorial, we will be building a modal component using only CSS. Let's dive into it with accessibility in mind and ensuring correct cross-browser compatibility.

We will avoid any JavaScript by relying on anchor links and the :target pseudo-class. This will allow us to create a modal that can be opened and closed by clicking on a link. The modal will be displayed in the center of the screen and will have a close button to dismiss it.

This article piece is in line with the following articles: a Navbar that works without any JS, a switch toggle button with no script and a simple CSS accordion.

Start from the anchor link and the target pseudo-class

@@ -107,4 +107,4 @@

Completed modal look

We did it! A fully accessible, well-designed and smooth modal. You probably observed the use of rem, meaning our component will follow the html element font-size.

TLDR: See the finalised code for this CSS only modal on Codepen. You can take any level of inspiration from this and use it in your future developments.

-

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/css-only-responsive-navbar.html b/blog/css-only-responsive-navbar.html index 2398d3b..9ad729e 100644 --- a/blog/css-only-responsive-navbar.html +++ b/blog/css-only-responsive-navbar.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

CSS only responsive Navbar

CSS only responsive Navbar
CssTutorial

I do more and more JavaScript because of the usual requirements in projects, but I will always love a useful, adaptable and cross-browser working CSS trick.

+
ProjectsBlogResume

CSS only responsive Navbar

CSS only responsive Navbar
CssTutorial

I do more and more JavaScript because of the usual requirements in projects, but I will always love a useful, adaptable and cross-browser working CSS trick.

I recently had to build an advanced header navigation and for some reasons it was easier not to use any JavaScript for this. Even though I knew for sure I could handle big screen layout and transitions with CSS only, I thought complexity would come with smaller devices and thus organizing the links differently.

I also wanted a single navigation in HTML to avoid duplication of code and a fair level of browser compatibility (by fair I mean no IE).

Without further ado, let's dive into a working solution for our case with a first step into the HTML. It's kept dead simple, except for the checkbox that we will understand later.

@@ -210,4 +210,4 @@

Big screens header styling

Final navigation result

TLDR: Find the complete solution for this Responsive CSS only navigation bar using a burger menu on Codepen. Feel free to take inspiration from it and adapt it to your exact need.

-

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/css-only-toggle-switch-button.html b/blog/css-only-toggle-switch-button.html index 808c861..0a9c82a 100644 --- a/blog/css-only-toggle-switch-button.html +++ b/blog/css-only-toggle-switch-button.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

CSS only toggle switch button

CSS only toggle switch button
CssTutorial

The trend seems to be working with JavaScript more and more and to dislike CSS. However, as stated in a previous post about a Navbar that works without any JS, I really love building components with CSS only.

+
ProjectsBlogResume

CSS only toggle switch button

CSS only toggle switch button
CssTutorial

The trend seems to be working with JavaScript more and more and to dislike CSS. However, as stated in a previous post about a Navbar that works without any JS, I really love building components with CSS only.

In a recent project I had to build an entire component library, and since I spent quite some time on a few components to match the designs that were sometimes challenging, I will share the most interesting ones in a series of blog posts.

This piece will be about the widely used toggle switch form element. I think it could come from the browsers in the future with a proper HTML tag, but I didn't see anything communicated in that way, in the meantime let's develop it! As for other CSS components, I aim a fair level of browser compatibility and accessibility.

Start from the checkbox element

@@ -116,4 +116,4 @@

Final switch look and feel

We made it! An accessible, good-looking and working switch toggle button. You may have noticed that it's also using rem which means it will adapt with the font-size of the html element.

TLDR: Find the complete solution for this CSS only toggle switch button on Codepen. Please be at peace taking inspiration from it and integrate it in your next project.

-

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with CSS!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/fix-the-window-is-not-defined-error.html b/blog/fix-the-window-is-not-defined-error.html index cd26db2..23c8a5c 100644 --- a/blog/fix-the-window-is-not-defined-error.html +++ b/blog/fix-the-window-is-not-defined-error.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume
  • Home
  • blog
  • fix the window is not defined error

Fix the Window is not defined error

Fix the Window is not defined error
Next.jsTutorial

Next.js is very useful in many aspects, but nothing is perfect. One difficult point is the use of the window object. It is used in many libraries and tools such as analytics and, because Next.js uses pre-rendering, the window may be undefined and may therefore break our site.

+
ProjectsBlogResume
  • Home
  • blog
  • fix the window is not defined error

Fix the Window is not defined error

Fix the Window is not defined error
Next.jsTutorial

Next.js is very useful in many aspects, but nothing is perfect. One difficult point is the use of the window object. It is used in many libraries and tools such as analytics and, because Next.js uses pre-rendering, the window may be undefined and may therefore break our site.

Wait for window to be ready

This is the usual fix we find for this issue. Somehow it was never the fitting solution in my projects, but I still try it every time.

if (typeof window !== 'undefined') {
@@ -17,4 +17,4 @@ 
With useEffect

 }, []);

For a working example, check this article on dark mode.

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/generate-a-sitemap-in-nextjs.html b/blog/generate-a-sitemap-in-nextjs.html index a0c8d1c..424d796 100644 --- a/blog/generate-a-sitemap-in-nextjs.html +++ b/blog/generate-a-sitemap-in-nextjs.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Generate a sitemap in Next.js

Generate a sitemap in Next.js
Next.jsTutorial

Sitemaps are important for web crawlers such as google bots, and therefore we need one to improve our site's SEO.

+
ProjectsBlogResume

Generate a sitemap in Next.js

Generate a sitemap in Next.js
Next.jsTutorial

Sitemaps are important for web crawlers such as google bots, and therefore we need one to improve our site's SEO.

Sadly, Next.js does not provide a go-to option regarding sitemap and I find the external libraries too limited. I tested nextjs-sitemap-generator, but I couldn't make it define the lastmod or changefreq with precision.

I decided to create something custom and firstly tried to make something with a sitemap.xml.js page. It wasn't a success because I couldn't make it an .xml file.

I went a different way and built a .mjs file with the purpose of creating my sitemap.xml. It uses Node's file creation, Globby to crawl files and Prettier to format it.

@@ -169,4 +169,4 @@

Improve the logic based on your needs

TLDR: Codesandbox: Custom sitemap in Next.js.

Would you improve this code or do it in another way? Don't hesitate to share your ideas!

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/get-web-analytics-in-nextjs-with-goatcounter.html b/blog/get-web-analytics-in-nextjs-with-goatcounter.html index 69cf5ff..09274bb 100644 --- a/blog/get-web-analytics-in-nextjs-with-goatcounter.html +++ b/blog/get-web-analytics-in-nextjs-with-goatcounter.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume
  • Home
  • blog
  • get web analytics in nextjs with goatcounter

Get web analytics in Next.js with Goatcounter

Get web analytics in Next.js with Goatcounter
Next.jsTutorialAnalytics

Next.js is more and more complete with the years and it adds features every other month. One feature that we want for our websites is analytics. Vercel, the company behind Next.js provides an analytics tool that seems very complete as long as we decide to host our site on their platform. But what are the options for those of us not willing to host on that site?

+
ProjectsBlogResume
  • Home
  • blog
  • get web analytics in nextjs with goatcounter

Get web analytics in Next.js with Goatcounter

Get web analytics in Next.js with Goatcounter
Next.jsTutorialAnalytics

Next.js is more and more complete with the years and it adds features every other month. One feature that we want for our websites is analytics. Vercel, the company behind Next.js provides an analytics tool that seems very complete as long as we decide to host our site on their platform. But what are the options for those of us not willing to host on that site?

Of course, Google is one of the many options, but as I was searching I realised I could use a less famous approach that doesn't track visitor's personal data and which is very lightweight.

That solution is called GoatCounter. It is an open source web analytics platform aiming to offer easy to use and meaningful privacy-friendly web analytics.

@@ -76,4 +76,4 @@

3. Add the GoatCounter logic

Keep in mind that ad blockers may interfere with GoatCounter

I'm personally very satisfied so far with the service, as it allows me to check my site's web analytics respecting visitor's privacy with a very light script.

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/markdown-tutorial.html b/blog/markdown-tutorial.html index e121f1e..fda0f6e 100644 --- a/blog/markdown-tutorial.html +++ b/blog/markdown-tutorial.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Markdown Tutorial

Markdown Tutorial
Tutorial

Markdown is a simple but widely used language, especially for documentation.

+
ProjectsBlogResume

Markdown Tutorial

Markdown Tutorial
Tutorial

Markdown is a simple but widely used language, especially for documentation.

Every section has the syntax first and the rendered example right after.

Let's see how we can write with it!

Text

@@ -87,4 +87,4 @@

Table

| row2 col1 | row2 col2 |

As you can see it's not difficult and it's rather easy to remember.

-

Enjoy writing with Markdown!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy writing with Markdown!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/nextjs-dark-mode.html b/blog/nextjs-dark-mode.html index e00edf3..df3d49a 100644 --- a/blog/nextjs-dark-mode.html +++ b/blog/nextjs-dark-mode.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Next.js dark mode

Next.js dark mode
Next.jsTutorial

When I started listing the features I wanted for my new website, a dark mode toggle was in the top tier list as it's becoming a standard. Even though I'm not a big supporter of dark mode, I know people love it and I was willing to tackle this challenge.

+
ProjectsBlogResume

Next.js dark mode

Next.js dark mode
Next.jsTutorial

When I started listing the features I wanted for my new website, a dark mode toggle was in the top tier list as it's becoming a standard. Even though I'm not a big supporter of dark mode, I know people love it and I was willing to tackle this challenge.

The CSS part

For this feature, we want to use CSS variables. We have a range of variables that will switch according to the color mode. Here is a snippet example:

@@ -98,4 +98,4 @@

The JavaScript and Next.js part

I really wanted to share my solution for this, as I found it particularly difficult to make it run, especially with the localStorage. I hope it will make your coding easier.

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/set-nextjs-lang.html b/blog/set-nextjs-lang.html index f9479c9..e543456 100644 --- a/blog/set-nextjs-lang.html +++ b/blog/set-nextjs-lang.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Set Next.js lang

Set Next.js lang
Next.jsTutorial

It is advised and a good practice to define the language of a site. It's very straightforward in plain HTML, but it isn't so intuitive in Next.js. Let's see how we can do it.

+
ProjectsBlogResume

Set Next.js lang

Set Next.js lang
Next.jsTutorial

It is advised and a good practice to define the language of a site. It's very straightforward in plain HTML, but it isn't so intuitive in Next.js. Let's see how we can do it.

Static Site Generation

In Next.js, if we want to modify the <head> we import Head from next/Head, but what if we want to pass a property to the <html> tag? Next provides an option to add another JS file — in the pages folder — called _document.js allowing us to be in control of the upper HTML.

Here is the default content of it:

@@ -38,4 +38,4 @@

Server Side Rendering

};

Note this solution only works in Next.js version 10 and newer.

-

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file +

Enjoy coding with Next.js!

Back to blog listing
Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
\ No newline at end of file diff --git a/blog/set-up-eslint-into-nextjs.html b/blog/set-up-eslint-into-nextjs.html index 0dc6532..b374c7b 100644 --- a/blog/set-up-eslint-into-nextjs.html +++ b/blog/set-up-eslint-into-nextjs.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
ProjectsBlogResume

Set up ESLint into Next.js

Set up ESLint into Next.js
Next.jsTutorial

Linters are so useful that when we end up in a project without one, we are totally frustrated. +

ProjectsBlogResume

Set up ESLint into Next.js

Set up ESLint into Next.js
Next.jsTutorial

Linters are so useful that when we end up in a project without one, we are totally frustrated. It happened to me with this very project and we will see how to set up a linter and leverage huge time benefits.

Basic Next.js linter

The default Next.js linter isn't installed automatically, and we get noticed every time we build our application. @@ -76,4 +76,4 @@

Format on save with Prettier

  • Let's save any file to see the magic happen

    • We are all set to code efficiently with the help of linters and formatters.

    -

    Enjoy coding with Next.js!

    Back to blog listing
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +

    Enjoy coding with Next.js!

    Back to blog listing
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/blog/set-up-sass-in-the-best-way.html b/blog/set-up-sass-in-the-best-way.html index ffacdd3..b497878 100644 --- a/blog/set-up-sass-in-the-best-way.html +++ b/blog/set-up-sass-in-the-best-way.html @@ -3,7 +3,7 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Set up Sass in the best way

    Set up Sass in the best way
    SassCssTutorial

    So far in this blog, I have mostly written about Next.js and CSS. Today, I will focus on a topic that I consider to be in between those two. I love CSS very much and there comes a point in a project where I want to abstract, sharpen or simply be able to nest selectors. That's where Sass comes into play. I know there are alternative CSS preprocessors in the likes of Less or Stylus, but I have always used Sass the most.

    +
    ProjectsBlogResume

    Set up Sass in the best way

    Set up Sass in the best way
    SassCssTutorial

    So far in this blog, I have mostly written about Next.js and CSS. Today, I will focus on a topic that I consider to be in between those two. I love CSS very much and there comes a point in a project where I want to abstract, sharpen or simply be able to nest selectors. That's where Sass comes into play. I know there are alternative CSS preprocessors in the likes of Less or Stylus, but I have always used Sass the most.

    Sass (Syntactically Awesome Style Sheets) is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. @@ -93,4 +93,4 @@

    Add autoprefixer

    We have watch that we would use during development to compile on every change in our Sass and we have compile which will be useful for production by compiling and compressing our .scss files while improving cross-browser compatibility.

    TLDR: Codesandbox: Setup Sass in the best way.

    I find Sass really useful and enjoyable, but I often forget how to set it up. I hope this guide will help you leverage the best of CSS by making it more efficient and maintainable.

    -

    Enjoy coding with Sass!

    Back to blog listing
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +

    Enjoy coding with Sass!

    Back to blog listing
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/index.html b/index.html index a7b2247..79d5f09 100644 --- a/index.html +++ b/index.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Rémy Beumier

    Front-end Dev

    I'm Rémy, a Web Lover based in Brussels, specialising in Web & Software Development.

    From a young age, I’ve always loved building things. My passion for creation began with Lego, grew with Minecraft, and ultimately led me to discover web development.

    Over the years, my journey has been about mastering foundational web technologies and continuously evolving in technical, communicational, and organisational skills.

    I’ve thrived in team-driven environments, leveraging industry-standard tools for front-end development, version control, workflow optimisation, design, and project collaboration.

    React is at the core of my development work, complemented by modern front-end libraries, cloud-based services, advanced styling techniques, and a small but expanding focus on back-end development.

    Check out my resumeDownload my resume
    developer thinking next to a computer
    ReactTypescriptFirebaseNode.jsJavaScriptCSS

    Projects

    I create projects both professionally and for fun. Here are some of my favourites.

    Tripser Blog

    Live websiteSite as I left it
    Tripser Blog

    Padel

    Live websiteSite as I left it
    Padel

    Memory

    CodepenGithub
    Memory
    Check all projects

    Blog

    I occasionally write articles about coding and the web. Here are my latest posts.

    CSS only modal

    CSS only modal

    Set up Sass in the best way

    Set up Sass in the best way

    CSS only accordion

    CSS only accordion
    Check all posts

    Data

    Here is a detailed overview of my coding activity, made of various commit statistics on Github.

    0Total commit
    0.0.0
    First commit
    0.0.0
    Latest commit
    0Total Repositories
    Loading...

    Note the results are limited because most of my professional work is not recorded under my Github profile.
    Results are updated monthly.

    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Rémy Beumier

    Front-end Dev

    I'm Rémy, a Web Lover based in Brussels, specialising in Web & Software Development.

    From a young age, I’ve always loved building things. My passion for creation began with Lego, grew with Minecraft, and ultimately led me to discover web development.

    Over the years, my journey has been about mastering foundational web technologies and continuously evolving in technical, communicational, and organisational skills.

    I’ve thrived in team-driven environments, leveraging industry-standard tools for front-end development, version control, workflow optimisation, design, and project collaboration.

    React is at the core of my development work, complemented by modern front-end libraries, cloud-based services, advanced styling techniques, and a small but expanding focus on back-end development.

    Check out my resumeDownload my resume
    developer thinking next to a computer
    ReactTypescriptFirebaseNode.jsJavaScriptCSS

    Projects

    I create projects both professionally and for fun. Here are some of my favourites.

    Tripser Blog

    Live websiteSite as I left it
    Tripser Blog

    Padel

    Live websiteSite as I left it
    Padel

    Memory

    CodepenGithub
    Memory
    Check all projects

    Blog

    I occasionally write articles about coding and the web. Here are my latest posts.

    CSS only modal

    CSS only modal

    Set up Sass in the best way

    Set up Sass in the best way

    CSS only accordion

    CSS only accordion
    Check all posts

    Data

    Here is a detailed overview of my coding activity, made of various commit statistics on Github.

    0Total commit
    0.0.0
    First commit
    0.0.0
    Latest commit
    0Total Repositories
    Loading...

    Note the results are limited because most of my professional work is not recorded under my Github profile.
    Results are updated monthly.

    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects.html b/projects.html index b834fd4..1583681 100644 --- a/projects.html +++ b/projects.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Projects

    This project list is a collection of work I have been able to build over the years. You can find here the codes I am most proud of, whether they are professional or personal.

    JavaScript is needed for filters to show

    Tripser Blog

    Live websiteSite as I left it
    Tripser Blog

    Padel

    Live websiteSite as I left it
    Padel

    Omega

    Live websiteSite as I left it
    Omega

    Onomo

    Live websiteSite as I left it
    Onomo

    Eli Paris

    Live websiteSite as I left it
    Eli Paris

    KPMG Careers

    Live websiteSite as I left it
    KPMG Careers

    KPMG Law

    Live websiteSite as I left it
    KPMG Law

    Shop

    CodesandboxGithub
    Shop

    Memory

    CodepenGithub
    Memory

    Black Jack

    CodepenGithub
    Black Jack

    Movies

    CodesandboxGithub
    Movies

    Recipes

    CodesandboxGithub
    Recipes

    Quiz

    CodesandboxGithub
    Quiz

    Snake

    CodepenGithub
    Snake

    Star Match

    CodepenGithub
    Star Match

    Minesweeper

    CodepenGithub
    Minesweeper

    Whack a Donkey Kong

    CodepenGithub
    Whack a Donkey Kong

    Hangman

    CodepenGithub
    Hangman

    Dad jokes

    CodepenGithub
    Dad jokes

    Giphy search

    CodepenGithub
    Giphy search

    Tetris

    CodepenGithub
    Tetris

    Simon game

    CodepenGithub
    Simon game

    Drum machine

    CodepenGithub
    Drum machine

    Clock

    CodepenGithub
    Clock

    Etch a Sketch

    CodepenGithub
    Etch a Sketch

    Calculator

    CodepenGithub
    Calculator

    Higher or Lower

    CodepenGithub
    Higher or Lower

    Tic Tac Toe

    CodepenGithub
    Tic Tac Toe

    Sliding Puzzle

    CodepenGithub
    Sliding Puzzle

    Pokemon

    CodepenGithub
    Pokemon

    Color game

    CodepenGithub
    Color game

    Brick breaker

    CodepenGithub
    Brick breaker

    Connect 4

    CodepenGithub
    Connect 4

    Date counter

    CodepenGithub
    Date counter

    Quotes

    CodepenGithub
    Quotes

    Timer

    CodepenGithub
    Timer
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Projects

    This project list is a collection of work I have been able to build over the years. You can find here the codes I am most proud of, whether they are professional or personal.

    JavaScript is needed for filters to show

    Tripser Blog

    Live websiteSite as I left it
    Tripser Blog

    Padel

    Live websiteSite as I left it
    Padel

    Omega

    Live websiteSite as I left it
    Omega

    Onomo

    Live websiteSite as I left it
    Onomo

    Eli Paris

    Live websiteSite as I left it
    Eli Paris

    KPMG Careers

    Live websiteSite as I left it
    KPMG Careers

    KPMG Law

    Live websiteSite as I left it
    KPMG Law

    Shop

    CodesandboxGithub
    Shop

    Memory

    CodepenGithub
    Memory

    Black Jack

    CodepenGithub
    Black Jack

    Movies

    CodesandboxGithub
    Movies

    Recipes

    CodesandboxGithub
    Recipes

    Quiz

    CodesandboxGithub
    Quiz

    Snake

    CodepenGithub
    Snake

    Star Match

    CodepenGithub
    Star Match

    Minesweeper

    CodepenGithub
    Minesweeper

    Whack a Donkey Kong

    CodepenGithub
    Whack a Donkey Kong

    Hangman

    CodepenGithub
    Hangman

    Dad jokes

    CodepenGithub
    Dad jokes

    Giphy search

    CodepenGithub
    Giphy search

    Tetris

    CodepenGithub
    Tetris

    Simon game

    CodepenGithub
    Simon game

    Drum machine

    CodepenGithub
    Drum machine

    Clock

    CodepenGithub
    Clock

    Etch a Sketch

    CodepenGithub
    Etch a Sketch

    Calculator

    CodepenGithub
    Calculator

    Higher or Lower

    CodepenGithub
    Higher or Lower

    Tic Tac Toe

    CodepenGithub
    Tic Tac Toe

    Sliding Puzzle

    CodepenGithub
    Sliding Puzzle

    Pokemon

    CodepenGithub
    Pokemon

    Color game

    CodepenGithub
    Color game

    Brick breaker

    CodepenGithub
    Brick breaker

    Connect 4

    CodepenGithub
    Connect 4

    Date counter

    CodepenGithub
    Date counter

    Quotes

    CodepenGithub
    Quotes

    Timer

    CodepenGithub
    Timer
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/black-jack.html b/projects/black-jack.html index 788975e..0f97cc8 100644 --- a/projects/black-jack.html +++ b/projects/black-jack.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Black Jack

    Beat the bank in Black Jack!

    Technologies

    Challenges and accomplishments

    • While loop to ensure unique card draws
    • Local storage to save the player score
    • Complex logic to handle win-lose logic
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Black Jack

    Beat the bank in Black Jack!

    Technologies

    Challenges and accomplishments

    • While loop to ensure unique card draws
    • Local storage to save the player score
    • Complex logic to handle win-lose logic
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/brick-breaker.html b/projects/brick-breaker.html index 6c5c1df..135a10c 100644 --- a/projects/brick-breaker.html +++ b/projects/brick-breaker.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Brick breaker

    Break all the bricks in this first level!

    Technologies

    Challenges and accomplishments

    • Create blocks, bar and ball with Canvas
    • Mousemove event to handle the bar of the game
    • Detect collisions between the ball and the bricks, bar or walls
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Brick breaker

    Break all the bricks in this first level!

    Technologies

    Challenges and accomplishments

    • Create blocks, bar and ball with Canvas
    • Mousemove event to handle the bar of the game
    • Detect collisions between the ball and the bricks, bar or walls
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/calculator.html b/projects/calculator.html index 829a19d..f6ea1f1 100644 --- a/projects/calculator.html +++ b/projects/calculator.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Calculator

    Fully functional Calculator!

    Technologies

    Challenges and accomplishments

    • Math.round to round numbers
    • Use eval to process calculation
    • Create an element in the right location with insertAdjacentHTML
    • Create shadows on an element with box-shadow
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Calculator

    Fully functional Calculator!

    Technologies

    Challenges and accomplishments

    • Math.round to round numbers
    • Use eval to process calculation
    • Create an element in the right location with insertAdjacentHTML
    • Create shadows on an element with box-shadow
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/clock.html b/projects/clock.html index 6a81694..4b88c9d 100644 --- a/projects/clock.html +++ b/projects/clock.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Clock

    Check the clock and get the time!

    Technologies

    Challenges and accomplishments

    • Work with Date and its methods getHours and getMinutes
    • Use CSS transform to rotate the clock hands
    • Define the transform-origin to rotate as a real clock
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Clock

    Check the clock and get the time!

    Technologies

    Challenges and accomplishments

    • Work with Date and its methods getHours and getMinutes
    • Use CSS transform to rotate the clock hands
    • Define the transform-origin to rotate as a real clock
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/color-game.html b/projects/color-game.html index d3b1a9a..ef01b01 100644 --- a/projects/color-game.html +++ b/projects/color-game.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Color game

    Sharpen your RGB knowledge by playing this little Color game!

    Technologies

    Challenges and accomplishments

    • Define the display with CSS grids
    • Use BEM to name elements classes
    • Create HTML elements with JS
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Color game

    Sharpen your RGB knowledge by playing this little Color game!

    Technologies

    Challenges and accomplishments

    • Define the display with CSS grids
    • Use BEM to name elements classes
    • Create HTML elements with JS
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/connect-4.html b/projects/connect-4.html index e0b0867..bb5574f 100644 --- a/projects/connect-4.html +++ b/projects/connect-4.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Connect 4

    Play Connect 4 with a friend and align 4 of yours!

    Technologies

    Challenges and accomplishments

    • Create all elements with JavaScript
    • Use the :not() CSS selector
    • Use the :nth-of-type() CSS selector
    • Array.slice to copy an array of elements
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Connect 4

    Play Connect 4 with a friend and align 4 of yours!

    Technologies

    Challenges and accomplishments

    • Create all elements with JavaScript
    • Use the :not() CSS selector
    • Use the :nth-of-type() CSS selector
    • Array.slice to copy an array of elements
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/dad-jokes.html b/projects/dad-jokes.html index fba4eb6..619c230 100644 --- a/projects/dad-jokes.html +++ b/projects/dad-jokes.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Dad jokes

    Go and get a random dad joke!

    Technologies

    Challenges and accomplishments

    • AJAX call with jQuery
    • JSON parse and stringify methods
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Dad jokes

    Go and get a random dad joke!

    Technologies

    Challenges and accomplishments

    • AJAX call with jQuery
    • JSON parse and stringify methods
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/date-counter.html b/projects/date-counter.html index bb4a111..7a97710 100644 --- a/projects/date-counter.html +++ b/projects/date-counter.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Date counter

    Find out how many days passed since a certain date, or between two dates, or what date will ti be in x days.

    Technologies

    Challenges and accomplishments

    • Listen to input changes with Input event
    • Date methods to get the right info
    • Convert dates to the desired formats
    • Calculate the difference between two dates
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Date counter

    Find out how many days passed since a certain date, or between two dates, or what date will ti be in x days.

    Technologies

    Challenges and accomplishments

    • Listen to input changes with Input event
    • Date methods to get the right info
    • Convert dates to the desired formats
    • Calculate the difference between two dates
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/drum-machine.html b/projects/drum-machine.html index 9e2d510..9a6e03e 100644 --- a/projects/drum-machine.html +++ b/projects/drum-machine.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Drum machine

    Smash this Drum Machine!

    Technologies

    Challenges and accomplishments

    • Audio to play the music sounds
    • Target elements with getElementById
    • Click on tiles with keyup event
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Drum machine

    Smash this Drum Machine!

    Technologies

    Challenges and accomplishments

    • Audio to play the music sounds
    • Target elements with getElementById
    • Click on tiles with keyup event
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/eli-paris.html b/projects/eli-paris.html index 375651d..11478fc 100644 --- a/projects/eli-paris.html +++ b/projects/eli-paris.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Eli Paris

    Eli Paris jewelry store website built with Angular, Node and Strapi. Complete back office to manage the content of the site. Cart, payment and invoice processes.

    Technologies

    Challenges and accomplishments

    • Integration development from InVision designs to Angular and Sass
    • Used some Prime NG components from the library
    • CSS from scratch with Sass leveraging Grids and Multi-columns layouts
    Screenshot of https://www.eliparis.com/
    Full size screenshot of Eli Paris website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Eli Paris

    Eli Paris jewelry store website built with Angular, Node and Strapi. Complete back office to manage the content of the site. Cart, payment and invoice processes.

    Technologies

    Challenges and accomplishments

    • Integration development from InVision designs to Angular and Sass
    • Used some Prime NG components from the library
    • CSS from scratch with Sass leveraging Grids and Multi-columns layouts
    Screenshot of https://www.eliparis.com/
    Full size screenshot of Eli Paris website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/etch-a-sketch.html b/projects/etch-a-sketch.html index 26c6cd6..47ab6f4 100644 --- a/projects/etch-a-sketch.html +++ b/projects/etch-a-sketch.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Etch a Sketch

    Try to sketch something in this!

    Technologies

    Challenges and accomplishments

    • Input event to listen to every input modification
    • Turn string into number with parseFloat
    • Translate number into string with toString
    • Calculate the width of an element with offsetWidth
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Etch a Sketch

    Try to sketch something in this!

    Technologies

    Challenges and accomplishments

    • Input event to listen to every input modification
    • Turn string into number with parseFloat
    • Translate number into string with toString
    • Calculate the width of an element with offsetWidth
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/giphy-search.html b/projects/giphy-search.html index bb50ab3..63ea82b 100644 --- a/projects/giphy-search.html +++ b/projects/giphy-search.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Giphy search

    Find the gif you need with Giphy Search!

    Technologies

    Challenges and accomplishments

    • jQuery for JavaScript: form data, events, select elements, animations
    • AJAX call with jQuery
    • JSON parse and stringify methods
    • Fix order of animations with setTimeout
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Giphy search

    Find the gif you need with Giphy Search!

    Technologies

    Challenges and accomplishments

    • jQuery for JavaScript: form data, events, select elements, animations
    • AJAX call with jQuery
    • JSON parse and stringify methods
    • Fix order of animations with setTimeout
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/hangman.html b/projects/hangman.html index c6f4c2a..743647c 100644 --- a/projects/hangman.html +++ b/projects/hangman.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Hangman

    The Hangman game as in your childhood!

    Technologies

    Challenges and accomplishments

    • Organise collaboration with open sourcers
    • Array.concat to combine the different arrays into one
    • String.split to transform the word into an array of letters
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Hangman

    The Hangman game as in your childhood!

    Technologies

    Challenges and accomplishments

    • Organise collaboration with open sourcers
    • Array.concat to combine the different arrays into one
    • String.split to transform the word into an array of letters
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/higher-or-lower.html b/projects/higher-or-lower.html index 8f73fad..a108545 100644 --- a/projects/higher-or-lower.html +++ b/projects/higher-or-lower.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Higher or Lower

    Guess if the next card will be Higher or Lower!

    Technologies

    Challenges and accomplishments

    • Select elements with querySelector
    • Find index with Array.indexOf
    • Math.random to get a random number
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Higher or Lower

    Guess if the next card will be Higher or Lower!

    Technologies

    Challenges and accomplishments

    • Select elements with querySelector
    • Find index with Array.indexOf
    • Math.random to get a random number
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/kpmg-careers.html b/projects/kpmg-careers.html index 1ea0e24..a1f305c 100644 --- a/projects/kpmg-careers.html +++ b/projects/kpmg-careers.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    KPMG Careers

    KPMG Belgium recruitment website built with Umbraco CMS.

    Technologies

    Challenges and accomplishments

    • Create a custom Google maps toolkit
    • Implement an Instagram feed with Curator.io
    • Fetch JSON events
    • Fetch JSON job
    • Slick responsive carousel
    Screenshot of https://careers.kpmg.be/
    Full size screenshot of KPMG Careers website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    KPMG Careers

    KPMG Belgium recruitment website built with Umbraco CMS.

    Technologies

    Challenges and accomplishments

    • Create a custom Google maps toolkit
    • Implement an Instagram feed with Curator.io
    • Fetch JSON events
    • Fetch JSON job
    • Slick responsive carousel
    Screenshot of https://careers.kpmg.be/
    Full size screenshot of KPMG Careers website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/kpmg-law.html b/projects/kpmg-law.html index 511411a..02d590a 100644 --- a/projects/kpmg-law.html +++ b/projects/kpmg-law.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    KPMG Law

    KPMG Law (previously Klaw) website built with Umbraco CMS.

    Technologies

    Challenges and accomplishments

    • Discover Umbraco and C#
    • Use Uskinned theme and improve it
    • SEO improvements
    • Meta tags adjustments for social sharing
    Screenshot of https://www.kpmglaw.be/
    Full size screenshot of KPMG Law website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    KPMG Law

    KPMG Law (previously Klaw) website built with Umbraco CMS.

    Technologies

    Challenges and accomplishments

    • Discover Umbraco and C#
    • Use Uskinned theme and improve it
    • SEO improvements
    • Meta tags adjustments for social sharing
    Screenshot of https://www.kpmglaw.be/
    Full size screenshot of KPMG Law website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/memory.html b/projects/memory.html index 8655f0e..d5ef390 100644 --- a/projects/memory.html +++ b/projects/memory.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Memory

    Find pairs as fast as possible in this Memory!

    Technologies

    Challenges and accomplishments

    • Array.splice to remove a certain array element
    • setInterval & clearInterval for the timer of the game
    • Click event listener on parent to handle children clicks
    • CSS user-select to remove mouse selection
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Memory

    Find pairs as fast as possible in this Memory!

    Technologies

    Challenges and accomplishments

    • Array.splice to remove a certain array element
    • setInterval & clearInterval for the timer of the game
    • Click event listener on parent to handle children clicks
    • CSS user-select to remove mouse selection
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/minesweeper.html b/projects/minesweeper.html index b798bd0..a721d57 100644 --- a/projects/minesweeper.html +++ b/projects/minesweeper.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Minesweeper

    Play Minesweeper in this 9x9 grid!

    Technologies

    Challenges and accomplishments

    • Use setInterval & clearInterval to manage the timer
    • Table to handle adjacent cells checks
    • Check if the user is on the page with hasFocus
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Minesweeper

    Play Minesweeper in this 9x9 grid!

    Technologies

    Challenges and accomplishments

    • Use setInterval & clearInterval to manage the timer
    • Table to handle adjacent cells checks
    • Check if the user is on the page with hasFocus
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/movies.html b/projects/movies.html index 2c46820..52d06e3 100644 --- a/projects/movies.html +++ b/projects/movies.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Movies

    Search or scroll for movies and series. Get general info and learn about their actors.

    Technologies

    Challenges and accomplishments

    • React router dom to handle the navigation
    • Redux to handle states accross the app
    • Redux thunk for async requests
    • Fetch data The Movie DataBase API
    • Use Material UI for components of the app
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Movies

    Search or scroll for movies and series. Get general info and learn about their actors.

    Technologies

    Challenges and accomplishments

    • React router dom to handle the navigation
    • Redux to handle states accross the app
    • Redux thunk for async requests
    • Fetch data The Movie DataBase API
    • Use Material UI for components of the app
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/omega.html b/projects/omega.html index e3c3a51..940af98 100644 --- a/projects/omega.html +++ b/projects/omega.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Omega

    Omega zoo booking website with React. Information about the park and its animals as well as ability to book your stay, table or entrance via ticketing system.

    Technologies

    Challenges and accomplishments

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Use Styled-system and Emotion for styling
    • Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering
    • Used recent CSS features in the names of Image clip-path and CSS grids
    Screenshot of https://www.parcomega.ca/
    Full size screenshot of Omega website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Omega

    Omega zoo booking website with React. Information about the park and its animals as well as ability to book your stay, table or entrance via ticketing system.

    Technologies

    Challenges and accomplishments

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Use Styled-system and Emotion for styling
    • Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering
    • Used recent CSS features in the names of Image clip-path and CSS grids
    Screenshot of https://www.parcomega.ca/
    Full size screenshot of Omega website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/onomo.html b/projects/onomo.html index bd9e718..a360c5f 100644 --- a/projects/onomo.html +++ b/projects/onomo.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Onomo

    Onomo hotels booking website with React. Possibility to search and book hotels through a complete booking journey.

    Technologies

    Challenges and accomplishments

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Use Styled-system and Emotion for styling
    • Complete booking process with advanced forms such as a Date picker, phone numbers (regex) and custom select
    Screenshot of https://www.onomohotels.com/
    Full size screenshot of Onomo website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Onomo

    Onomo hotels booking website with React. Possibility to search and book hotels through a complete booking journey.

    Technologies

    Challenges and accomplishments

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Use Styled-system and Emotion for styling
    • Complete booking process with advanced forms such as a Date picker, phone numbers (regex) and custom select
    Screenshot of https://www.onomohotels.com/
    Full size screenshot of Onomo website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/padel.html b/projects/padel.html index f467d99..25a22c4 100644 --- a/projects/padel.html +++ b/projects/padel.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Padel

    Paris Premier Padel Major website built with React. PPPM official website giving access to the latest news, pictures and videos as well as live scoring and ticketing system.

    Technologies

    Challenges and accomplishments

    • Front-end development from Figma design using React and CSS-in-JS
    • Use Styled-system and Emotion for styling
    • Used advanced CSS grid developed for the layout of the blog, image and video items
    • Ensured responsiveness of the different components of the site
    • Special outlined style on titles
    Screenshot of https://www.parispadelmajor.com/
    Full size screenshot of Padel website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Padel

    Paris Premier Padel Major website built with React. PPPM official website giving access to the latest news, pictures and videos as well as live scoring and ticketing system.

    Technologies

    Challenges and accomplishments

    • Front-end development from Figma design using React and CSS-in-JS
    • Use Styled-system and Emotion for styling
    • Used advanced CSS grid developed for the layout of the blog, image and video items
    • Ensured responsiveness of the different components of the site
    • Special outlined style on titles
    Screenshot of https://www.parispadelmajor.com/
    Full size screenshot of Padel website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/pokemon.html b/projects/pokemon.html index dbc37d2..33c94c4 100644 --- a/projects/pokemon.html +++ b/projects/pokemon.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Pokemon

    Find out what Pokemon you are!

    Technologies

    Challenges and accomplishments

    • Manage jQuery fading animations
    • @keyframes to handle rotation animations
    • Handle classes with jQuery methods
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Pokemon

    Find out what Pokemon you are!

    Technologies

    Challenges and accomplishments

    • Manage jQuery fading animations
    • @keyframes to handle rotation animations
    • Handle classes with jQuery methods
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/quiz.html b/projects/quiz.html index 64140f2..6f8f5f6 100644 --- a/projects/quiz.html +++ b/projects/quiz.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Quiz

    Try a set of 10 random questions fetched from Open Trivia DB in this Quiz built with React and score as much points as you can. You win 1 point per good answer but make 5 points when picking the good answer from the start!

    Technologies

    Challenges and accomplishments

    • React hooks: useState and useEffect
    • Use Typescript for React components
    • Fetch questions from Opentdb API
    • Convert JSON data
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Quiz

    Try a set of 10 random questions fetched from Open Trivia DB in this Quiz built with React and score as much points as you can. You win 1 point per good answer but make 5 points when picking the good answer from the start!

    Technologies

    Challenges and accomplishments

    • React hooks: useState and useEffect
    • Use Typescript for React components
    • Fetch questions from Opentdb API
    • Convert JSON data
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/quotes.html b/projects/quotes.html index 951ba49..21049b6 100644 --- a/projects/quotes.html +++ b/projects/quotes.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Quotes

    Click and get a random quote from Forismatic!

    Technologies

    Challenges and accomplishments

    • Get quotes through an AJAX call
    • Parse and Stringify JSON data
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Quotes

    Click and get a random quote from Forismatic!

    Technologies

    Challenges and accomplishments

    • Get quotes through an AJAX call
    • Parse and Stringify JSON data
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/recipes.html b/projects/recipes.html index 7d0c318..f3b0937 100644 --- a/projects/recipes.html +++ b/projects/recipes.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Recipes

    Create your recipes or find some from a wide API.

    Technologies

    Challenges and accomplishments

    • React router dom to handle the navigation
    • Firebase as a backend service
    • Fetch data from Edamam API
    • i18n to handle translations
    • Use Chakra UI components in the app
    • Use Emotion to custom style components
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Recipes

    Create your recipes or find some from a wide API.

    Technologies

    Challenges and accomplishments

    • React router dom to handle the navigation
    • Firebase as a backend service
    • Fetch data from Edamam API
    • i18n to handle translations
    • Use Chakra UI components in the app
    • Use Emotion to custom style components
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/shop.html b/projects/shop.html index f72adf1..c08eb7a 100644 --- a/projects/shop.html +++ b/projects/shop.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Shop

    Shop app built with React, Redux, Styled-components, Node and MongoDB.

    Technologies

    Challenges and accomplishments

    • Backend server with Node.js, Express and MongoDB
    • Fetch data from the backend with Axios
    • Redux & Redux persist to handle states accross the app
    • Payment handling with Stripe Checkout
    • Use Styled-components to design components
    • Testing with Jest and React Testing Library
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Shop

    Shop app built with React, Redux, Styled-components, Node and MongoDB.

    Technologies

    Challenges and accomplishments

    • Backend server with Node.js, Express and MongoDB
    • Fetch data from the backend with Axios
    • Redux & Redux persist to handle states accross the app
    • Payment handling with Stripe Checkout
    • Use Styled-components to design components
    • Testing with Jest and React Testing Library
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/simon-game.html b/projects/simon-game.html index 50e779b..02a1a73 100644 --- a/projects/simon-game.html +++ b/projects/simon-game.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Simon game

    Train your brain with the famous Simon game!

    Technologies

    Challenges and accomplishments

    • Use childNodes to point to the right elements
    • Math.random to pick a random element
    • Audio to play sounds
    • setInterval and setTimeout to handle the sounds loop
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Simon game

    Train your brain with the famous Simon game!

    Technologies

    Challenges and accomplishments

    • Use childNodes to point to the right elements
    • Math.random to pick a random element
    • Audio to play sounds
    • setInterval and setTimeout to handle the sounds loop
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/sliding-puzzle.html b/projects/sliding-puzzle.html index 472f425..285c74f 100644 --- a/projects/sliding-puzzle.html +++ b/projects/sliding-puzzle.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Sliding Puzzle

    Try to solve this sliding puzzle!

    Technologies

    Challenges and accomplishments

    • Swap the position of elements
    • Use before and after methods to insert elements
    • Array.splice to delete a certain array element
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Sliding Puzzle

    Try to solve this sliding puzzle!

    Technologies

    Challenges and accomplishments

    • Swap the position of elements
    • Use before and after methods to insert elements
    • Array.splice to delete a certain array element
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/snake.html b/projects/snake.html index d157ab8..83b99d2 100644 --- a/projects/snake.html +++ b/projects/snake.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Snake

    Get as long as possible in this version of Snake!

    Technologies

    Challenges and accomplishments

    • Keydown event to manage the snake
    • setInterval & clearInterval for the snake and the timer
    • Array.shift to handle the snake array changes
    • jQuery mobile swipe to handle snake on mobile
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Snake

    Get as long as possible in this version of Snake!

    Technologies

    Challenges and accomplishments

    • Keydown event to manage the snake
    • setInterval & clearInterval for the snake and the timer
    • Array.shift to handle the snake array changes
    • jQuery mobile swipe to handle snake on mobile
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/star-match.html b/projects/star-match.html index 3c59aee..51854e5 100644 --- a/projects/star-match.html +++ b/projects/star-match.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Star Match

    Play by picking 1 or more numbers that sum to the number of stars

    Technologies

    Challenges and accomplishments

    • Build one of my first React project
    • Use the useState and useEffect hooks
    • Map through components with JSX to render a list of elements
    • JSX conditional rendering to apply some UI logic
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Star Match

    Play by picking 1 or more numbers that sum to the number of stars

    Technologies

    Challenges and accomplishments

    • Build one of my first React project
    • Use the useState and useEffect hooks
    • Map through components with JSX to render a list of elements
    • JSX conditional rendering to apply some UI logic
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/tetris.html b/projects/tetris.html index bb7f8e2..2e45108 100644 --- a/projects/tetris.html +++ b/projects/tetris.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Tetris

    Break lines and stay alive for as long as you can in this Tetris!

    Technologies

    Challenges and accomplishments

    • Babel to translate newer JavaScript to work with older browsers
    • Array.forEach to loop over an array
    • Array.some to check array values
    • SetInterval & clearInterval to make the game running
    • Keyup event to move the Tetris
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Tetris

    Break lines and stay alive for as long as you can in this Tetris!

    Technologies

    Challenges and accomplishments

    • Babel to translate newer JavaScript to work with older browsers
    • Array.forEach to loop over an array
    • Array.some to check array values
    • SetInterval & clearInterval to make the game running
    • Keyup event to move the Tetris
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/tic-tac-toe.html b/projects/tic-tac-toe.html index 4d830bc..d3dca93 100644 --- a/projects/tic-tac-toe.html +++ b/projects/tic-tac-toe.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Tic Tac Toe

    Play Tic Tac Toe or OXO against a dumb AI!

    Technologies

    Challenges and accomplishments

    • Use classList methods to act on element classes
    • Delay functions with setTimeout
    • Check the completion of the game and state the winner
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Tic Tac Toe

    Play Tic Tac Toe or OXO against a dumb AI!

    Technologies

    Challenges and accomplishments

    • Use classList methods to act on element classes
    • Delay functions with setTimeout
    • Check the completion of the game and state the winner
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/timer.html b/projects/timer.html index fdd0d48..5640912 100644 --- a/projects/timer.html +++ b/projects/timer.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Timer

    Set a timer for anything!

    Technologies

    Challenges and accomplishments

    • Handle the time with setInterval & clearInterval
    • Delay functions with setTimeout
    • Enable and disable input fields
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Timer

    Set a timer for anything!

    Technologies

    Challenges and accomplishments

    • Handle the time with setInterval & clearInterval
    • Delay functions with setTimeout
    • Enable and disable input fields
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/tripser-blog.html b/projects/tripser-blog.html index d93c37b..1aaad13 100644 --- a/projects/tripser-blog.html +++ b/projects/tripser-blog.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Tripser Blog

    Tripser blog built with Next.js, Sass, i18n and MDX.

    Technologies

    Challenges and accomplishments

    • Ensure great SEO practice in the code
    • Handle translation in the blog with i18n
    • Develop a rich text editor to create markdown content
    • Set up and develop MDX components
    Screenshot of https://tripser.blog/
    Full size screenshot of Tripser Blog website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Tripser Blog

    Tripser blog built with Next.js, Sass, i18n and MDX.

    Technologies

    Challenges and accomplishments

    • Ensure great SEO practice in the code
    • Handle translation in the blog with i18n
    • Develop a rich text editor to create markdown content
    • Set up and develop MDX components
    Screenshot of https://tripser.blog/
    Full size screenshot of Tripser Blog website homepage
    Back to projectsLive websiteLive websiteSite as I left itSite as I left it
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/projects/whack-a-donkey-kong.html b/projects/whack-a-donkey-kong.html index b6b470a..1d2a98a 100644 --- a/projects/whack-a-donkey-kong.html +++ b/projects/whack-a-donkey-kong.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -
    ProjectsBlogResume

    Whack a Donkey Kong

    Crush these Donkey Kongs in this whack a mole!

    Technologies

    Challenges and accomplishments

    • setInterval & clearInterval to handle the timer
    • setTimeout to animate the Kongs on click
    • Handle element classList: add and remove
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file +
    ProjectsBlogResume

    Whack a Donkey Kong

    Crush these Donkey Kongs in this whack a mole!

    Technologies

    Challenges and accomplishments

    • setInterval & clearInterval to handle the timer
    • setTimeout to animate the Kongs on click
    • Handle element classList: add and remove
    Back to projectsGithub repositoryGithub
    Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.
    \ No newline at end of file diff --git a/resume-remy-beumier.html b/resume-remy-beumier.html index 446bb94..d9ed8f7 100644 --- a/resume-remy-beumier.html +++ b/resume-remy-beumier.html @@ -3,4 +3,4 @@ opacity: 1 !important; transform: translate(0) scale(1) !important; } -

    Rémy Beumier

    Front-end Developer

    remybeumier@gmail.com

    remybeumier.be

    linkedin.com

    github.com

    ExperienceExperience

    Front-end Developer @VOO

    VOO // June 2023 - Now

    Front-end developer at VOO in service experience team. Different web and mobile projects, from scratch or to improve, using React, React Native, TypeScript, Node.js and Firebase.

    BistrO: Web app for technicians management, evaluation and reporting

    • Development from scratch using React, TS and Firebase
    • Fully manageable data via advanced tables and forms
    • CRON functions for reports, calculation, emails and backups

    Wall-e: Web app for automation, asset and ticket management

    • Type safety with TypeScript
    • Automation scripts with Testcafe
    • Front-end development in React, TS, CSS-in-JS
    • Back-end improvements in Node.js, MySQL and Firebase

    Voices: Mobile app for advanced communication with testers

    • React Native development with Expo for iOS and Android
    • Real time database with Firebase
    • Real time data, chat and notifications

    Front-end Developer & Integrator @PTC

    Positive Thinking Company // November 2020 - Now

    Front-end developer and integrator in the PTC Delivery Center, I worked on different projects, mostly in React, using industry standards such as Scrum agile, Git, Npm, Confluence, Jira and Figma.

    Paris Padel Major: Padel tournament website.

    • Front-end development from Figma design using React and CSS-in-JS (Emotion & Styled-system)
    • Used advanced CSS grid developed for the layout of the blog, image and video items
    • Conducted tests with Jest and React Testing Library

    Onomo: African hotels website

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Complete booking process with advanced forms such as a Date picker, phone numbers (regex) and custom select
    • Improved the internal React Boilerplate

    Omega: Canadian zoo website

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering
    • Used recent CSS features in the names of Image clip-path and CSS grids

    Eli Paris: Jewellery e-commerce website

    • Integration development from InVision designs to Angular and Sass
    • CSS from scratch with Sass leveraging Grids and Multi-columns layouts

    Front-end Developer @BICS

    BICS // August 2022 - December 2022

    Front-end developer on a 5-month long mission to manage the development of two BICS Components libraries. Based on an internal design system (Figma), I engineered one for React projects and another for a JavaScript team.

    React JS BICS Component Library

    • Developed 30+ components to be integrated on various web applications using React, Ant Design and Less
    • Ensured theming capabilities to match projects color schemes with Less pre-processor
    • Conducted functional, visual, accessibility and responsiveness tests through Storybook
    • Documented development process and usage via Storybook

    JavaScript Component Library

    • Developed 30+ components to be integrated on a crucial internal application using JavaScript and Sass
    • Ensured CSS scalability and maintainability with Sass and CSS variables
    • Conducted functional, visual, accessibility and responsiveness tests through Storybook
    • Documented development process and usage via Storybook

    Front-end Developer @KPMG

    KPMG Belgium // May 2017 - November 2020

    Development and improvement of internal websites working with different front-end languages (e.g., HTML, CSS, JS) and transversal tools.

    Umbraco CMS: Coding of websites

    • Development from base layout using HTML, CSS (Sass) and JavaScript to match business requirements for 3 new sites: KPMG Careers, KPMG Law and KPMG Alumni
    • Created new components with advanced features such as Splash video, Carousels, Custom map, Instagram feed, Events and Job fetching (JSON) to match extra needs from the departments
    • SEO improvements and analytics setup working closely with marketing team
    • Websites fully responsive and cross-browser compatibility down to Internet Explorer 9 implementing, for example, CSS media queries, Bootstrap and polyfills
    • Documented development process and content creation

    Sharepoint: Creation of custom web parts

    • Upgraded the intranet from SharePoint 2013 to 2016 by recreating, redesigning and improving the pages in line with the different departments using HTML, CSS and JS
    • Created custom web parts for special cases
    • Taught and documented how to use the intranet, create content and the basics of web development

    AEM: Crafting of custom pages

    • Developed special pages for marketing campaigns using HTML, CSS and JS
    • Built an internal promotional calendar and carousel inside Adobe Experience Manager with specific needs from a department

    ProjectsProjects

    Portfolio

    remybeumier.be // version 2022

    Collection of professional and personal projects presented in a Next.js website.

    See portfolio website (https://remybeumier.be/projects)

    SkillsSkills

    Development skills

    • React
    • React Native
    • JavaScript
    • TypeScript
    • Redux
    • Next.js
    • Node.js
    • Firebase
    • CSS
    • HTML
    • Npm
    • Yarn
    • JSON
    • Jest
    • React testing Library
    • Storybook
    • Sass
    • Less
    • CSS-in-JS
    • Bootstrap
    • Bulma
    • Tailwind
    • ES6
    • Git

    Methodologies and Tools

    • Scrum Agile
    • Responsiveness
    • Accessibility
    • Cross-browser compatibility
    • BEM
    • Atomic design
    • SEO
    • Confluence
    • Jira
    • Figma

    Soft skills

    • Problem-solving
    • Life-long learning
    • Prioritisation and time management
    • Open communication
    • Adaptability
    • Teamwork

    Languages

    • French
    • English

    ArticlesArticles

    \ No newline at end of file +

    Rémy Beumier

    Front-end Developer

    remybeumier@gmail.com

    remybeumier.be

    linkedin.com

    github.com

    ExperienceExperience

    Front-end Developer @VOO

    VOO // June 2023 - Now

    Front-end developer at VOO in service experience team. Different web and mobile projects, from scratch or to improve, using React, React Native, TypeScript, Node.js and Firebase.

    BistrO: Web app for technicians management, evaluation and reporting

    • Development from scratch using React, TS and Firebase
    • Fully manageable data via advanced tables and forms
    • CRON functions for reports, calculation, emails and backups

    Wall-e: Web app for automation, asset and ticket management

    • Type safety with TypeScript
    • Automation scripts with Testcafe
    • Front-end development in React, TS, CSS-in-JS
    • Back-end improvements in Node.js, MySQL and Firebase

    Voices: Mobile app for advanced communication with testers

    • React Native development with Expo for iOS and Android
    • Real time database with Firebase
    • Real time data, chat and notifications

    Front-end Developer & Integrator @PTC

    Positive Thinking Company // November 2020 - Now

    Front-end developer and integrator in the PTC Delivery Center, I worked on different projects, mostly in React, using industry standards such as Scrum agile, Git, Npm, Confluence, Jira and Figma.

    Paris Padel Major: Padel tournament website.

    • Front-end development from Figma design using React and CSS-in-JS (Emotion & Styled-system)
    • Used advanced CSS grid developed for the layout of the blog, image and video items
    • Conducted tests with Jest and React Testing Library

    Onomo: African hotels website

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Complete booking process with advanced forms such as a Date picker, phone numbers (regex) and custom select
    • Improved the internal React Boilerplate

    Omega: Canadian zoo website

    • Integration and front-end development from Figma designs to React and CSS-in-JS coding
    • Complex components in the likes of a Swiper, a Carousel, Deep navigation bar and Filtering
    • Used recent CSS features in the names of Image clip-path and CSS grids

    Eli Paris: Jewellery e-commerce website

    • Integration development from InVision designs to Angular and Sass
    • CSS from scratch with Sass leveraging Grids and Multi-columns layouts

    Front-end Developer @BICS

    BICS // August 2022 - December 2022

    Front-end developer on a 5-month long mission to manage the development of two BICS Components libraries. Based on an internal design system (Figma), I engineered one for React projects and another for a JavaScript team.

    React JS BICS Component Library

    • Developed 30+ components to be integrated on various web applications using React, Ant Design and Less
    • Ensured theming capabilities to match projects color schemes with Less pre-processor
    • Conducted functional, visual, accessibility and responsiveness tests through Storybook
    • Documented development process and usage via Storybook

    JavaScript Component Library

    • Developed 30+ components to be integrated on a crucial internal application using JavaScript and Sass
    • Ensured CSS scalability and maintainability with Sass and CSS variables
    • Conducted functional, visual, accessibility and responsiveness tests through Storybook
    • Documented development process and usage via Storybook

    Front-end Developer @KPMG

    KPMG Belgium // May 2017 - November 2020

    Development and improvement of internal websites working with different front-end languages (e.g., HTML, CSS, JS) and transversal tools.

    Umbraco CMS: Coding of websites

    • Development from base layout using HTML, CSS (Sass) and JavaScript to match business requirements for 3 new sites: KPMG Careers, KPMG Law and KPMG Alumni
    • Created new components with advanced features such as Splash video, Carousels, Custom map, Instagram feed, Events and Job fetching (JSON) to match extra needs from the departments
    • SEO improvements and analytics setup working closely with marketing team
    • Websites fully responsive and cross-browser compatibility down to Internet Explorer 9 implementing, for example, CSS media queries, Bootstrap and polyfills
    • Documented development process and content creation

    Sharepoint: Creation of custom web parts

    • Upgraded the intranet from SharePoint 2013 to 2016 by recreating, redesigning and improving the pages in line with the different departments using HTML, CSS and JS
    • Created custom web parts for special cases
    • Taught and documented how to use the intranet, create content and the basics of web development

    AEM: Crafting of custom pages

    • Developed special pages for marketing campaigns using HTML, CSS and JS
    • Built an internal promotional calendar and carousel inside Adobe Experience Manager with specific needs from a department

    ProjectsProjects

    Portfolio

    remybeumier.be // version 2022

    Collection of professional and personal projects presented in a Next.js website.

    See portfolio website (https://remybeumier.be/projects)

    SkillsSkills

    Development skills

    • React
    • React Native
    • JavaScript
    • TypeScript
    • Redux
    • Next.js
    • Node.js
    • Firebase
    • CSS
    • HTML
    • Npm
    • Yarn
    • JSON
    • Jest
    • React testing Library
    • Storybook
    • Sass
    • Less
    • CSS-in-JS
    • Bootstrap
    • Bulma
    • Tailwind
    • ES6
    • Git

    Methodologies and Tools

    • Scrum Agile
    • Responsiveness
    • Accessibility
    • Cross-browser compatibility
    • BEM
    • Atomic design
    • SEO
    • Confluence
    • Jira
    • Figma

    Soft skills

    • Problem-solving
    • Life-long learning
    • Prioritisation and time management
    • Open communication
    • Adaptability
    • Teamwork

    Languages

    • French
    • English

    ArticlesArticles

    \ No newline at end of file