Benjamin Oddou Photographe

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

🦾 Main Technologies

Design

Front-End

Back-End

IDE and Production

✨ 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

🛠️ 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 :

Use the cURL command to download a sample response under tmp folder.
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

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

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 :

MAJOR version is incremented when you add breaking changes, e.g. an incompatible API change
MINOR version when you add functionality in a backwards compatible manner
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

Install tree via HomeBrew
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

Create a file named my.key with a private API key at the root of the project
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 🤐)
├── .github # Assets for GitHub repo
├── .gitignore # List of files that should be ignored 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 connection 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
├── CHANGELOG.md # File that tracks all changes
├── CODE_OF_CONDUCT.md # Code of conduct
├── CONTRIBUTING.md # Contributing guide
├── LICENSE # MIT License
├── README.md # This document 👋
├── app # Application files, see https://nuxt.com/docs/4.x/guide/directory-structure/app/app
│   ├── app.vue
│   ├── assets
│   │   ├── css
│   │   │   └── tailwind.css
│   │   └── svg
│   │       └── checkmark.svg
│   ├── components
│   │   ├── FAQquestion.vue
│   │   ├── TheMenuLink.vue
│   │   ├── svg
│   │   │   ├── ArrowButton.vue
│   │   │   ├── Awwwards.vue
│   │   │   ├── LogoBO.vue
│   │   │   ├── MenuGit.vue
│   │   │   ├── MenuInsta.vue
│   │   │   ├── MenuMail.vue
│   │   │   └── MenuYtbe.vue
│   │   ├── theAlert.vue
│   │   ├── theCursor.vue
│   │   ├── theFooter.vue
│   │   ├── theForm.vue
│   │   ├── theHeader.vue
│   │   ├── theMenu.vue
│   │   └── thePreloader.vue
│   ├── error.vue
│   ├── pages
│   │   ├── about.vue
│   │   ├── gallery.vue
│   │   └── index.vue
│   ├── plugins
│   │   ├── gsap.client.ts
│   │   └── vue-masonry-wall.ts
│   ├── types
│   │   ├── gsap.d.ts
│   │   └── imgkit.d.ts
│   └── utils
│       ├── index.ts
│       └── piniaStore.ts
├── eslint.config.js # ESLint config file
├── 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
├── public
│   ├── _redirects
│   ├── apple-touch-icon-180x180.png
│   ├── banner.jpg
│   ├── browserconfig.xml
│   ├── favicon.ico
│   ├── logo.png
│   ├── maskable-icon-512x512.png
│   ├── me.jpg
│   ├── mstile-150x150.png
│   ├── pwa-192x192.png
│   ├── pwa-512x512.png
│   ├── pwa-64x64.png
│   ├── robots.txt
│   └── safari-pinned-tab.svg
├── pwa-assets.config.ts # PWA assets configuration file
├── scripts
│   └── init.sh # Initialization script
├── server # Directory which registers API and server handlers (Nitro routes) with HMR support
│   ├── api
│   │   └── imgkit.ts # ImageKit API endpoint (acts as a proxy)
│   └── routes
│       └── sitemap.xml.ts # Sitemap generator
├── tailwind.config.js # Tailwind config file
├── 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 ❌)
└── tsconfig.json

🚀 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) :

Name		Name	Last commit message	Last commit date
Latest commit History 114 Commits
.github		.github
.husky		.husky
.vscode		.vscode
app		app
public		public
scripts		scripts
server		server
tmp		tmp
.commitlintrc.json		.commitlintrc.json
.gitignore		.gitignore
.versionrc.json		.versionrc.json
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
netlify.toml		netlify.toml
nuxt.config.ts		nuxt.config.ts
package-lock.json		package-lock.json
package.json		package.json
pwa-assets.config.ts		pwa-assets.config.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Uh oh!

License

BenjaminOddou/portfolio

Folders and files

Latest commit

History

Repository files navigation

Benjamin Oddou Photographe

🦾 Main Technologies

Design

Front-End

Back-End

IDE and Production

✨ Code Usage and Contribution

Code Usage

Contribute

👨‍💻 Environment (for OSX or Linux)

NVM

Node.js and npm

🛠️ Setup

Command-line interface (CLI)

Dotenv CLI

Quicktype CLI

Packages

GitHub Hooks

📜 Scripts

Nuxt API commands (see Documentation)

Run development server

Build / Generate the app

Preview the app

Upgrade nuxt version

Update npm packages

Format the code

Push a release on GitHub

Semantic versioning

First Release

GitHub Hooks

Create a performance report

Print the structure of the project

Encoding API key to Base64

Fetch Data from ImageKit API

Using cURL

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

🏗️ Structure

🚀 Deploy

⚖️ License

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages