www.kevintrinh.dev - v2

A modern solution for professionally showcasing skills, projects, and experience. Built with React.js.

VIEW MORE PHOTOS HERE

🌐 What is Reactfolio?

Reactfolio is a modern, revamped, and responsive portfolio website built using ReactJS, featuring a fresh UI, and designed specifically for STEM and computer science students, as well as aspiring software engineers and students. This project combines enhanced functionality, significant UI improvements, GitHub API integration, and comprehensive bug fixes to deliver a superior user experience. Fully open-source, Reactfolio encourages community contributions and collaboration. Its intuitive design ensures easy customization, making it convenient for users to personalize their portfolios seamlessly. With Reactfolio, you can showcase your skills, projects, and academic experiences in a streamlined, visually appealing manner.

📌 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 22.04 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)