Demo of https://v1.kalenwallin.com
Portfolio.v1 was the first portfolio website I created in an effort to get an internship.
Experiences are split into categories. Each category shows a different page of experiences.
Experiences are divided into cards. Each card has a:
- Cover image: 1364x768 resolution
- Short Description
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.
Once you click on an Experience Card, its modal appears. This modal contains
- Title of the Experience
The content typically is a description of the experience that contains text, images, or interactive content like video games, PDFs, or iframes.
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.
The source code is available on GitHub:
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.
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.
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
Kalen Wallin | Portfolio.v2
Showcasing his skills through jobs, projects, school transcripts, community service, and life experiences.
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
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.