Experience Website
Brief
I utilized HTML/CSS to build a portfolio website specialized for the projects completed in my Experience and Interaction class, incorporating multiple animations and interactive features.
Type
Front-end Development, UI/UX
Medium
HTML/CSS, Figma, Visual Studio
Concept and Planning
- Website: Portfolio
- Content: Projects I have worked on in ARTF2223: Experience and Interaction during Fall 2022
- Audience: Peers, other designers, professors, and recruiters
- Context: Linked on resume, LinkedIn, other portfolio, etc.
- Purpose: Conveying design work and processes with a clear, organized website that’s easy for users to navigate
- Immersion into a portfolio website that conveys style and feel of my work
Research
I read about essential elements in a portfolio. It explained elements like case studies, the about page, testimonials, etc. It was helpful in deciding what kinds of information needs to be included in my portfolio website as well as other ways to build it, like using WordPress and plugins for certain elements such as contact forms.
![]()
I also read about the purpose of a portfolio website and why it’s usually necessary for designers to have one. I viewed many different portfolio examples of layout of design work, as well as tips for creating miscellaneous pages like the About page. I learned about “bird’s eye” views for the home page (which is what I ended up implementing).
![]()
I later learned about the different kinds of animations that can be implemented. I focused on mostly the hover animations as well as the visual feedback in general, since I did not want to go too overboard with animations but I wanted to keep lively, interactive feel to my website while keeping it clean.
![]()
Wireframes
Incorporating Access
I made sure to consider access in my Figma designs and final website to improve user experience and make it more efficient and convenient for users, including:- Checking color contrast using Figma plugins – improving readability
- “Skip to” and “Back to top” buttons
- Multiple ways to access pages
- “Back to Projects” button
- Buttons to view previous & next project at bottom of project pages
- Meaningful cues and consistent layouts
- Clear headers
Code Implementation and Animations
To transform my Figma designs into a website, I used HTML and CSS in Visual Studio.
![]()
To make my website feel alive and interactive for the user, I implemented various animations, including:
Gradient animation around each project in Home/Projects page
Hover over projects → highlighted box, project info & View Project button appear
Button interactions:
hover → button color changes
active → color changes again
Smooth scroll for “Skip to” and “Back to top” buttons
Name gradiant animation in header across all pages
Final Website
Click here for the GitHub repository!