Portfolio
Selected Works Archive
My Role(s)
- UI Designer
- Front End Developer
Tool(s)
- Adobe XD
- JavaScript
- jQuery
- SCSS
- CSS Grid
- Google Analytics
Playful but Professional
Before anything, I want to describe what this portfolio means to me:

- Playground : a place to experiment my design ideas
- Exhibition Hall : a place to showcase my technical abilities & passion
- Extended Name Card : a place that shows who I am - my work attitude, style and personality
- Sharing : a place to connect, where I can share my development journey with people in the amazing dev community! :)
Other Important Notes
- This portfolio is fully-responsive, assessible, and SEO optimized.
- After building the basic layout, I have a love-hate relationship with how this portfolio looks.
- Yet I enjoyed so much building what I had in mind. The amount I've learned in the process exceeds my occassional dislikeness of its appearance. That's why, I'm actually already excited about creating my Version 2. :)
What You'll Read About
- What is the vibe I'm going for, and where does its inspiration come from?
- How was my brainstorming & design process like?
- How did I build my responsive layout more efficiently?
- How did I build responsive page titles?
Design Process:
Development Process:
Early Experiments
My childhood memory sometimes affects me so much that I didn't even realize. This retro bus is my first memory of 'a bus', I loved it and I still love it. Unfortunately, I never see it running again since I went to primary school.

My way of brainstorming design ideas usually consists of playing around Adobe XD and creating moodboards. I didn't know what I wanted at first but I happened to feel resonated with one particular vibe. I later realized it has some resemblance with that retro bus I always missed.
Since I can design any way I like for my portfolio, I decided to experiment and explore more on this vibe:
- Colour combination: Orange-red & light tan
- Vibe: Retro or historical

The layout is inspired by my moodboard that consists of elegant restaurant menus and print magazines.
Retro Elegance
Combining the elements of retro and elegance, I created these mockups for my portfolio in Adobe XD:.


Some Changes:
I followed mostly my design, but I changed the followings as I was developing:
- Black lines and page titles are too harsh and heavy. I changed them to orange and semi-transparent orange.
- Changed layout on "About" Desktop page because I ended up writing more than I expected which does not look good side by side.
- Hover state in "Works" page for Desktop is too annoying. Bye!
- Can't decide what else to put on "Contact" page except my contact details. Since those details appear elsewhere already, this page will be redundant. Contact page, Bye!
- Added a "View Live" button to "Individual Project" pages.
- Added a "Back to Top" button to "Individual Project" pages.
- Added my contact details also in "About" page because why not? :)
- Added Instagram icon link to my contact details because later I started an Instagram profile to record & share my web development learning journey!
Styles

Realizing the Potential of CSS Grids
Elements in my portfolio move around as the browser width widens. My main navigation & page titles, for instance, have the biggest changes. I'm excited how CSS Grid's 'grid-template-areas' makes my responsive web designs a lot more efficient to build.

Grids within grids:


See the Pen Portfolio grids by lam-tiffany (@lam-tiffany) on CodePen.
See the Pen Works Grid by lam-tiffany (@lam-tiffany) on CodePen.
The Magical Data Attributes
Look at the below image again, but this time please pay attention to the responsive page title "Works" & "WorksWorksWorksWorksWorks".

This is how I did it with Data Attributes:
See the Pen Page Title Data Attribute by lam-tiffany (@lam-tiffany) on CodePen.