Portfolio

Tech Stack

How to personalize

• 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 or Object with properties: alt, icon and backgroundColor (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 of values
    • 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.
  • pages/_document.js with your Google Analytics code.
  • All .png icons and manifest.webmanifest in the public folder. There are many ways of generating these. I used:
    • Favicon for generating favicons
    • Simicart for generating manifest information and files
    • Maskable for masking my icons for a higher PWA score [OPTIONAL]
• For additonal customizations, modify:
  • domains in next.config.js for using images from additional sources
  • .svg files in public/ 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

Deployment (with Vercel)

• 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 the Framework Preset (Next.js), Root Directory (./) and Build 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>

How to update content

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.

Running locally

• 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 on localhost:3000
• Production builds can also be tested using yarn build and yarn start

*npm commands also work

Lighthouse stats

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.