React Portfolio by Ryan Balieiro
A sleek, futuristic portfolio template for developers – built with React and Bootstrap 5.
Key features:
- Lightweight and fully responsive.
- Adapts perfectly to mobile screens.
- Multi-language support included.
- Comes with both dark and light theme options.
- A variety of components to highlight your work experience, education, skills, portfolio, and more.
- Uses Vite for packaging.
- Emails with EmailJS - no backend needed!
Here's a list of live versions of the template:
| # | Version | Description | URL |
|---|---|---|---|
| 🟢 | Mark Choi (default) | Latest deployment of the template here on GitHub pages. | Preview |
| 🟣 | Emily Park | An example of how the template can be customized. | Preview |
| 🔵 | Michael Özkan | Another example of how the template can be customized. | Preview |
The layout uses a fixed central view with a left sidebar, adjusting perfectly across various monitor resolutions, from 4:3 to ultra-wide.
The main view transitions smoothly when a new page is selected from the sidebar, giving a page-flipping effect. The sidebar is also toggleable, allowing the content area to expand for a larger viewing space.
On mobile, the layout groups the portfolio sections into categories and transforms into a tabbed interface with a bottom navigation.
- Clone the repo:
git clone https://github.com/ryanbalieiro/react-portfolio-template
- Go to the project's root folder and use npm to install all required components:
npm install
- Launch the project in developer mode:
npm run dev
Follow this step-by-step guide to customize the template with your own content and styles. You can either read the documentation or watch the interactive video tutorials:
| # | Title | Docs | Video Tutorial |
|---|---|---|---|
| 1 | Setting up the project | See Docs | Watch on YouTube |
| 2 | Configuring settings.json | See Docs | Watch on YouTube |
| 3 | Titles and Colors | See Docs | Watch on YouTube |
| 4 | Profile and Strings | See Docs | Watch on YouTube |
| 5 | Categories and Sections | See Docs | Watch on YouTube |
| 6 | Section Titles | See Docs | Watch on YouTube |
| 7 | Section Articles | See Docs | Watch on YouTube |
| 8 | ArticleInlineList | See Docs | Watch on YouTube |
| 9 | ArticleText | See Docs | Watch on YouTube |
| 10 | ArticleCards | See Docs | Watch on YouTube |
| 11 | ArticleSkills | See Docs | Watch on YouTube |
| 12 | ArticleTimeline | See Docs | Watch on YouTube |
| 13 | ArticleStack | See Docs | Watch on YouTube |
| 14 | ArticlePortfolio | See Docs | Watch on YouTube |
| 15 | ArticleTestimonials | See Docs | Watch on YouTube |
| 16 | ArticleInfoList | See Docs | Watch on YouTube |
| 17 | ArticleFacts | See Docs | Watch on YouTube |
| 18 | ArticleThreads | See Docs | Watch on YouTube |
| 19 | ArticleContactForm | See Docs | Watch on YouTube |
| 20 | Categorizing article items | See Docs | Watch on YouTube |
| 21 | Deploying for production | See Docs | Watch on YouTube |
Follow these additional tutorials to further enhance your portfolio with advanced features:
| # | Title | Docs | Watch |
|---|---|---|---|
| 22 | Creating your own custom article | See Docs | Watch on YouTube |
This template was created by and is maintained by Ryan Balieiro.
It's based on the React framework created by Jordan Walke, and the Bootstrap framework created by Mark Otto and Jacob Thorton.
Additional frameworks and plugins used include:
- Smooth Scrollbar: A customizable scrollbar plugin.
- Swiper: A powerful library for creating touch sliders.
- EmailJS: A free service that allows you to send emails using JavaScript.
- Font Awesome: A library of free vector icons.
- PrimeIcons: A collection of premium line icons.
Code released under the MIT license, providing complete freedom for utilization. Feel free to enhance and adapt it to suit your needs.
Oh... and if you like this template, don't forget to give it a ⭐ :)