Coding Creation
Personal Brand
The first stages of development of a generative AI feature for Jaster Athletic's JABA AI mobile app.
Overview
Role
Designer and Developer
Timeline
Feb - March, 2024
Deliverables
Wireframes
Hosted website
Tools
GitHub
Visual Studio
The Problem
Before this website you see now came to be, my portfolio was a personal website I coded from scratch. This project became an after-hours endeavor of mine, and was my sole passion project for months. This is still the largest coding project I have done to date, because coding is still just an after-hours hobby for me. That said, I learned a lot making this website, and it serves as a time capsule to look back on.
My Role
This was an entirely self-made project, meaning I was my own product manager, designer, and developer. I got to experience every aspect of what goes into creating a website, which has made designing for the web come naturally to me. My ambition in taking up this task gave me valuable experience with front end development which has greatly aided my design skills from there on out.
Project Goals
-
Create a visually appealing website
-
Represent my past work
-
Create and host the website for free
-
Communicate my personal interests and values
Abstract
While this project is one that I can tear apart in a design critique (I feel the need to highlight the blaring accessibility concerns found throughout), I am still immensely proud of the work I did here. From blank files in Visual Studio Code, I wrote this website from scratch. It is something that takes an immense amount of time, patience, and problem-solving skills, especially for someone doing it for the first time, as I was. I’d been coding small projects in Python since high school, but front-end development wasn’t anything I had any significant experience in. As the designer and developer I had a level of freedom that was really exciting, and I was able to rework designs multiple times as I reassessed limitations from a coding perspective. This project was key to developing my ability to design for and communicate with development teams in my future work.
Let's get into the details
Personal website version 1, circa 2023.
Version 1
Have we been transported back into the last decade? Nope, that’s just the 2023 version of my website (pictured above). This was a preexisting design that I had made it for a class almost a year prior and would use as a launching off point for this project. This design showcased a lack of planning on my part. I had simply jumped right into the coding process and thought I could come up with the design along the way. However, this strategy did not result in a compelling personal brand by any means. It was a solid start thought; I had the file structure of my website laid out, and revisiting it got me excited to make a new portfolio with the skills I had gained since.
Wireframing and initial design plans for personal website version 2.
Version 2
I decided to backtrack and redesign starting with wireframing. Here I had a clear brand vision, using the color green to symbolize my work with environmental sustainability issues and my Spartan pride. I actually still like this design today; with a few tweaks I think this could be a really great portfolio. Plus, it was a simple design that was easy to code. I relied on easy flex box and grid layouts to design a simple, functional site. For example, the “Past Work” section is simply three divs that I made flex items that are center aligned. However, the design still felt unfinished and wasn’t where I wanted it. Down to the projects I had chosen, this portfolio was not representative of me or my skills, but the layout and style was starting to come together.
Personal website version 2, circa February 2024.
Wireframing and initial design plans for personal website version 3 (final version).
Final Version
I went back to the drawing board again and came up with a new layout that I felt was more interesting, both visually and developmentally. A big change I made was to code the mobile version first, since mobile is the majority client of web traffic today. Since mobile was the hardest part for me, once I had it completed it was easy to adapt to new versions. After testing responsiveness on multiple screen sizes, I ended up using media queries to create three versions of the web page which I felt covered my bases. This included one layout for mobile, one for tablet, and one for desktop/laptop. I completely changed the way the navigation bar functioned, changing it to a hamburger menu that actually uses a CSS checkbox element to trigger the transition. This was a trick I learned from Warren Davies’s blog as a workaround to breaking out a JavaScript file for this one function. Finally, I hosted this website for free through GitHub. You can check out the final product for yourself here.
Check out this version for yourself here (rachel-hoffman.github.io/portfolio).
Reflection
The final website is (for the most part) responsive and scalable, a feat which had seemed impossible in the middle of this project. The coding files are clean and organized, and looking back on this project makes me want to dive back into them. There is a lot I would change about the design of this project, which I hope is obvious as you scroll this newest version of my portfolio website you are currently on— however, the front-end development skills and insight that I learned along the way are something that I find invaluable.