@data_messe portfolio and blog site

This is the code for my personal website https://datamesse.github.io, designed by me using HTML, CSS, Markdown, and JavaScript with React.js and GitHub Pages. No boiler site templates like Jekyll are used.

Evolution of my site's design

September 2021 (Version 1)

My initial design was a basic 2 page layout for a project portfolio and my blog. For each project I displayed a year-month label and the logo of the technology used.

Credit: The JavaScript code that renders blog post data from markdown to "separate" web pages was from a YouTube tutorial by Will Ward.

I wanted a clean and easy to look at light-blue and light-grey smooth-edged design.

The video banner background "Communication Line Technology" is used free from pixabay.com by ArtDio2020.

Archived source files are here: https://github.com/datamesse/datamesse.github.io/tree/main/src/z_version1

May 2022 (Version 2)

I updated the layout to be minimalistic with new sections including recent blog post preview, skills assessment, and contacts sections. The style is based on a YouTube tutorial by Shuvam Kumar a.k.a Overreacted.

The JavaScript title switch animation code was by Ajay Narain Mathur on Stack Overflow.

Archived source files are here: https://github.com/datamesse/datamesse.github.io/tree/main/src/z_version2

December 2022 (Version 3)

I merged the technical style and colour scheme from Version 1 with Version 2's layout. On the front page, each project has the name and logo of the main technology used. It is re-designed as a compact portfolio preview gallery, but has a button to a full portfolio page with code links.

Source files are here: https://github.com/datamesse/datamesse.github.io/tree/main/src/z_version3

July 2023 (Version 4)

My previous design (Version 3) did not fully accommodate for landscape and higher desktop resolutions. So I redid my entire site's CSS code from scratch using a more responsive design with prolific use of vh and vw for visual scaling, and adopting display: grid and z-index attributes to better overlay div elements. The end result is cleaner code for a futuristic tech-styled mobile design that retains its simple vertical layout even when viewed on a landscaped desktop.

Source files are here: https://github.com/datamesse/datamesse.github.io/tree/main/src

Here are some asset references for this version:

• Gear used in the background by TheDigitalArtist from Pixabay https://pixabay.com/vectors/art-circle-design-pattern-science-7147602/

• Another gear used in the background by TheDigitalArtist from Pixabay https://pixabay.com/vectors/cyber-tech-circle-rings-pattern-7153617/

• Polygon world map used in the background by GDJ from Pixabay https://pixabay.com/vectors/triangles-triangular-low-poly-1289379/

• Patawan Island beach photo used in the background by Kris Guico from Unsplash https://unsplash.com/photos/rsB-he-ye7w

• mp3 tracks "Time Flows", "Small Discoveries", and "Good Mood For No Reason" by Evgeny_Bardyuzha from Pixabay https://pixabay.com/users/evgeny_bardyuzha-25235210/

• Button sound effects are from https://mixkit.co/free-sound-effects/

Useful tools and references

CSS clip-path polygon creation tool by Bennett Feely

• BennettFeely.com/clippy/

CSS glowing of div elements taken from this Stackoverflow post

• https://stackoverflow.com/questions/34821217/easily-create-an-animated-glow

Animated gif creation by recording screen

• ScreenToGif.com

Font to SVG path creation tool by Dan Marshall

• DanMarshall.github.io/google-font-to-svg-path

Software logos and other art were used from:

• Flaticon.com
• Icons8.com
• IconsScout.com
• StorySet.com
• Wikimedia.org
• WorldVectorLogo.com
• FreeSVG.org/full-moon

Screen resolution emulator to test website design

• Screen Emulator by Elizabeth Mitchell

SVG creation tools:

• https://boxy-svg.com/
• https://yqnn.github.io/svg-path-editor

Text to PNG:

• https://www.coolgenerator.com/png-text-generator

See instructions below on how to create your own GitHub Pages site.

How to create a React.js site and deploy to GitHub pages

Based on a post by Ibrahim Ragab

• https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f

Initial set up

Requirement: Install Node.js on your machine, and install React as a local dependency

npm install -g create-react-app

1. From GitHub, create a new Repository and link it to an empty folder on your machine as your app's local copy via GitHub Desktop. In this example, the folder will be called "datamesse.github.io".

From the Repository's Settings, scroll to the bottom, click GitHub Pages and publish the site to https://datamesse.github.io/.

2. From Command Prompt, navigate to the parent directory of the empty folder.

create-react-app datamesse.github.io
cd datamesse.github.io
npm start

3. From Visual Studio Code, start building the app, and watch it render via http://localhost:3000/.

4. Install additional dependencies needed for the blog post component.

npm i react-router-dom react-markdown

5. Update package.json with

  "scripts": {
    "server": "node src/scripts/main.js"
  },

Initial push to GitHub Pages

1. From Visual Studio Code's terminal, install GitHub Pages.

npm install gh-pages --save-dev

2. From Visual Studio Code, add homepage, predeploy, and deploy attributes to the package.json file.

{
  "homepage": "http://datamesse.github.io/"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
  },
}

3. Parse the files in the pages and post data so they can be used as a data source from the data/ folder.

npm run server

4. From Visual Studio Code, build the deployment. Patiently wait until the last line of code "Published" appears.

npm run deploy

Note: It is important to let the process complete fully, otherwise you may get errors that may require rebuilding from scratch.

5. From GitHub, change the GitHub Pages setting to deploy from branch gh-pages.

6. From GitHub Desktop, push the changes (the Current branch selected should still be main by default, do not change this).

Note: You will only see the changes you applied to the source files in GitHub Desktop for the push, not the compiled file changes that will end up deployed to gh-pages branch. This is normal.

7. From the GitHub repository's Settings, change Source branch from main to gh-pases. Remember from GitHub Desktop, that main should remain selected as the branch for pushes.

Subsequent changes and new blog posts then pushing updates

1. It isn't mandatory, but it may be helpful to empty out the src/data/posts.json and pages.json files, then run the following to repopulate them afresh.

npm run server

2. From Visual Studio Code, rebuild for gh-pages.

npm run deploy

3. From GitHub Desktop, push the changes (again, it should still be defaulting to the main branch).

Note: If you make a change to the source code and push it without building first, no changes will be reflected on the gh-pages branch. So ensure that when trying to push gh-pages build changes, that something in the source files has been changed, otherwise GitHub Desktop won't detect anything for the push.

Note: If you hit an error whilst performing the push, it may be relating to number/size of files being sent, in which case from GitHub Desktop, try repushing, otherwise click the History tab and undo or reverse the commits that are pending, and resend the changes in smaller amounts.

Using anchor tags for same page navigation

Based on this Stack Overflow post: https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4

1. Import React Router HashLink.

npm install --save react-router-hash-link

2. Add HashLink to the React component.

import { HashLink as Link } from 'react-router-hash-link';

3. Add link to React component.

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

4. Add the div id reference to the React component.

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>

Adding site preview image in head tag

Some social sites like LinkedIn can display preview images (including gifs) just by providing them your site's URL. They retrieve the image information from the head tag of your site. In my case, I defined this from the index.html file.

index.html

<head>
  <meta content="1264" property="og:image:width"/>
  <meta content="https://raw.githubusercontent.com/datamesse/datamesse.github.io/main/src/assets-portfolio/img-2022-12-portfolio-website-react-v3-fast.gif" property="og:image"/>
  <meta content="799" property="og:image:height"/>
  <meta content="https://datamesse.github.io/#/" property="og:url"/>
</head>

Then from LinkedIn, go to your Featured section > + button > Add a link > and provide your site URL without adding a Preview image. The image you embedded in index.html will be rendered upon saving.

Adding a carousel

I used this YouTube video How to make horizontal scroll item - CSS Tricks by Laravel Article as a guide to help me create a vertical carousel design for my portfolio and blog components (rather than a horizontal one which felt less natural to navigate).

Adding music bar animation

I used this "Animated music bar with CSS blog post by Samuel Kraft to add a subtle music bar mini-animation to the site's header.

ARCHIVED: Adding donut charts for skill sets (used in design version 2)

Based on this Youtube tutorial by Rizwan Khan.

Other important links below:

• Official website for React Circular Progressbar

• Sample code on how to customise the progress bar

1. Install React Circular Progressbar

npm install react-circular-progressbar

2. Import the following reference and stylesheet into your React component.

import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

3. Add the progressbar component. Note there are many variations (i.e. components to choose from), and the example below is one where you can add div elements inside the donut chart.

<CircularProgressbarWithChildren
    strokeWidth={3}
    value={100 - skill.score}
    styles={buildStyles({
        pathColor: "#23a9f2",
        trailColor: "#E9F6FE"
    })}>
    <label className='skill-name'>{ skill.shortname }</label>
    <img className='skill-icon'
      src={ skill.icon }
      alt={ skill.name }
    />
    <label className='skill-score'>Top {`${ skill.score }%`} of {skill.taken}</label>
    <label className='skill-date'>{skill.shortdate}</label>
</CircularProgressbarWithChildren>