jso-lab / picatcher

Site Web de photographe en NextJS

Charles CANTIN - Photographe

A Front-End exercise for certification

A web site using:

• Next.js v12
• Tailwind v3.0
• Built-in MDX v1 support
• Includes modern design with dark & light themes

Application content

This website contains 4 pages:

• Accueil
• Galleries
• Tarifs et prestations
• Contact

The origin of the project

This website was built with this Template. This will create a new repository with this template's files on this GitHub account. Once that is done, a clone was generated and everything was pulling up in new Terminal.

To start installing the project's dependencies by running:

yarn install

Finally, you can run your project locally with:

yarn run dev

In the browser : http://localhost:3000, to see the running project !

Website configuration

The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.

Here are the variables you can edit:

Variable	Description	Options
BLOG_NAME	the name of your blog, displayed below the avatar
BLOG_TITLE	the main header (h1) on the home page
BLOG_FOOTER_TEXT	the text in the footer
BLOG_THEME	the theme to pass to Tailwind	default
BLOG_FONT_HEADINGS	the font-family for all HTML headings, from h1 to h6	sans-serif (default), serif, monospace
BLOG_FONT_PARAGRAPHS	the font-family for all other HTML elements	sans-serif (default), serif, monospace

All of the env variables can be configured through the Wizard or through setting the project's environment variables. It's also possible in the Netlify dashboard (Site settings/Build & deploy/Environment/Environment variables).

The defaults can be changed in utils/global-data.js. You can also remove the variables and hard code blog information where these variables are used in the code base.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS are used in tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT are used in pages/index.js & pages/posts/[slug].js through the globalData object.