INTERACTIVE DESIGN / EXERCISE 3

Naura / 0356798 / Interactive Spatial Design
GCD60904 / Interactive Design
Weekly Exercises

__________________________________________________________

Week 3 exercise: Personal CV Page

Our task include:

• Design and build a personal CV page using basic HTML and CSS to practice organizing information and creating a clean, professional layout.

__________________________________________________________

To start off, I began by surfing pinterest and try to find inspirations on how should my CV look like. I would say most of the CVs that caught my eye- visually uses a modern, clean design with organized layouts that guide the eye smoothly through each section.

Fig 1.0 | Inspirations for my CV

I then created a low-fidelity wireframe to outline my ideas and serve as a guide for the layout, ensuring I had a plan and wouldn’t need to make excessive adjustments later.

Fig 1.1 | Low Fidelity Prototype

Afterward, I reconsidered the section indicating my design department. For a portfolio website, I thought each item in this list could link directly to my work in that area. It seemed like a good opportunity to enhance this section with animation, so I decided to explore it further—not because it was necessary, but to challenge myself and push my skills a bit.

Fig 1.2 | Screenshot of my CV

And this is the link to my Netlify 

And this is the code I coded to make my CV:

Fig 1.3 | Code

Reflection: 

It was challenging to make my CV both professional and visually appealing. Initially, I wanted to include my spirit animal as a personal touch, but I realized it might not be the most professional choice. This project turned out to be a valuable learning experience that deepened my understanding of web development and design. The process of debugging and refining the design taught me to troubleshoot my code, which improved my problem-solving skills. Although I struggled with an issue that placed an "X" in my document—fixing it caused the entire layout to look wonky, and I ran out of time to debug further—I was able to make it work in the end though.

I also discovered that you can create animations with just HTML and CSS, which I previously thought required JavaScript. After seeing an Instagram reel demonstrating it, I tried it out right away and was excited to incorporate it into my CV. This allowed me to add a personal touch and make the design more reflective of my style, making the CV unique. Overall, this exercise was both fun and educational, giving me a hands-on introduction to web design.