Portfolio.v1
Portfolio.v1

Portfolio.v1

Tags
Web Dev
Projects
Blazor
Graphic Design
Cloudflare
Published
December 14, 2021
Author
Kalen Wallin
api_v1_role
Web Developer
api_v1_company
1st Custom Portfolio
api_v1_type
Personal Project
api_v1_category
Websites
api_v1_year
2021
api_v2_order
14
 
notion image
Portfolio.v1 was the first portfolio website I created in an effort to get an internship.

Notable Features

Category Navigation Bar

Experiences are split into categories. Each category shows a different page of experiences.

Experience Cards

Experiences are divided into cards. Each card has a:
  • Cover image: 1364x768 resolution
  • Title
  • Short Description
  • Date
Cards are displayed as just the cover image. When hovered over, a container holding Title and Short Description appears using vanilla CSS animations.
Clicking on the card causes an Experience Modal to appear.

Experience Modals

Once you click on an Experience Card, its modal appears. This modal contains
  • Title of the Experience
  • Content
The content typically is a description of the experience that contains text, images, or interactive content like video games, PDFs, or iframes.

Dark Mode

Has a toggle button in the navigation bar to toggle dark mode on or off. Powered using JavaScript to add a CSS class to the body element.

Graphic Design

I designed most of the cover images myself using Adobe Express and Figma. Some covers, like baldorf and Minieval, were already designed and I just put them into a format and resolution that worked well for my site.
The navbar icons come from Open Icon.

Development

Framework

I created this site using Blazor Web Assembly (WASM) which is a part of Microsoft’s .NET framework. The programming languages include C#, JavaScript, HTML, & CSS. It is entirely a front-end website running completely on the client-side browser.

Deployment & Hosting

The source code is available on GitHub:
portfolio.v1
kalenwallinUpdated Jul 8, 2024
This code is built and compiled to the new branch gh-pages using GitHub Actions. Cloudflare detects when a change is made to gh-pages and automatically deploys this code production. I configured my DNS to serve this website at http://v1.kalenwallin.com.
This site was originally hosted by GitHub Pages. However, I found Cloudflare to offer higher performance than GitHub Pages, which is why I made the switch.

The Problem

Scaling

Everything on this site is hard coded. That means if I want to make a change to the content, I have to edit the source code and push the changes.
This is fine in a simple app like a portfolio. But as I share more and more experiences, the pain of making rewriting code on the site becomes overwhelming. That is why I designed a new portfolio called Portfolio.v2, which I hope will solve the problem.

Partly Fixed in Portfolio.v2

Using the popular full-stack framework Django, I created a new portfolio using a data-driven mindset. I only wrote code for an element or component once, then reused that component every time I added a new project.
This saves a lot of time and space in the code repository. It also is the way most websites these days work. Think about a social site like Twitter. If they had to manually edit the source code each time someone tweeted, then their source code would be trillions of lines of code (not to mention this would be impossible to execute).
Read more about my experience developing this site here
Portfolio.v2
Portfolio.v2
Or visit the site to experience it yourself here

Fully Fixed in Portfolio.v3

I now use a content management system called Notion to write blog posts for my stories, which are then rendered into HTML on Portfolio.v3. Since I like working on my old portfolios, I embed the new content into the site through the use of iframes. This allows me to only have to write content once, and it displays the same throughout all my sites.
Read more about my experience with v3 here
Portfolio.v3
Portfolio.v3
Or visit the site here

Future Work

I’d like to be able to pull Notion components from Portfolio.v3 and render them in the styles of each portfolio to avoid the use of iframes.