Developer Portfolio

This is a remake of my portfolio: ellisenobun.com, originally built in vanilla ReactJS. This remake takes a slightly different approach, resulting in a more SEO, accessible and performant outcome.

Desktop View - Light Mode

Desktop View - Dark Mode

Google Rating

Technology Used

• NextJS

  • Server Side Rendering
  • Static Generation
  • Image optimization feature
  • Built in typescript, css module & scss support

• TypeScript

  • Javascript in the "right" context

• Tailwind CSS

  • Intuitive CSS

• next-themes

  • Allows for dynamically changing theme color

• Framer Motion

  • Cool Animations

Milestones

• Project Setup
  • Install typescript: npm i -D typescript @types/react @types/node
  • Install tailwindcss: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  • Initialize tailwindcss & postcss config: npx tailwindcss init -p
  • Remove unused styles in production (tailwindcss.config.js).
  • Include Tailwind in global styles.
• Implement Dark Mode
  • Change dark mode in tailwind.config.js to class. This is for manual toggling.
  • Install next-themes.
  • Wrap the application in _app with the ThemeProvider.
  • Add the class attribute to the provider.
  • Keep track of the theme color in Sidebar using hooks.
  • Create function to change theme.