KevinTrinh1227 / Reactfolio

An e-portfolio template built with React.js that utilizes GitHub API. Designed for public use with lots of configuration options.

www.kevintrinh.dev - v2

The Second iteration of kevintrinh.dev built with React.js with GitHub API integration.

VIEW MORE PHOTOS HERE

📌 Important Information

This project recycles components from my old Portfolio-V1, while also adopting a new UI and theme inspired by this DEMO. Project native version: Node v16.20.2, built on Linux OS (Ubuntu LTS).

This project is a revamped version of my Portfolio-V1. It comes with numerous updates including functionality, API integration, Significant UI changes, bug fixes, and much more! This project is fully open source and I encourage anyone interested, to contribute to the project as well. This iteration continues the simplistic approach to the same "one page one scroll" design philosophy as V1.

For easy use, I linked every element that makes up the app to content.json to eliminate having to open each component file to change content data, so you can edit everything seamlessly from one file. Refer to the corresponding JS file for more information on how to manipulate a specific section within the JSON.

🛠 Installation & setup

1. Clone repository OR download the latest release

   git clone https://github.com/KevinTrinh1227/Reactfolio

   cd Reactfolio

2. OPTIONAL: Use the correct Node version using NVM (Node v16.20.2)

   nvm install 16

   nvm alias default 16

3. Install the dependencies using npm or yarn

   npm install

   yarn install

4. Start the development server using npm or yarn

   npm start

   yarn run start

🚀 Build and run for production

1. Generate a complete static production build

   npm run build

🎨 CSS hex color palette

Color	Hex Code	Usage Info	CSS Usage
Dark Navy	#0b182c	Main background color	var(--dark-navy)
Navy	#12223d	Secondary background color	var(--navy)
Light Navy	#233450	Data tool tip color & text highlighting	var(--light-navy)
Light Lime	#64ff93	Main accent color	var(--light-lime)
White	#e9f1fc	Main text color	var(--white)
Bone White	#d4ddf8	Secondary text color	var(--bone-white)
Smoke	#8992ac	Tertiary text color	var(--smoke)
Light Smoke	#acb5cf	Section subtitles text	var(--light-smoke)
Lighter Smoke	#d0d8f3	Section Title text	var(--lighter-smoke)