/developer-portfolio

Web developer portfolio created using NextJS, TypeScript, Tailwind CSS and Framer Motion.

Primary LanguageTypeScript

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

themelight

Desktop View - Dark Mode

themedark

Google Rating

lighthouse

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.