⚡ Ysfbenali.com

next-portfolio : My personal website, a basic portfolio for developers, built from scratch with Next.js.

✨ Features

• Support Light & Dark Theme via Tailwindcss.

• High Score on Performance, A11y, Best Practices, SEO and PWA:

  Lighthouse test
  > Page speed test
  > Pingdom test

• Fully Responsive.

• PWA (desktop & mobile).

• A contact form protected by Google Recaptcha powered by Formium.

• Fetches Github projects with most stars using Github GraphQL API.

• Easy to customize.

• One Click Production Serverless Deploy to Vercel.

• Google analytics.

• Prettier, ESLint, Husky and Lint-staged integration.

🚀 Getting Started

1. Grab your Github token from GitHub
2. Create an account at Formium and grab your form endpoint url
3. Grab a Google recaptcha V2 key from Google Recaptcha
4. Create an account at Cal and grab your calendar id.
5. Clone this repo

   git clone https://github.com/ysfBenali/nex-portfolio && cd next-portfolio

6. Run cp .env.development.local.template .env
7. Run nvm use to use the correct node version defined in .nvmrc
8. Run yarn && yarn dev

   Serve with hot reload at localhost:3000

👷‍♂️ Build With

• Next.js
• TypeScript
• Tailwindcss
• Formium
• Google Recaptcha

🧐 What's inside?

A quick look at the top-level files and directories :

├── .husky 				# Husky config (pre-commit hooks, ...)
├── node_modules
├── public
│   ├── assets				# Assets
│   │   ├── contact.svg			# Illustrations from (undraw.co)
│   │   ├── icons			# Icons
│   │   └── thumbnail			# Cover of your website when it's shared to social media
│   ├── fonts				# Self-hosted fonts with @next/font
├── src
│   ├── app				# AppDir
│   │	├── api
│   │	│   └── contact
│   │ 	│ 	└── route.ts		# Route Handler for sending contact form data
│   │	├── error.tsx
│   │   ├── head.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components			# Components
│   │   ├── common			# Common components
│   │   └── modules			# Modules components (About, Contact, Projects)
│   ├──config
│   │   └── next-seo.config.ts	        # Default SEO related tags
│   ├── generated
│   │	├── ...
│   │	└── graphql.d.ts 	        # Generated types from github graphql schema
│   ├── hooks				# Custom hooks
│   │	├── lib
│   │	│   └── utils.ts		# Utils functions
│   └── providers
│       └── ThemeProvider.tsx   	# Theme Provider
├── globals.css 			# Global styles (css variables, colors, classes, ...)
├── package.json
├── tailwind.config.js 			# Tailwind config
├── tsconfig.json 			# Typescript config
└── yarn.lock

📌 Todo

• Improuve Performance, a11y, SEO, PWA .
• Add Blog Section .