My Personal Website

Project Overview

The project was built to be easily modifiable so even you don't know much about Javascript or ReactJS, you can still use this project as your template in building your own personal website.

Note when using this project as your template

If you happen to encounter some not so programmer friendly configuration upon following the below instructions, kindly send me an email at my personal email or file an issue ticket in this repo.

Project Structure

This project was built using below technologies:

1. ReactJS
2. ReactHooks
3. Javascript
4. Typescript
5. HTML/SCSS
6. Webpack

Prerequisite

Make sure you have installed the ff. in your local machine:

1. GIT
2. NodeJS
3. Yarn

How to set up the project?

You may wish to fork this repository or remove my remote origin and add your own. Go here for more information on how to change remotes.

1. To download the repository and install dependencies, run the following commands:

git clone https://github.com/JCGonzaga01/jcgonzaga01.github.io.git [YOUR_PREFERRED_REPO_NAME]

cd [YOUR_PREFERRED_REPO_NAME]

yarn install

2. Once installed, run the following command to build the application and serve it with hot module reloading:

yarn dev

Navigate to http://localhost:3000 to view running project.

This completes the set up instructions. Please continue reading below to learn on how to modify this site to make it your own.

Checklist

1. Start by changing the Logo of this site, go to src/assets folder then update headerLogo.png to your own logo.

2. All the informations and data displayed in this website were already centralized to ease the modification. You can see the centralized information at src/constants folder. Kindly update each constant files in this folder to your own information except the src/constants/_common file.

3. To update the background image per section, kindly go to src/assets/bg and update all images in here. Note: Make sure to use the same image file name to avoid issues.

4. To update the Work Experience, Projects && FunStuffs images, you can save all your own images to the assets folder and export it using the src/assets/index.ts file or assign the image URL directly to their respective constant file.

5. You can also change the website color theming at src/helpers/stylings/global.scss.

Notes:

1. To make the About Me and Skill page button work, you can either point the url of this button page to your own aboutme/skill page implementation OR you can check and fork my info page implementation for this.

Build and Deploy

1. To build the project, just run the below command.

yarn build

2. If you fork this repository in your own github account and wants to deploy it in github hosting, you can just run the below command to auto deploy and host your project.

yarn deploy

Running the above command will create new git branch named gh-pages. To know more on how to host repo project in Github properly, kindly read this article for more information.

Acknowledgements

1. Special thanks to the following sites in providing my resources:

• FlatIcon for my icons.
• Unsplash for my background images.

2. Template was based on Landed by @ajlkn

Reminder

• Please don't forget to send love and support by giving star to this project.
• If you encounter some issues or would like to add some enhancement, never hesitate to file an issue ticket and send PR.

License

MIT