Hi I'm Grant and I like to create rad things! This is my portfolio displaying my digital creations, some created and some being created.
Last updated on Sat, Jan 23, 2021 3:33:08 PM
Type text in these blocks in your IDE's or code editor's terminal and hit enter.
-
Open up a new folder in the IDE or code editor of your choice (Visual Studio Code highly suggested).
-
git init -
git clone https://github.com/grantmontgomery/grantcreates2.0.git -
Move all files and folders outside of grantcreates2.0 folder in to the new folder.
-
Delete grantcreates2.0 folder.
-
Install the Gatsby CLI
npm install -g gatsby-cli -
Install dependencies
npm install -
Run the development server
npm start -
When the build is done in the terminal a window should open up at http://localhost:8000 in one of your browsers, but if it doesn't visit this address in the browser of your choice.
-
Run production build.
npm run build
With so many other talented developers out there in the community it makes it tough to stand out from the crowd. I realized that for the second iteration of my site I had to create a place that wasn't just a showcase of my skills and projects, but was also an experience. I wanted to immerse my visitors and I believed one of the best ways to do that was with clean visual design and a touch of 3D to make the experience more interactive. My work started with the logo you see above and then the 3D models I created using Vectary. UI and visual design were important steps to the equation, but I also needed the site to be fast and that's where my design principle came in.
While looking around for other examples and inspiration for my portfolio I noticed many portfolios were bogged down by large libraries, assets that were too big, and were built with very complex designs or animations. I created these three principles to avoid these issues during the development of this site.
- Load times needed to be fast.
- Bundle size needed to be as light as possible.
- The site needed to be simple in it's layout and UI design.
- Design with a mobile first approach.
As a developer specializing in React, it made the most sense to me to create the site using it. React by itself is fast, but after researching the power of static site generation and server side rendering I saw that I could make it faster using a framework like Gatsby or Next.js. Both of these tools specialize in static site generation for React applications however Next.js offers a lot more features for Full Stack Applications which I didn't need for this site. For that reason I chose to build it using Gatsby and it allowed me to meet the first two principles of my design.
In order to meet the third and fourth principles I decided to make the site a single page site. I built out the mobile layout of the site first which allowed me to create a more responsive experience. This also made the layout very simple and it allowed for fewer changes to the UI for desktop. The site also doesn't use any complex animations besides the ones from the objects rendered with Three.js.
These are some of the unique features of my site.
-
Creations
These are the projects I've created or am currently working on.
This feature and these projects are constantly changing
-
3D Objects
Interactable 3D objects created with Vectary and rendered using Three.js. Click and drag to move them around.
- Relevant Components
-
Contact Form
Send a message directly to my inbox.
- Relevant Components
- Backend
Here's a list of some of the major Technologies used to create this experience.
- Languages
- TypeScript
- JavaScript
- GraphQL
- Markdown
- HTML
- Styling
- Sass
- CSS Modules
- CSS
- Libraries
- Frameworks
- Micro Services
- SMTP Services
- APIs
- Cloud Services
| Color | Hex |
|---|---|
| Rich Black FOGRA 29 | #0b171d |
| Charleston Green | #0f2027 |
| Gunmetal | #203a43 |
| Blue Sapphire | #2c5363 |
| Teal Blue | #3e768e |
| Sky Blue Crayola (React Color) | #61dbfb |
| Alice Blue | #e2eef3 |
| Emerald | #57c769 |
| Red Salsa | #ed4548 |
These are some notable people who's work or advice were huge inspirations for this portfolio. Go check out their work!