- Press
to clone this template to your Github account
- Clone the newly created repository in your account to your local machine
- Customize the following files with your own information
data.json
with your- Name (appears in Navbar)
- Landing content
{ "title": String, // Main heading on landing "subtitles: String[], // Animated Subheaders "professionalDetails": { "alt": String, // Tooltip text that appears on hover, "icon": String, // Icon name from simpleicons.org, "link": String // To your account/repo/email }[] }
- Skills
- Keys appear as headings on your porfolio (Ex: languages known)
- Values appear as icons from simpleicons.org
- Value can be a
String
orObject
with properties:alt
,icon
andbackgroundColor
(optional)
{ [key1]: [values1], ... [keyn]: [valuesn], }
- Projects
{ "baseURI": "https://api.github.com/repos/<your-Github-username>/", "repositories": String[] // <Names of your Github repositories> }
- Experience
- Uses the same key-value pair pattern as the
Skills
section - Refer
data.json
for valid properties ofvalues
- Uses the same key-value pair pattern as the
- About
{ "description": String, "picture": String, // URL "social": Object[] // Same as professionalDetails from Landing }
- Theme
- The theme object has two properties - light, and dark, for light mode and dark mode respectively.
- Despite the classification, theming is not limited to colors only. Breakpoints, typography, animations, etc. can also be modified. See link for more details.
- The theme object contains the default colors applied by MUI as an example. This can be modified or removed entirely.
- NOTE:
- Valid icon names can be obtained from simpleicons.org by hovering on the icons. The name appears at the bottom of the page as:
https://simpleicons.org/icons/<icon-name>.svg
- Original names of the brand may also be provided. Examples on how icon names are automatically corrected (not tested for all cases):
- Node.js -> node-dot-js
- C++ -> cplusplus
- I used images from LinkedIn's CDN for the Experience and About sections. To use other sources, see additional configurations below.
- Valid icon names can be obtained from simpleicons.org by hovering on the icons. The name appears at the bottom of the page as:
pages/_document.js
with your Google Analytics code.- All
.png
icons andmanifest.webmanifest
in the public folder. There are many ways of generating these. I used:
- For additonal customizations, modify:
domains
innext.config.js
for using images from additional sources.svg
files inpublic/
directory for using your own images in the Landing, Skills, Experience, Projects and About sections. I used SVGs from UnDraw.
- Commit your changes and push to your repository
- Create a *Personal Access Token
(PAT)
on Github, with access to all your repositories. - Copy the
PAT
and save it for later use - Create an account on Vercel and connect your Github account
- Create a
- Choose
Import Git Repository
and choose the cloned repository - The
Project Name
may be changed but keep theFramework Preset (Next.js)
,Root Directory (./)
andBuild Settings
intact - Add the following environment variable with key:
PAT
and value:<40-character-PAT>
(replace with actual PAT without the angular <> brackets) - Press the
button
*PATs must follow GitHub's new authentication token format : ghp_<37-character-Base62-String>
Deployment with Vercel automatically sets up your repository for continuous deployment. Changes committed and pushed to master should reflect in a few minutes on your site. If your deployment fails, check on Vercel.
- Requirements: Node, NPM and Yarn (LTS)*
- Navigate to your cloned project, and run
yarn
on a terminal - Create a file named
.env.local
and add the PAT environment variable here (PAT=<40-character-pat>
) - Run
yarn dev
to test the Next.js app onlocalhost:3000
- Production builds can also be tested using
yarn build
andyarn start
*npm
commands also work
These stats were recorded on Google Chrome's incognito mode for Desktop. These stats are subject to change and may increase or decrease depending on the tester's environment and/or changes to source code.