www.kevintrinh.dev - v2

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

VIEW MORE PHOTOS HERE

<a href="https://www.kevintrinh.dev" target="_blank">
  <img alt="Screen Shot from 10-03-2023 of landing page." src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/screenshot_1.png">
  <img alt="Screen Shot" src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/screenshot_2.png">
  <img alt="Screen Shot" src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/screenshot_3.png">
  <img alt="Screen Shot" src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/screenshot_4.png">
  <img alt="Screen Shot" src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/screenshot_5.png">
</a>

📌 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

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

sh cd Reactfolio

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

sh nvm install 16

sh nvm alias default 16

1. Install the dependencies using npm or yarn

sh npm install

sh yarn install

1. Start the development server using npm or yarn

sh npm start

sh yarn run start

🚀 Build and run for production

1. Generate a complete static production build

sh 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)