Portfolio 2022

Live demo

https://portfolio-2022-turbo-next.vercel.app/

Installation

pnpm install
pnpm prepare

Development

pnpm dev

Deployment

pnpm build

Packages

• theme
  • Theming based on Emotion.js
• ui
  • General UI package
• utils
  • General utilities
• eslint-config-custom
  • Basic config for ESLint
• tsconfig
  • Basic config for TypeScript

Dependencies

• Project management
  • Turborepo: Mono-repo management build system
• React related dependencies
  • Next.js: Web framework
  • Recoil: State management
  • Emotion.js: CSS-in-JS
  • Framer Motion: Animation library
  • React Parallax Tilt: Tilt hover effect
  • Leva: GUI for React
• 3D
  • Three.js: JavaScript 3D library
  • React Three Fiber: React renderer for threejs
  • drei: React Three Fiber helpers
  • glslify: Module system for GLSL
  • r3f-perf: Performance monitor
• Development
  • TypeScript: Typed JavaScript
  • Husky: Git hooks
  • ESLint: Linter tool
  • Prettier: Code formatter

Environment

• Node.js: JavaScript runtime
• pnpm: Package manager

Version information is in .tool-versions file.

Special Thanks

Great resources for learning:

• Three.js Journey: Three.js
• WebGL School: WebGL
• AWWWARDS ACADEMY: Web development
• Meta Frontend Developer: React development