My portfolio website

milad-afkhami.com 🔗

Made with React.js, Next.js, and style-wiz but not coffee. Used Vercel for deployments since it is highly featured and easily configurable with Next.js.

1. Features 💪🏻

⚡️ No component with more than 100 lines of code except index.css with CSS reset principals. You can run this command git ls-files | xargs wc -l | awk '$1 > 100' in project repository to see it in action.
⚡️ Multi theme structure using style-wiz.
⚡️ Multi language implementation with support for Deutsch and French aside from english.
⚡️ Using ISR(on-demand revalidation), SSG for data fetching as latest technologies as I described here.
⚡️ Global and responsive typography using style-wiz.
⚡️ Enhanced static typing with typescript.
⚡️ Documented with jsdoc.
⚡️ Tested with jest and React Testing Library.
⚡️ Statically analyzed with strict eslint plugins(@typescript-eslint/eslint-plugin, eslint-config-airbnb-typescript, eslint-config-next, and ...).
⚡️ Enhanced code checks using git hooks from Husky.
⚡️ Adhered to conventional commit messages using Commitlint.
⚡️ Enhanced developer experience using bash scripts for operation commands.
⚡️ Comprehensive documentations about style guide and implementations. \

2. Analytic Reports 📐

3. Prerequisites

• Through knowledge of Modern JavaScript, React.js, and Next.js.

4. Environment

• Node.js version upper than or equal to 16.x
• Yarn 1.22.x
• Terminal (one of)
  • Git bash in windows
  • Command line in Linux
• Using anything other than these configurations might cause problems with the below functionalities and I don't recommend it.
  • scripts
  • git hooks

5. Setup

git clone https://github.com/milad-afkhami/portfolio.git
cd portfolio
yarn install
yarn dev

6. Scripts

7. Style Guide

7.1. Code Splitting

7.2. Folder Structure

7.3. JavaScript Style Guide

7.4. React Style Guide

7.5. Import Priority

8. Stylesheets

8.1. Global Styles

I use style-wiz for global stylesheets

8.2. CSS-in-JS

I also use style-wiz for CSS-in-JS.

8.3. Font Icons