My personal website <3

This is the new 2023 version built with NextJs 14 (with the new App Router feature) and create-next-app.

DISCLAIMER

The website itself (the NextJs code) is really basic, and I haven't spent too much time on that. I write code better than that, I swear! 😇

I also use this website for testing and trying new technologies (which can be found in the next chapter).

Please don't try to hack my website ❤️

The technologies I've used:

• NextJs 14 NextJs 13.3 (with app folder)
• Docker
• GitLab CI
• SSR
• PWA
• SSG
• PWA offline (you need to install the PWA in order to get offline functionality)

TL;DR

• Local development (without docker) with "classic" NextJS CLI
  • npm run dev aka next dev
• Local development: on every change to code, it refreshes
  • npm run docker:start:local

Steps to create & run the project

• nvm use: it uses the version written in .nvmrc file (v18)
• npx create-next-app@latest
• npm install (see package.json for dependencies)
• npm run dev
• Open http://localhost:3001

Roadmap

• Home page
  • Introduction
  • Social links
  • CV download
• Sections
  • Blog
  • Projects
  • Selected open source repo from GitHub
• Font Awesome Icons
• PWA (only if the user install the PWA)
• 404 page (workaround using pages folder since app folder doesn't support it yet)
• Cookie manager
• Google Analytics
• CSS variables instead of SCSS
• Theme dark/light
• Syntax Highlight for code
• Sort articles by date ASC
• Offline status
• Improve accessibility
• Transparent navbar on top in Home Page
• Improve Open source section with preview
• Filter articles by category
• New UI graphic

Thanks to

Dependencies

• gray-matter: read metadata from a Markdown file
• markdown-to-jsx: convert Markdown to HTML
• octokit: SDK for GitHub API
• FontAwesome: Icon fonts
• qrcode-svg: QR Code generator
• react-syntax-highlighter: Code Syntax Highlighter

Blog articles

• Analytics with Next.js 13
• How to setup Google Tag Manager in a Next 13 App Router website
• Using :root in CSS modules