My personal website dedicated to photography πŸ“Έ

Overview

Benjamin Oddou Photographe

Netlify Status made with hearth by Benjamin Oddou saythanks Contributor Covenant

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 personnal 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
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh

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 [email protected]

VSCode

  1. Install Visual Studio Code
  2. Install the following extensions :

πŸ› οΈ 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

  1. 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
β”œβ”€β”€ .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
β”‚   β”œβ”€β”€ svgs # svgs used in the website
β”‚   β”‚   └── checkmark.svg
β”œβ”€β”€ components # The components/ directory is where all Vue components can be imported inside pages or other components
β”‚   β”œβ”€β”€ FAQquestion.vue
β”‚   β”œβ”€β”€ TheAlert.vue
β”‚   β”œβ”€β”€ theAwwwards.vue
β”‚   β”œβ”€β”€ theCursor.vue
β”‚   β”œβ”€β”€ theFooter.vue
β”‚   β”œβ”€β”€ theForm.vue
β”‚   β”œβ”€β”€ theHeader.vue
β”‚   β”œβ”€β”€ theImgDrag.vue
β”‚   β”œβ”€β”€ theMenu.vue
β”‚   β”œβ”€β”€ TheMenuLink.vue
β”‚   β”œβ”€β”€ thePreloader.vue
β”‚   └── theTransition.vue
β”œβ”€β”€ composables # Auto imported functions
β”‚   β”œβ”€β”€ piniaStore.ts # State Management store functions
β”‚   └── utils.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.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

You might also like...
Personal project of a website where you can, given a filter, check in wich film photography lab you can develop your film.
Personal project of a website where you can, given a filter, check in wich film photography lab you can develop your film.

Personal project of a website where you can, given a filter, check in wich film photography lab you can develop your film.

Personal-website - My personal portfolio website, made using VueJS and the Pexels API

personal-website Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Source code for TSUYOSHI OCHIAI PHOTOGRAPHY (https://occhi.jp/photo)

tsuyoshi-ochiai-photography Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production np

CoreUI Icons for Vue.js. Dedicated component used to implement CoreUI Icons SVG set in Vue.js.

CoreUI Icons Vue CIcon component Dedicated component used to implement CoreUI Icons SVG set in Vue.js. Features Can load icons in three ways: stored g

A plugin dedicated for vue3 to show confirm dialog modal

A plugin dedicated for vue3 to show confirm dialog modal. Currently the plugin works only with composition api.

Dedicated components used to implement Chart.js in Vue.js

Coreui Vue Chartjs library Description Dedicated components used to implement Chart.js in Vue.js. You can find the CoreUI Vue library documentation he

 Dedicated Vue IDE built to streamline your development process
Dedicated Vue IDE built to streamline your development process

vuety Logo by Natsuki Wada BIRDZ'EYE by Team Vuety Dedicated Vue IDE built to streamline your development process Table of Contents About The Project

Dedicated Vue IDE built to streamline your development process
Dedicated Vue IDE built to streamline your development process

Dedicated Vue IDE built to streamline your development process

My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.
My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.

chengpeiquan.com My personal website. Base on Vite 2.0 and Vue 3.0. You can see Rewrite in vite to learn more. Architecture License MIT License Β© 2021

[WIP] My personal website, built with Nuxt.js & Tailwind, and deployed @netlify

portfolio Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

My personal website, built with Nuxt.js & Tailwind, and deployed @netlify

portfolio Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

Personal website with Vue.js + Vite and Bootstrap

Personal website with Vue.js + Vite and Bootstrap

This is a simple, minimal and responsive personal website template, built using vue-js, html and css.

My Portfolio πŸ– This is a simple, minimal and responsive personal website template, built using vue-js, html and css. πŸ’» Live demo Table of Contents I

My personal website, made with Nuxt.js

snturk.co Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

My personal portfolio website, built using Nuxt.js & Tailwind CSS.

client Build Setup # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch serv

My personal website/portfolio built with Nuxt and Storyblok CMS.
My personal website/portfolio built with Nuxt and Storyblok CMS.

Multilingual JAMstack site built with Nuxt.js, styled with SCSS (BEM methodology) and deployed on Netlify.

My personal website/portfolio built with Nuxt and Storyblok CMS.
My personal website/portfolio built with Nuxt and Storyblok CMS.

My Portfolio Multilingual JAMstack site built with Nuxt.js, styled with SCSS (BEM methodology) and deployed on Netlify. I used Storyblok CMS and its i

my first vue.js app, and my personal website.

www.leoo.tech Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints

My New Personal Website. I made this as simple as possible

dimasandhika Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

Advanced blog made with VueJS Website is not mine its just a demo

Bloggy Advanced blog made with VueJS and NuxtJS Demo Download beta from releases. Works with vercel and netlify. Designed with Windi CSS No CSS used.

Mehmet Ali 8 Feb 21, 2022
An e-commerce website using Vue, typescript , pinia store, and service layer design pattern.

An e-commerce website using Vue, typescript , pinia store, and service layer design pattern. Don't bother about how the repository name fits the description.,Github suggested it. I would have used an

Cheedinmar 1 Oct 29, 2021
Simple website to add Polygon Mainnet and Mumbai network to Metamask

VueJS Polygon (previously MATIC) starter If you need a clean starter with a simple connection to Web3 and Polygon start from there. You can see a prev

null 3 Aug 14, 2021
E-Commerce website mock-up built using VueJs

E-Commerce Web App Built Using: VueJs, MirageJs Project Link: https://e-commerce.goodfunfriday.com/ Description The Web App was used as a store front

Tristan Lim 0 Dec 28, 2021
Vitesse for Nuxt 3 - Twitter shadowban checker website's frontend

Vitesse for Nuxt 3 ?? Working in Progress ?? Online Preview Features ?? Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules.

Plat 2 Oct 4, 2022
An woodwork website made in VueJS

An woodwork website made in VueJS

Daniel VinΓ­cius 1 Feb 28, 2022
A lightweight Nuxt template to write a Markdown driven website, based on Nuxt Content, WindiCSS and Iconify.

A lightweight Nuxt template to write a Markdown driven website, based on Nuxt Content, WindiCSS and Iconify.

null 3 May 30, 2022
Static website build by vue3 + vite + vueRouter + typescript + tailwindcss + nginx

hao yang This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur) + TypeScrip

null 1 Jun 15, 2022
A website w/ CMS boilerplate using Directus for backend CMS and Nuxt (w/ Tailwind CSS) for frontend

Nuxtus A website w/ CMS boilerplate using Directus for backend CMS and Nuxt (w/ Tailwind CSS) for frontend. The purpose of this template is to be a qu

null 50 Nov 20, 2022
A terminal style interactive website built with Nuxt3.

Terminal.me A terminal style website. The Nuxt3 version of m4tt72/terminal. Motivation Unix-like amateur Frontend/Web enthusiast Vue/Nuxt fan Open sou

Kurt 3 Oct 25, 2022