## Overview
[AlexMaldonado.DEV](https://www.alexmaldonado.dev/) is a personal portfolio website built from scratch using [React JS](https://reactjs.org/) , [Next JS](https://nextjs.org/) and [TailwindCSS](https://tailwindcss.com/) for the frontend, [Strapi](https://strapi.io/) and [MongoDB](https://www.mongodb.com/) for the backend. I wanted to build a site that would not only serve as a project itself but also give me the opportunity to learn some new technologies. This website has a lot of features that may not be obvious at first glance. 

#### Features
- Toggle light/dark mode 
- Responsive Design with Hamburger menu
- Animated particles background using [TS Particles](https://github.com/matteobruni/tsparticles)
- Glossy translucent navbar on scroll (light mode only) 
- Animated text underlining in about page using Rough Notation (also using [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer)
- Working contact page with google reCAPTCHA 
- API call to an external API (Github) for latest Github repos using [React Hooks for Data Fetching](https://swr.vercel.app/)
- API call to sendgrid for contact form
- API call to Strapi API for  Docs (Project Blog Posts) using Next JS getStaticProps()

This blog will detail how some of these features were implemented and what challenges had to be overcome in order to attain the end result. I chose these technologies not only to learn new tech as mentioned above but also to ensure my site was easily maintainable and scalable as my career in tech evolves. Not all these features are completely new. Many I have stumbled across while browsing many developer blogs, articles and portfolios in which I will do my best to link when appropriate. Hope that you can find something interesting to add to your own project!

> Most of these examples will be from the point of view of a React JS, Next JS project. 

> These are not extensive tutorials but some technical overviews. 

<h3 id="table-of-contents" style="padding-top: 64px; margin-top: -64px;">
Table of Contents
</h3>

- [Dark Mode with TailwindCSS](#dark-mode)


#### Dark Mode
<details >
<summary> Read more...</summary>
<br>

It seems like most websites and applications these days have the ability to toggle light and dark mode. And if you are wondering, I always opt for dark mode whenever possible! 🌛 With that being said, this was one of the top frontend priorities for my application. There are many ways to accomplish this. Being someone that isn't the biggest CSS fan, I chose to use [TailwindCSS](https://tailwindcss.com/) as my CSS framework. Luckily implementing dark mode is dead simple using Tailwind! It should be noted that its easy to set up dark mode styles as you do regular styles in TailwindCSS. You just prepend any style you want in dark mode with "dark:" The following example is from the [TailwindCSS Docs](https://tailwindcss.com/docs/dark-mode) in which you can find more information.

```javascript
<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>
```

##### **Configuration:** 
Once TailwindCSS is integrated into your NextJS project ([Installing TailwindCSS](https://tailwindcss.com/docs/guides/nextjs)) there will be a few things you need to add to your tailwind.config.js file. First you must configure the purge option and add all pages and components. This causes any unused TailwindCSS to be purged for production builds in order to optimize your application. 

We then want to make sure the darkMode option is set to 'class' since we will be using this class to toggle light/dark mode. This is all we need to do with our tailwind.config file. 

```javascript
  module.exports = {
   purge: [],
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
```
 
We will then use [next-themes](https://github.com/pacocoursey/next-themes) to easily keep track of and set our theme. In our app component we will import ThemeProvider and wrap our components. 

```javascript
import { ThemeProvider } from 'next-themes'

function App({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App
```

Now you can import the useTheme hook in the component you will be toggling the dark mode. **Theme** will be the current state of your theme. In this case  'light' or 'dark'. You can then use setTheme() to change the theme. Since we are setting up a toggle function, inside setTheme() we can set up a ternary operator to toggle the theme between light and dark. 

```javascript 
import { useTheme } from 'next-themes';

const toggleDarkMode = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Light Mode
      </button>
    </div>
  );
};
```

At this point you should be able to toggle between dark and light mode!🌛 🌞 We are not completely in the clear though just yet. You may notice that if you set up your toggle button with different icons depending on what the current theme is (like my site) there may be a mismatch of what icon is showing and the current theme. Thankfully the solution to this situation lies in the [next-themes docs](https://github.com/pacocoursey/next-themes)! 

The reason for the bug is that we cannot know the value of the theme until the component is mounted and the DOM is rendered. So our UI has no idea whether to render the dark mode icon or light mode icon. It's important to understand the value of theme is coming from the client side and not server side. The fix is to only render the part of the UI responsible to toggling the theme **after** mounting has occurred.

```javascript 
import React, { useState, useEffect } from 'react';
import { useTheme } from 'next-themes';

const toggleDarkMode = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  return (
    <div>
      <h1>Welcome to my site!</h1>
      {!mounted ? null : (
        <button
          className=''
          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
        >
          {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
        </button>
      )}
    </div>
  );
};
```
Now we have a perfectly functioning dark/light mode toggle button! Go ahead a scroll back to the top of any of my pages and click the moon or light-bulb icon to give it a try!
Resources I used to implement this feature:
- [https://egghead.io/blog/tailwindcss-dark-mode-nextjs-typography-prose]()
-  [next-themes](https://github.com/pacocoursey/next-themes)
- [TailwindCSS Dark Mode Docs](https://tailwindcss.com/docs/dark-mode)

[back to top](#table-of-contents)
</details>





Dev Portfolio Site

thumbnail_website_logo.png

website_logo.png

JavaScript-F7DF1E.svg

Tailwind_CSS-38B2AC.svg

React-20232A.svg

strapi-#2E7EEA.svg

Next-black.svg

large_dev-portfolio.png

medium_dev-portfolio.png

small_dev-portfolio.png

thumbnail_dev-portfolio.png

dev-portfolio.png

A brief discussion on the tech choices and challenges of this project...

AlexMaldonado.DEV

Project Documentation

Dev Portfolio Site

A brief discussion on the tech choices and challenges of this project...