www.kevintrinh.dev – v2

A production-ready portfolio template for developers and STEM students to present projects, experience, and skills in a single, polished page. Built with React.js, fully responsive, and easy to customize through JSON-based content.

📌 New Portfolio Template: DevfolioX
DevfolioX is the new updated version of Reactfolio, which features a similar design with way more features, fixes, and updates. I highly recommend you use DevFolioX instead of this portfolio template! View the DevfolioX Live Site.

VIEW MORE PHOTOS HERE

---

🌐 What is Reactfolio?

Reactfolio is a modern, revamped, and fully responsive portfolio website built using ReactJS.
It is designed for STEM and computer science students, aspiring software engineers, and anyone who wants/needs a clean, professional portfolio:

• Skills and technical stack
• Projects and GitHub work
• Academic experience and achievements
• Past Internships

This project combines:

• Enhanced functionality
• Significant UI improvements
• GitHub API integration
• Comprehensive bug fixes

to deliver a streamlined, visually appealing user experience.

Reactfolio is fully open-source and encourages community contributions. Its intuitive, content-driven design makes it easy to customize and adapt to your personal brand.

---

✨ Key Features

• Built with React.js using a modern, component-based architecture
• Fully responsive layout for desktop, tablet, and mobile
• One-page / one-scroll design for a focused user experience
• Centralized configuration via content.json for easy customization
• GitHub integration to highlight your work
• Improved V2 UI, stability, and overall developer experience

---

📌 Important Information

• This project reuses components from my previous portfolio:
  Portfolio-V1
  while adopting a new UI and theme inspired by this DEMO.

• Native Node version: v16.20.2
  Environment: built on Linux (Ubuntu 22.04 LTS).

• This is a revamped version of my original portfolio:
  Portfolio-V1 Live

• Key improvements include:

  • Updated functionality
  • API integration
  • Significant UI changes
  • Numerous bug fixes
  • A more polished user and developer experience

• The project continues the “one page, one scroll” design philosophy from V1 with a more modern and refined look.

• For easy customization, nearly every visible element is wired to content.json, so you do not need to open each component file to change text or data.
  You can edit almost everything from that single JSON file.

  Refer to the corresponding JS files for details on how to manipulate specific sections within the JSON.

---

🛠 Installation & Setup – Tutorial Video

1. Clone the repository or download the latest release

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

   cd Reactfolio

2. (Optional) Use the recommended Node version via NVM
   Recommended: Node v16.20.2

   nvm install 16

   nvm alias default 16

3. Install dependencies using npm or yarn:

   npm install

   yarn install

4. Start the development server:

   npm start

   yarn run start

---

🚀 Build and Run for Production

1. Generate a 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 tooltip 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)