Portfolio.v3
Portfolio.v3

Portfolio.v3

Tags
Web Dev
Projects
React.js
Next.js
Graphic Design
Vercel
Generative AI
Notion
Published
August 23, 2023
Author
Kalen Wallin
api_v1_role
Web Developer
api_v1_company
3rd Custom Portfolio
api_v1_type
Personal Project
api_v1_category
Websites
api_v1_year
2023
api_v2_order
12
 
Demo of https://v3.kalenwallin.com/
 
notion image
 

Updates

Update September 2023

I added a Redis database for persisting preview images and caching URI to PageID mappings. I’m using Upstash to create and manage the database instance.

Update August 2023

Reworked the landing page to be an overview of myself with the following sections
  • Info
  • Timeline
  • Featured Experiences
  • Work
  • Pet Projects
  • Fun School Project
  • Resume
Just when you thought I was done with portfolios 😂 nah freal this is gonna be my last portfolio. It's finally in a state where I can be happy without touching it for a while. Plus, it's easy to edit/update with Notion.

Purpose of Portfolio.v3

You're probably wondering why I have 3 portfolios. Let me explain:
The first portfolio (v1) was to show off my experience for employers and show that I was capable of making a website. The second portfolio (v2) was to use the new web dev skills I learned at my internship to develop my portfolio as a Django web app.
I created my first two portfolios for the sake of web development experiences. This third portfolio (v3) is designed to focus more on creating great content rather than creating the site itself. I create all the content in Notion as my CMS and it's rendered into React components using React-Notion-X.
In addition, I serve this content to v1 and v2. See any of the website cards/pages on v1 and v2 as examples:
By having one source for all my experiences, I only have to write one article and write updates to that single article.
Before v3, I was writing for both v1 and v2 on separate sources. Meaning that I had to update 2 different sources for the same material.
This got too cumbersome. Also, I was writing the articles in raw HTML, which is not a pleasant writing/editing experience.
With Notion, I get a beautiful writing/editing experience and you, the reader, get a beautiful and consistent reading experience, no matter which portfolio you are on.

Graphic Design

Logo/Favicon

I designed the logo/favicon, which was inspired by the Next.js logo, in Figma. You can view the progression of the logo in the source file:
I was stuck for a day deciding which color to use. I shared it with several friends and colleagues to gather feedback and ultimately decided on Indigo. I chose it for several reasons
because it’s not that common of a color on the web and makes my portfolio standout more. It also goes well with some of my AI images.
  1. It represents power and dignity which convers integrity and deep sincerity. [source]
  1. I don’t see it a lot on the web, so it’ll make my portfolio stand out more.
  1. It goes well with my AI images.

Cover Images

Some cover images I create using generative AI which I detail in this post
Leveraging Generative AI
. Others I created using Figma. The rest are images from Unsplash.

Development

Framework

This site is built on top of the Next.js Notion Starter Kit by Travis Fischer, which combines Notion-React-X and Next.js to provide an easy experience for using Notion as a CMS.
The framework is Next.js, which is a full-stack web framework that adds server capabilities to React.js, which is a front-end JavaScript library. This project uses Typescript, JSX, HTML, and CSS.

Hosting & Deployment

Portfolio.v3's code lives on GitHub
and is hosted by Vercel which can be found here: