Ever dreamt of having your awesome personal portfolio website? Have zero experience coding websites? Then you have come to the right place. Keep reading, and in a matter of minutes (read: a few days of frustration) you will have your website up and running.
This project is deployed to:
https://digital-portfolio-seven.vercel.app/
Keep reading and you'll see how you can deploy your resume just like this.
- To showcase my React.js/Next.js skills
- To give a tool to my friends to have an awesome digital portfolio (and stop asking me to build one for them)
- To start a useful project, where devs of all skill levels can collaborate
- To prepare the front-end of a bigger project centered around digital resume/portfolio building
- Fork the repo, make it yours
- Populate
data/resume.min.jsonfile with your details (currently holds sample data with Harry Potter's info) - Deploy on your own, or if you don't know how to, keep reading
- Go to https://vercel.com/
- Click on "Start Deploying" and then "Continue with Github"
- Create an account on Vercel (they have a free tier for hobby projects - good to kick off), select and deploy your repo
- Now every time code is pushed/merged to the main branch of the repo, Vercel will pull it and update your deployment. Just like in those cool movies
Easy! All the theme customisation is centralised in styles/theme.css. This file uses CSS custom properties (variables) to control the entire look and feel of your portfolio.
The theme uses a comprehensive colour system. You can modify any of these CSS variables in styles/theme.css:
- Primary Brand Colours:
--primary-colour,--primary-colour-dark - Text Colours:
--text-primary,--text-secondary,--text-muted,--text-white - Background Colours:
--bg-primary,--bg-white,--bg-dark,--bg-gray,--bg-light-blue - Accent Colours:
--accent-red,--accent-light-gray,--accent-separator - Border Colours:
--border-white,--border-white-transparent
Simply change the colour values (hex, rgb, or rgba) to match your desired colour scheme.
Typography is controlled by two main variables:
--font-family-header: Used for headings and titles (default: 'Dosis', sans-serif)--font-family-system: Used for body text (default: system font stack)
Just update these variables with your preferred font families. Don't forget to import custom fonts in styles/fonts.css if needed!
The theme.css file includes commented-out examples at the bottom showing how to create a dark theme or switch to monospace fonts. Simply uncomment and modify these to get started quickly.
This is a Next.js project bootstrapped with create-next-app. Follow the link to get started with local setup and other guidelines.
Sure! Any improvements are welcome. Feel free to open PR's. Especially welcome are solutions to the issues listed in the "Issues" section.
If you use this codebase, I would appreciate if you credit me somewhere. I won't sue you if you don't, but I am sure you will feel better 😄
On that note, I would like to thank Pascal van Gemert for the inspiration for the design of this portfolio.