Feel free to use it as-is or customize it as much as you want. This template was created from scratch and inspired by Simplefolio by Jacobo Martinez. Simplefolio React uses Jacobo Martinez's portfolio template and updates it for modern breakpoints and theming.
See the instructions down below at Installation and Running / Development to get a copy of the project up and running on your local machine for development and testing purposes.
Update the portfolio content in pages/index.json:
{
"theme": "snow",
"navigation": [
{
"title": "About",
"url": "#about"
},
{
"title": "Projects",
"url": "#portfolio"
},
{
"title": "Contact",
"url": "#contact"
}
],
"hero": {
"name": "Your Name",
"subtitle": "I'm the Unknown Developer."
},
"about": {
"title": "About me",
"image": "/placeholder.png",
"primary": "This is where you can describe about yourself. The more you describe about yourself, the more chances you have!",
"secondary": "Extra Information about you! like hobbies and your goals."
},
"projects": {
"title": "Projects",
"projects": [
{
"title": "Project 1",
"description": "Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: complement the information: the skills learned or reinforced in its realization and how you faced it, prove to be proactive in the search for solutions.",
"url": "http://www.example.com/project1",
"github": "http://www.example.com/github",
"image": "/placeholder-700x350.png"
},
{
"title": "Project 2",
"description": "Demonstrate in this description the skills of a programmer: such as having commitment, having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc.",
"url": "http://www.example.com/project2",
"github": "http://www.example.com/github",
"image": "/placeholder-700x350.png"
},
{
"title": "Project 3",
"description": "If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism.",
"url": "http://www.example.com/project3",
"github": "http://www.example.com/github",
"image": "/placeholder-700x350.png"
}
]
},
"contact": {
"title": "Contact",
"description": "This is where you can describe about your contact. The more you describe about your contact, the more chances you have!",
"formId": "[INSERT YOUR FORMSPREE FORM ID HERE]"
},
"footer": [
{
"title": "LinkedIn",
"url": ""
},
{
"title": "Twitter",
"url": ""
},
{
"title": "GitHub",
"url": ""
}
]
}Available themes are dylan, snow, sage, sunset, onyx, and
simplefolio-original. Their color tokens are defined in
styles/themes.css.
Set up a contact form with Formspree.
- Go to https://formspree.io/.
- Create an account.
- Get your form ID.
- Paste the form ID into the
formIdfield in pages/index.json.
- Tailwind - Utility-First CSS framework
- Next.js - Web development framework
- ScrollReveal.js - JavaScript library
- Formspree - Form processing API
- Dylan Arveson - https://github.com/dyyllaann
This project is licensed under the MIT License - see the LICENSE.md file for details
I was motivated to create this project after seeing the Simplefolio that Jacobo Martinez created and shared with the ZTM Community.
You will need the following things properly installed on your computer.
git clone https://github.com/dyyllaann/simplefolio-react.git
cd simplefolio-react
npm installnpm run devOpen http://localhost:3000.
npm run lintnpm run build
npm startThis project is hosted with Vercel, although my personal portfolio uses the same template and is hosted on AWS. I strongly recommend Vercel for ease of use.
To deploy with Vercel, create a new project and import the Git repository.