Portfolio

Matthew Chhay's Portfolio. Open Live Preview

Preview

Table of Contents

• Introduction
• Features
• Technologies Used
• Screenshots
• MVP
• Setup
  • For viewing locally
  • For further development
• Tools Used
• Project Status
• Room for Improvement

Introduction

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.

Features

• 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

Technologies Used

• HTML
• SCSS/CSS
• JavaScript

Screenshots

MVP

• 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

Setup

For viewing locally

1. Git clone this repo git clone [email protected]:chhaymatt/portfolio.git
2. Get Live Server for VS Code
3. Open index.html and Press Go Live in the bottom right corner in VS Code

For further development

1. Git clone this repo git clone [email protected]:chhaymatt/portfolio.git
2. Install sass in Terminal npm install -g sass
3. Get Prettier and Live Server for VS Code (links below)
4. Run SASS watch command from the /styles folder in Terminal sass --watch --no-source-map style.scss style.css
5. Open index.html and Press Go Live in the bottom right corner in VS Code

Tools Used

• 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 Status

Project is ongoing

Room for Improvement

• Replace HTML onClick attributes with JavaScript addEventListeners
• Move in-line HTML scripts to scripts.js