Skip to content

murshidazher/zen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Next JS GitHub package.json version Netlify GitHub Blazing Fast code style: prettier

  • ⚡️ My personal website — 2023 edition

Table of Contents

Getting Started

Pre-requisite

💡 We use pnpm as a drop-in replacement for npm for better package management

  1. Install either asdf or nvm to manage your node version.
  2. Install the node version mentioned in the .nvmrc file.
# if you're using asdf
asdf install nodejs
# if you're using nvm
nvm install
  1. Install pnpm globally as package manager,
npm install -g pnpm
  1. You need a postmark account for sending contact emails.
  2. You need a cloudinary account for image hosting.

Up and Running

Clone the repository and install dependencies

git clone git@github.com:murshidazher/zen.git
pnpm i

Create an .env.local file with the following variables:

NEXT_PUBLIC_SITE_URL=                   # The local / hosted url (i.e. http://localhost:3000)
EMAIL_ADDRESS=""                        # The email address to send emails
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""    # Add your cloudinary name

To start the development server

netlify link    # link the netlify repo to get site id
netlify build   # build the deps
netlify dev     # run the development server with email functionality

Contact email setup

💡 Read more on setup and usage of postmark & netlify and env variable config.

Set the email directory to in,

NETLIFY_EMAILS_DIRECTORY="./functions/mail/templates"

To check the email provider api locally,

netlify dev     # run on port http://localhost:8888/.netlify/functions/emails

Inspirations

  • Hayden Bleasel - Most of the component styles were heavily inspired and taken from this portfolio.
  • 🗞️ Siddharth Arun - The website layout.
  • 📦 radix - UI elements.
  • ⚙️ shadn - Components and styles.
  • 🫐 qoals - Blended Blur Background.

Typeface

The primary typeface used is Inter, a sleek and minimalist sans-serif font, while Google Sans is employed for the headings.

License

MIT © 2023-present Murshid Azher.