Demo of https://v1.kalenwallin.com
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
kalenwallin • Updated Sep 27, 2023
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
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
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.