Portfolio

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

Design Process:

• What is the vibe I'm going for, and where does its inspiration come from?
• How was my brainstorming & design process like?

Development Process:

• How did I build my responsive layout more efficiently?
• How did I build responsive page titles?

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.