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

1. 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

2. 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!

And remember from here on end... History has it's eyes on you...