MP0: Portfolio

Project Description

My first project of HCDE 438 marked the creation of the very website you are laying your eyes on! Take a look at my process & reflections while creating this site with HTML and CSS.

• Duration: 3 days
• Service: Creating a personal portfolio site
• Tools: HTML, CSS, Figma

As someone who has previously played around with HTML, CSS, and Javascript, creating a portfolio site did not seem too daunting. However; as someone with a very design-informed background, I knew I wanted to challenge myself to make a website that was at least visually appealing. As I played around with different CSS styling options, I found that tinkering and creating small changes with code helped me refamiliarize myself with the process of programming from scratch.

Development Process

While I wish I could say I had more of a streamlined process, the overall process I took to create this site can be broken down into the following:

1. Crafting from previous works
2. Writing & Rewriting
3. From time to time, look for inspiration!

1. Crafting from previous works.
What made this process easier to begin with was that us students in HCDE 439 were given an example website to work on as the foundation of our portfolios. This gave me a good idea of what content was required, and actually made me realize to take a look at my personal Product Design portfolio to refresh myself on how I prefer to structure my websites.
2. Writing & Rewriting
With my personal portfolio as a reference, I started creating a simple site using HTML while also consecutively creating a CSS stylesheet. I found that during my time writing out my code, I was constantly saving to see the live HTML page refresh in real time, and there were many instances in which I had to rewrite my code or take a look to see where I might be missing brackets.
3. Asynchronous sprite movement for stink bugs
The last thing I needed to figure out was looking into how to make my enemy sprites move back and forth to add an additional level of challenge to the player. I implemented this part of my code by first testing on the P5 play documentation to understand the logic and then mirror the same thing in my code.
4. From time to time, look for inspiration!
Personally, the hardest thing for me was constantly stopping and rewriting my code until I was satisfied with the visual look of everything. Even so, I found that looking at my personal portfolio website and looking at other design inspiration helped me think closely about how I might create certain components in HTML and CSS.

About that Typewriter…

For my CSS transition, I decided to use a typewriter animation that typed a welcome message for all visitors, titled "Kumusta, I'm Frannie." or "Hello, I'm Frannie." in which "Kumusta" is a welcome greeting in Tagalog. I chose a typewriter because it is a simple animation, yet is very effective in gathering attention without being too flashy. While this transition is able to be done in Javascript, I found that it was also something that could be easily implemented in CSS, in which I played around with Codepen to understand how it works before adding it into my site.

Issue Deep-Dive

One of the biggest challenges while finishing my portfolio site was learning how to adapt a pre-made CSS transition to my own program. Animations in CSS are an entirely new concept to me, but I found that tools such as Codepen allowed me to understand the basics of CSS animations. When implementing my transition, I kept running into an error in which the cursor kept continuing past the width of the text content, creating an odd trailing cursor that moved back to it's intended end position. I found myself tinkering with my code, looking up definitions and fixes online to make small changes here and there, but I couldn't entirely figure out a simple way to change the settings of the CSS animation. It wasn't until asking my instructors in HCDE 438, who gave one of the simplest fixes: adding a div. Overall, my biggest learning lesson from this assignment was: HTML is essentially boxes within boxes.

Reflection

Looking ahead, I'm incredibly satisfied with the beginning of my work in HCDE 438, and I'm looking forward to our future projects! Of course, there is always room for me to learn and improve, and I think I would definitely want to focus on the following in the future:

• Learning how to make this responsive. While the website looks fairly great on my laptop, it is not the best looking on mobile. I would definitely want to learn more about creative responsive websites!
• Adding micro-transitions While very subtle, I feel that small transitions across certain elements adds a nice visual appeal as well as makes the experience feel very elevated.