Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bankole2000/portfolio
🤵 First Personal Portfolio website
https://github.com/bankole2000/portfolio
css-grid flexbox node node-sass portfolio projects sass
Last synced: about 1 month ago
JSON representation
🤵 First Personal Portfolio website
- Host: GitHub
- URL: https://github.com/bankole2000/portfolio
- Owner: Bankole2000
- Created: 2019-04-17T21:40:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T22:42:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T16:22:48.828Z (about 1 month ago)
- Topics: css-grid, flexbox, node, node-sass, portfolio, projects, sass
- Language: SCSS
- Homepage: https://bankole2000.github.io/portfolio
- Size: 40.5 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# First Portfolio Website
A simple website that I'm using as my portfolio for the time being.
[](https://bankole2000.github.io/githubfinder)
_
"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](https://www.wikihow.com/Love-Programming) - 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`
```json
"scripts": {
"sass": "node-sass -w scss/ -o dist/css/ --recursive"
}
```
produced certain errors on VSCode on windows, specifically =>
```json
{
"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](https://github.com/michaelwayman/node-sass-chokidar/issues/22), replacing the contents of the `node_modules/node-sass/lib/render.js` file with [this patched file](https://github.com/marcosbozzani/node-sass/blob/bug-vscode-watch/lib/render.js). 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 =>
```css
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](https://github.com/bradtraversy) for his awesome courses - _i will not fail you sensei_
- Thanks to [@torvalds](https://github.com/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...
_