Matthew Chhay's Portfolio. Open Live Preview
- Introduction
- Features
- Technologies Used
- Screenshots
- MVP
- Setup
- Tools Used
- Project Status
- Room for Improvement
This is my portfolio to showcase what I have been learning and to give visitors an insight into who I am. The portfolio will be updated when I complete projects or learn new skills.
- A landing, about, skills, projects and contact sections
- Click to copy my email address to the clipboard in case people want to paste my email into their email client
- Responsive design
- Footer uses the current year
- Modules, Mixins and Partials are used for styling organisation
- HTML
- SCSS/CSS
- JavaScript
- Stored on a public repository on Github
- Contained README.md with a short introduction
- Styling is completed via SCSS using BEM and stored accordingly in /partials and /modules folders
- Portfolio is responsive using flex and media queries for text
- Git clone this repo
git clone git@github.com:chhaymatt/portfolio.git
- Get Live Server for VS Code
- Open index.html and Press Go Live in the bottom right corner in VS Code
- Git clone this repo
git clone git@github.com:chhaymatt/portfolio.git
- Install sass in Terminal
npm install -g sass
- Get Prettier and Live Server for VS Code (links below)
- Run SASS watch command from the /styles folder in Terminal
sass --watch --no-source-map style.scss style.css
- Open index.html and Press Go Live in the bottom right corner in VS Code
- Live Server - to see live locally without refreshing. Get Live Server Extension
- Prettier - to tidy up code in spacing and structure. Get Prettier Extension
- Font Awesome - a library of icons that can be imported easily. Get Font Awesome icons
- Hero Patterns - a collection of background patterns. Get patterns via Hero Patterns
- Favicon.io - generate a favicon. Generate favicon
- Meta Tags - generate metadata. Generate metadata
- Coolors - colour palette generator. Generate colour palette
- Google Fonts - a library of free fonts. Get Google Fonts
Project is ongoing
- Replace HTML onClick attributes with JavaScript addEventListeners
- Move in-line HTML scripts to scripts.js