First Portfolio Website

A simple website that I'm using as my portfolio for the time being.

"Alexander Hamilton... my name is Alexander Hamilton... There's a million things I haven't done... but just you wait... just you wait..."

My very first Portfolio website... (Kept thinking to myself "how/why the hell haven't I built one all these years? o.O" - well now I have, lol ). Built with node-sass html5 css3 and a little javascript ES6.

What it is

A simple, reponsive portfolio website. Built with:

HTML
CSS
Vanilla JS - ES6
Node Sass
Patience - Strictly for the love of coding Mehn!

What it does

Display Projects
Try to look pretty, simple, and hopefully not too formal.
Inform visitors about me
Links to All the things
Link Back to project Repos and Home Pages (if available)

Learning Points

Sass Mixins
Sass functions
Responsive design & media queries
CSS Grid
Flexbox
CSS Animations/transitions
Psuedo Elements

Issues

Node sass error

Compiling .scss files with node-sass using the following script in package.json

"scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  }

produced certain errors on VSCode on windows, specifically =>

{
  "status": 3,
  "message": "File to read not found or unreadable: C:/Users/Urhiafe Patience/projects/portfolio/scss/main.scss",
  "formatted": "Internal Error: File to read not found or unreadable: C:/Users/Urhiafe Patience/projects/portfolio/scss/main.scss\n"
}

To fix this, I used a solution I found here, replacing the contents of the node_modules/node-sass/lib/render.js file with this patched file. Started rendering properly afterwards

Overriding CSS

while coding the responsiveness (using media queries defined in the _config and _mobile partials), the css began to overide each other, with css on earlier lines being overridden by css in later lines (something i learnt from jen Simmons) like so =>

main#home h1 {
  // @media small screens
  margin-top: 5vh;
}
main#home h1 {
  // @media larger screens
  margin-top: 20vh;
}

So earlier occuring css is overriden in the browser like this => ~~main#home h1 { margin-top: 5vh; }~~ while later css is implemented. Thus to ensure that responsive css is applied by the browser, I imported the _mobile.scss file last in the main.scss file

Acknowledgments

Many thanks to @bradtraversy for his awesome courses - i will not fail you sensei
Thanks to @torvalds For Making the world a better place
And To anyone reading this... You're awesome!