The third iteration (v2) of my personal portfolio website built with Gatsby.
Performance can be further improved by using CDN hosting for large images (or using next gen formats), removing intro overhead, etc.
The complete website, every single component that is uses, was developed & coded by me. The styling was inspired by many resources available on the internet but was not copied (art of converting UI/UX designs to css :p).
Although this is not a gatsby starter theme, I am making it available for use. If you are using this website/parts of this website for personal use, please don't claim it as your own. Also, attribution will be highly appreciated.
PS: This website was built using gatsby's hello-world starter.
-
Download Node.js
-
Install the Gatsby CLI
npm install -g gatsby-cli
-
Install dependencies
npm install
-
Generate a production build
gatsby build
-
Serve the site on local server
Preview the site as it will appear once deployed.
gatsby serve
-
Build, Serve and Watch
Use the command to start the development server. It watches files, rebuilds, and hot reloads if something changes.
gatsby develop
A quick look at the react components you'll see in this project.
- Footer: Self explanatory.
- Logo: Logo for navbar.
- Navbar: For navigation.
- ProjectDetails: Contains the details of 'featured projects'.
- ProjectsGrid: Component for displaying every single project on /projects page.
- Skill: Individual skill block in the 'about' section.
- About: Contains education information and skills.
- Contact: Contact details.
- Description: Top most component of the portfolio.
- FeaturedProjects: Four featured projects.
- Intro: Intro component.
| Color | Hex |
|---|---|
| Black Pearl | #151719 |
| Shark | #25282c |
| Royal Purple | #5658dd |
| Dried Lilac | #b7b8ff |
| Cadet Grey | #9ca9b3 |
| Nearly White | #eceded |