<p align="center"> <img alt="Fav Icon Png" src="https://github.com/KevinTrinh1227/Reactfolio/blob/master/public/assets/readme-icon.png" width="100"/> </p> <h1 align="center"> www.kevintrinh.dev – v2 </h1> <p align="center"> <strong>A production-ready portfolio template for developers and STEM students to present projects, experience, and skills in a single, polished page.</strong> Built with <strong>React.js</strong>, fully responsive, and easy to customize through JSON-based content. </p> <div align="center"> <strong>📌 New Portfolio Template: <a href="https://github.com/KevinTrinh1227/DevfolioX">DevfolioX</a></strong><br/> DevfolioX is the <strong>new</strong> 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 <a href="https://devfoliox.vercel.app" target="_blank">DevfolioX Live Site</a>. </div> <br/> <div align="center">  <img src="https://img.shields.io/badge/Maintenance-Updates%20as%20needed-blue?style=for-the-badge" alt="Maintenance status" />  <img src="https://img.shields.io/github/last-commit/KevinTrinh1227/Reactfolio?color=yellow&label=Last%20Updated&style=for-the-badge" alt="Last Updated badge" />  <img src="https://img.shields.io/netlify/bda950e2-c382-4756-8f7c-129785602a59?label=Netlify&style=for-the-badge" alt="Netlify deploy status" /> </div> <br/> <a href="https://kevintrinh.dev" target="_blank"> <img alt="Screen Shot from 10-03-2023 of landing page." src="https://github.com/KevinTrinh1227/Reactfolio/assets/48145892/d5a342d5-3e49-45d1-9028-cabc663ef61a"> </a> <details> <summary align="center"><strong>VIEW MORE PHOTOS HERE</strong></summary> <br/> <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"> </details>

🌐 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

Clone the repository or download the latest release

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

cd Reactfolio

(Optional) Use the recommended Node version via NVM
Recommended: Node v16.20.2
```
nvm install 16
```
```
nvm alias default 16
```
Install dependencies using npm or yarn:
```
npm install
```
```
yarn install
```
Start the development server:
```
npm start
```
```
yarn run start
```

🚀 Build and Run for Production

Generate a static production build
```
npm run build
```

🎨 CSS Hex Color Palette

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

Reactfolio

Install / Use

README