NogiPersona

TL;DR

It's an upgraded version of the old project NogiFiles, which is a website for quickly looking up the profiles of the Nogizaka 46 members.

What's New

In this new version, I not only updated the old information, but also practice some new trending stuffs:

• react-hooks

  Back to the times of making 'NogiFiles', react hook was not yet a dominant trend in React developing.

• TailwindCSS

• react-router-v6

  The old project uses HashRouter, in this project, I'd like to embrace the new technology of the react-router-v6.

  ⚠️ github-page doesn't support client-routing (reference)

• Netlify Deployment

• Loading images without Cumulative Layout Shift (CLS)

  I tried to convert all the image resources to Progressive JPEG but it didn't work out as expected. It seems to be helpful for Largest Contentful Paint (LCP) not for CLS.

  the shell script for converting all images to progressive images was like this:

  #!/bin/bash
  # Loop through all the .jpg files in the directory
  for file in *.jpg; do
      # Check if the file is a regular file
      if [[ -f "$file" ]]; then
          # Create a temporary file name
          temp_file="${file%.jpg}_temp.jpg"
          
          # Transform the image to progressive JPEG using jpegtran
          jpegtran -progressive -copy none -outfile "$temp_file" "$file"
          
          # Replace the original file with the progressive JPEG
          mv "$temp_file" "$file"
          
          echo "Converted $file to progressive JPEG."
      fi
  done
  
  echo "All .jpg files converted to progressive JPEG."

  Hence, I then use the div to paint the placeholder before the image was loaded to address the CLS issues.

Demo

https://nogipersona.netlify.app/