How I crafted my own portfolio and put it on the Internet

Mangor1no — Mon, 10 Oct 2022 14:39:23 +0000

Hello there 👋

This is the first time ever I post anything on Dev.to. I've been lurking in the shadow, reading all kind of interesting posts here and finally I think it's time to write my own post to contribute something to the forum.

What I planned was to create my own portfolio and put it on the internet, so HR and other developers can find me easily. Howerver, since I was ~~lazy~~ busy at work, it stayed on my backlog for a long time. Until last week, I finally decided to start working on it after reading this nice article on the forum. Shout out to Naomi for the motivation and inspiration.

How I choose techs for my portfolio 👀

I decided to start working on the portfolio with my most favourited framework: NextJS. The reason why I chose NextJS instead of writing my portfolio using normal React is the ability to SEO. Also since I kinda hate to do the routing in React using react-router-dom, NextJS routing system is my go-to. For now, my portfolio only have one route, but I'm planning to add a new blog page to my website, so it's better to get prepared first.

Also, let's not forget about TailwindCSS. The first time I used it, I felt in love with the library almost immediatetly. TailwindCSS helps me to create a very well-structured CSS in the codebase, and I'm using it in almost every projects I'm working on.

Steps to make my dream portfolio comes true

Let's get started by running the command to create the initial project

yarn create next-app

By default, NextJS will come with eslint pre-installed. I will add another library called prettier and use it along with eslint to control my code's quality. Also, I install a plugin called prettier-plugin-tailwindcss to auto sort my TailwindCSS classes.

yarn add --dev prettier eslint-config-prettier prettier-plugin-tailwindcss

This step here is my own preference, you can skip it or follow it. But I think it's always good to have a barrier preventing you from falling into the abyss.
My Prettier and ESlint configuration will look like this:

Next step we need to install TailwindCSS. More commands 👀

yarn add --dev tailwindcss postcss autoprefixer
npx tailwindcss init -p

The first command will add the library into devDependencies inside your package.json file. You can check out the different between dependencies and devDependencies here. The second command will create 2 files: tailwind.config.js and postcss.config.js. We need to add some lines of code into tailwind.config.js file and import @tailwind directive into the global css file to make it works.

Also, I will add property darkMode: 'class' into tailwind.config.js to control my portfolio's dark mode using classes.

Let's talk about the font. I found that the font Inter looks attractive and clear, so I used it as the main font for my portfolio. Let's open google font and grab the font we need, created a file called _document.js inside our project and put the tags into our file.

After that, we can setup the absolute import function for our project to prevent ugly ../../../../components/OurNiceComponent.js thingy. Luckily, NextJS starts automatically support jsconfig.json "paths" and "baseUrl" options since Next.js 9.4, so we just need to create a new file called jsconfig.js, add the configuration like this and it will work nicely.

The result after we have absolute import working

This looks much nicer in general, isn't it?

Now, we start coding. I won't dive too deep in my codebase, since you can check it out in my Github repo. However, I do have some points that I found they are quite interesting, and will share with you guys how I handled them.

Flash of unstyled content
Website optimization

Flash of unstyled content

The most important thing you need to do when setup dark mode for your website is to keep the theme selected by the user. Normally, you can save a key to localStorage to identify the selected theme.

const [darkMode, setDarkMode] = useState(false)

const initDarkMode = () => {
  const isDarkMode = localStorage.getItem('your-theme')
  if (isDarkMode === 'dark') {
    setDarkMode(true)
  } else {
    setDarkMode(false)
  }
}

useEffect(() => {
  initDarkMode()
}, [])

const changeThemeHandler = (theme) => () => {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark')
    setDarkMode(true)
  } else {
    document.documentElement.classList.remove('dark')
    setDarkMode(false)
  }
  localStorage.setItem('your-theme', theme)
}

return (
  <button type="button" onClick={darkMode ? changeThemeHandler('light') : changeThemeHandler('dark')}>
    Change theme
  </button>
)

The code block above will help you to set the theme base on the value of the key your-theme in localStorage. However, when you refresh the browser, you will start notice a problem: Your website will flash a white screen before it changes to dark theme. This problem happens because the function initDarkMode() is being placed inside useEffect(), which runs after the content has been rendered.

The solution for this problem is quite simple. Open the file _document.js and add the script below inside the <Head /> tags.

<script
  dangerouslySetInnerHTML={{
    __html: `
      (function () {
        const themeKey = 'your-theme';
        const classNameDark = 'dark';
        const classNameLight = 'light';

        function setClassThemeOnDocumentBody(darkMode) {
          if (darkMode === 'dark') {
            document.documentElement.classList.add(classNameDark);
          } else {
            document.documentElement.classList.remove(classNameDark);
          }
        }
          let localStorageTheme = null;
          try {
            localStorageTheme = localStorage.getItem(themeKey);
          } catch (err) {}
          const localStorageExistsTheme = localStorageTheme !== null;

          // Determine the source of truth
          if (localStorageExistsTheme) {
            // source of truth from localStorage
            setClassThemeOnDocumentBody(localStorageTheme);
          } else {
            // default theme is light theme
            localStorage.setItem(themeKey, 'light');
          }
      }());
    `,
  }}
/>

By adding this small script, we are able to block the browser rendering and set the theme before browser paints our page. No more flashing 👌.

Website optimization

There are plenty of ways to check how optimized your website are, but my favourite way is using Google Audit. The tool will give you an insight about your website, including website's Performance, Accessibility, Best Pratice and SEO. On my first audit, the performance score for my portfolio was 84, which was kinda bad for a simple page.

The first thing I did is to compress my images. But since my portfolio only have one image, there was no significant change. Back to the audit report, I noticed that my First Contentful Paint (FCP) time was long, and the tool said I should avoid chaining critical requests. A little bit more inspection and I found out that the font size downloaded from Google Font is too large. In fact, the requests size for this font was more than 136kB per font type, added up to more than 340kB in total!

As every normal developers, I started begging Google for help. I bumped into this article, and after applied this method to my portfolio.

<link
  rel="preload"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap&text=1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM%22%27%28%29%2C%2D%2E%3A"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap&text=1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM%22%27%28%29%2C%2D%2E%3A"
  rel="stylesheet"
/>

By adding text query to the url and use only needed characters for the font, my total requests size for the font was less than 40kB in total. It means I have reduced nearly 90% of requests size. Stunning result! 😳

Here is my portfolio audit score after the optimization:

Put the portfolio on the Internet

I bought a cheap domain and used Vercel to host my portfolio. The integration was quite easy and fast, I just updated the CNAME and IP Address of Vercel to my domain and it did the rest of the works for me. Thanks Vercel for bringing such an amazing deployment experience to the developers!

Final words

Thank you for spending time to read my long article 🙇‍♂️.

You can checkout my portfolio here.

If you want to find the codes, please checkout my Github repository

DEV Community: Mangor1no