Benjamin Oddou Photographe

Welcome to the repository of my personal website dedicated to Photography 📸

🦾 Main Technologies

Design

1. Figma
2. Adobe Photoshop

Front-End

1. Nuxt 3
2. Tailwind CSS
3. GSAP with Premium Shockingly Green Plugins
4. ImageKit CDN
5. Photoswipe
6. Vue Masonry Wall

Back-End

1. Formspark
2. Botpoison

IDE and Production

1. Visual Studio Code
2. GitHub
3. Netlify

✨ Code Usage and Contribution

Code Usage

The project is open source so you can use part of the code but not entirely. Also, don't use the style (CSS and assets) as it is personal and makes this website unique.

This code is under MIT Licence ⚖️

Contribute

To contribute to the project, you can read the Contributing document and the Code of Conduct 🔍

👨‍💻 Environment (for OSX or Linux)

NVM

Install nvm. Open the terminal and run one of the following :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

To verify that nvm has been installed, do:

command -v nvm

Node.js and npm

Install node.js using nvm by running :

# the last stable version like 16.17.0
nvm install

To display a list of node.js versions that are installed on your machine, enter:

nvm ls

Switch versions by passing the version the same way you do when installing:

# version like 18.12.1
nvm use

Check the node.js and npm versions by running :

node -v
npm -v

To get the latest LTS version of node and migrate your existing installed packages, use :

nvm install 'lts/*' --reinstall-packages-from=current

To get the the latest version of npm, use one of the following command :

nvm install-latest-npm
npm install -g npm@latest

VSCode

1. Install Visual Studio Code
2. Install the following extensions :
   • Better TOML
   • ESLint
   • HTML CSS Support
   • Import Cost
   • JavaScript (ES6) code snippets
   • Material Icon Theme
   • npm Intellisense
   • Path Intellisense
   • PostCSS Language Support
   • Tailwind CSS IntelliSense
   • Vue Language Features (Volar)

🛠️ Setup

Command-line interface (CLI)

Always reinstall CLI packages after changing the node version

Dotenv CLI

Install the dotenv cli globally by running :

npm install -g dotenv-cli

Use env variables (e.g. API keys) by creating a .env file at the root of the project

Quicktype CLI

Install the quicktype cli globally by running :

npm install -g quicktype

Use quicktype to generate a strongly typed API response :

quicktype --src tmp/imgkit.json --top-level ImageKit --just-types --nice-property-names --acronym-style pascal --lang ts -o tmp/tmp.ts

To run after generating the proper .json file

For ImageKit :

1. Use the cURL command to download a sample response under tmp folder.
2. Run quicktype command to generate a tmp.ts file and copy it under the global declartion of ./types/imgkit.d.ts

// ./types/imgkit.d.ts
export {}
declare global {
  // Copy Code Here
}

Packages

Copy the current repo locally and install all node_modules via the following command :

dotenv npm install

GitHub Hooks

Install Husky to perform actions when commiting or pushing code to GitHub :

# Create .husky folder
npx husky-init

📜 Scripts

Nuxt API commands (see Documentation)

Run development server

# it will run "npx nuxi dev"
npm run dev

Build / Generate the app

Build the app without prerendering pages

# it will run "npx nuxi build"
npm run build

Build the app and prerender all .vue files into .html static files

# it will run "npx nuxi generate"
npm run generate

Preview the app

Preview the built / generated app

# it will run "npx nuxi preview"
npm run preview

Upgrade nuxt version

Using directly npx

# please don't use `-f` | `--force` parameter
npx nuxi upgrade

Remove manually node_modules and package-lock.json after upgrade and run dotenv install

Update npm packages

1. Using npm command

dotenv npm update

Note that by default npm update will not update the semver values of direct dependencies in the project package.json

2. Using npm-check-updates to force package.json to update to latest version (recommended)

# it will run "npx --yes npm-check-updates -u"
dotenv npm run upck

Run dotenv npm install instead of the proposed npm install in order to use .env variables

Format the code

Run globally ESLint on the project to format the code.

# it will run "eslint . --fix"
npm run eslint-fix

Push a release on GitHub

Semantic versioning

Semantic Versioning (SemVer) is a de facto standard for code versioning. It specifies that a version number always contains these three parts :

1. MAJOR version is incremented when you add breaking changes, e.g. an incompatible API change
2. MINOR version when you add functionality in a backwards compatible manner
3. PATCH version when you make backwards compatible bug fixes

First Release

To generate the changelog for the first release, run:

# npm run script
npm run release -- --first-release

GitHub Hooks

# Enable Git Hooks
npm run prepare
# it will run "standard-version -a"
npm run release
# it will run "standard-version -a --release-as patch"
npm run release:patch
# it will run "standard-version -a --release-as minor"
npm run release:minor
# it will run "standard-version -a --release-as major"
npm run release:major

See GitHub repo of Standard Version

Create a performance report

Run Unlighthouse to scan an entire website (to define in package.json file) with Google Lighthouse️

# it will run "npx unlighthouse --site https://www.benjaminoddou-photographe.com"
npm run lighthouse

Print the structure of the project

1. Install tree via HomeBrew
2. Run the following command to display a tree

# using -a to list all files, L <level> to define the depth of the tree and -I <pattern> to ignore patterns
tree -a -L 1 --charset utf-8

check the Documentation by running :

tree --help

Encoding API key to Base64

Used for ImageKit API

1. Create a file named my.key with a private API key at the root of the project
2. Launch the following script to encode the API key

openssl enc -base64 -in my.key -out my.key.base64

The output looks like this:

Fetch Data from ImageKit API

Using cURL

curl -X GET "https://api.imagekit.io/v1/files?<query>" \-u <private_API_key>: | json_pp > tmp/imgkit.json

curl "https://api.imagekit.io/v1/files?<query>" \-H 'Authorization: Basic <Base64_private_API_key>' | json_pp > tmp/imgkit.json

json_pp is used to format JSON. 🚨 Output directory must exists (tmp folder here)

The two command lines output the same result. To see the different options for the <query>, check the documentation that can be found here

Using API endpoint and $fetch / useFetch() composable from Nuxt 3

// In nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    IMAGEKIT_B64_API: process.env.IMAGEKIT_B64_API, // Defined in .env file
    public: {
      // public keys here
    }
  },
})

// In server/api/imgkit.ts
export default defineEventHandler(async () => {
  const config = useRuntimeConfig()
  const response = await $fetch('https://api.imagekit.io/v1/files', {
    method: 'GET',
    headers: {
      Authorization: 'Basic ' + config.IMAGEKIT_B64_API
    }
  })
  return response
})

// In pages/components
<script setup>
const { data: images } = useFetch<ImageKit[]>('/api/imgkit')
</script>

🏗️ Structure

Generated with tree

.
├── .commitlintrc.json # Commitlint configuration file
├── .env # Environment variables (not in GitHub repo - private 🤐)
├── .eslintrc.json # ESLint config file
├── .git # All git info
├── .github # Assets for GitHub repo
├── .netlify # netlify edge / internal functions (not in GitHub repo ❌)
├── .gitignore # List of files that should be ignore by Git
├── .husky # Husky config folder (GitHub hooks)
│   ├── _ # Generated by husky init command
│   │   ├── .gitignore
│   │   └── husky.sh
│   └── commit-msg # Commitlint with Github hooks
├── .npmrc # Npm config file with GSAP connexion to private repository
├── .nuxt # Nuxt uses the .nuxt/ directory in development to generate Vue application (not in GitHub repo ❌)
├── .output # Nuxt creates the .output/ directory when building the application for production. (not in GitHub repo ❌)
├── .versionrc.json # Changelog format configuration file
├── .vscode
│   └── settings.json # VSCode local settings
├── README.md # This document 👋
├── app.vue # Entry point and general backbone of the app. This is the main component in Nuxt 3 applications
├── assets # The assets/ directory is used to add all the website's assets that the build tool (Vite) will process.
│   ├── css
│   │   └── tailwind.css # Tailwind directives
│   ├── pwa-512x512.png # PWA Icon
│   ├── svg # Non interactive svgs
│   │   ├── checkmark.svg
│   │   └── ...svg
├── components # The components/ directory is where all Vue components can be imported inside pages or other components
│   ├── svg # Interactive svg build as vue components
│   │   ├── ArrowButton.vue
│   │   └── ...svg
│   ├── FAQquestion.vue
│   ├── TheAlert.vue
│   ├── TheCursor.vue
│   └── ...vue
├── utils # Auto imported functions
│   ├── piniaStore.ts # State Management store functions
│   └── index.ts # Helper functions
├── dist # Folder with built website (not in GitHub repo ❌)
├── node_modules # All modules installed by npm (not in GitHub repo ❌)
├── CHANGELOG.md # File that tracks all changes
├── CODE_OF_CONDUCT.md # Code of conduct
├── CONTRIBUTING.md # Contributing guide
├── LICENSE # MIT License
├── netlify-setup.sh # Use SSH key in netlify
├── netlify.toml # Configuration file for netlify
├── nuxt.config.ts # Nuxt configuration file
├── package-lock.json # Aggregates an immutable version of the package.json file
├── package.json # Contains all the dependencies and scripts of the application
├── pages # All pages belongs here. Nuxt provides a file-based routing to create routes within the app using Vue Router under the hood.
│   ├── [...slug].vue # Catch all route (404 not founf)
│   ├── about.vue # About page
│   ├── gallery.vue # Gallery page
│   └── index.vue # Home page
├── plugins # All Nuxt and Vue plugins
│   └── vue-masonry-wall.ts # Vue masonry plugin
├── public # files that shouldn't be processed by build tool (Vite)
│   ├── _redirects # Redirects rules for Netlify
│   ├── banner.jpg
│   ├── browserconfig.xml
│   ├── favicon.ico
│   ├── me.jpg
│   ├── mstile-150x150.png
│   ├── robots.txt
│   └── safari-pinned-tab.svg
├── server # Directory which register API and server handlers (Nitro routes) with HMR support
│   ├── api
│   │   └── imgkit.ts # ImageKit API endpoint (act as proxy)
│   ├── routes
│   │   └── sitemap.xml.ts # Sitemap generator
├── tmp # Temporary files to perform tests on API
│   ├── .gitkeep # empty hidden file to keep tmp folder in GitHub repo
│   ├── imgkit.json # Sample data from ImageKit cURL command (not in GitHub repo ❌)
│   └── tmp.ts # Output typescript API generated with quicktype command (not in GitHub repo ❌)
├── types # Typescript declaration
│   └── imgkit.d.ts # Declaration file for ImageKit API
├── tailwind.config.js # Tailwind config file
└── tsconfig.json # File that references .nuxt/tsconfig.json which resolved aliases used in a Nuxt project

🚀 Deploy

The hosting of the website is made available by connecting this GitHub repository to Netlify.

When deploying, the command script and environment variable(s) needs to be defined under Build & deploy | Site settings on Netlify.

Command scripts :

# Classic SSR build
npm run build
# Prerendering routes to optimize SEO and response time
npm run generate

⚗️ Nitro used by Nuxt 3 will detect automatically Netlify hosting and deploy with preset='netlify'

Environment variable(s) :

⚖️ License

MIT License © Benjamin Oddou