Personal Portfolio Website

Light Theme

Dark Theme

This is my personal portfolio website available at https://itscosmas.me/ . Its written in ES6 Javascript and CSS preprocessor Sass :

• React
• Sass
• Firestore

Tech

• React - A JavaScript library for building user interfaces
• Sass - Syntatically Awesome Style Sheets. CSS with superpowers
• Firebase - Build apps fast, without managing infrastructure. Backed by Google, trusted by top apps.

NPM Packages

• create-react-app
• React router dom
• Node Sass
• React Typed
• Firebase

Config and Running

Clone this repository and install the dependencies :

$ git clone https://github.com/ItsCosmas/itscosmas.git
$ cd itscosmas
$ npm install

Configure your private Firestore Credentials

• Save app credentials to a private .env file, get yours here : https://firebase.google.com/
• Sample .env file:

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DB_URL=
REACT_APP_P_ID=
REACT_APP_SB=
REACT_APP_MS_ID=
REACT_APP_APP_ID=

• Learn about .env files and react here : https://create-react-app.dev/docs/adding-custom-environment-variables/
• Find a tutorial for React and Firestore here: https://sebhastian.com/react-firestore

Run the app locally ...

$ npm start

To build for production ...

$ npm build

Resources

• Illustrations were sourced at https://undraw.co/ a site for Open-source illustrations for every project you can imagine and create
• Color names : http://chir.ag/projects/name-that-color/

Netlify

• Learn how to deploy to netlify here : https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/

• How to set up netlify CI/CD here : https://docs.netlify.com/configure-builds/get-started/

License

MIT