Lia Duguran

Portfolio


- back -

About


PHP | SASS | JavaScript | jQuery

Portfolio website used to showcase my work as well as providing a way to contact me.

scroll

scroll down arrow

Design


portfolio website, shown on multiple devices. Desktop, laptop, phone and tablet portfolio website about, work and contact page shown on mobile Portfolio about page Portfolio work page Portfolio details page Portfolio contact page

Color Scheme

#C9B78F

#F1F1F1

#FFFFFF

#000000

Process


Portfolio website wireframes Portfolio website wireframes Portfolio website wireframes

I wanted to give my portfolio a unique look by adding fixed borders, allowing the users to easily access the navigation bar and social media accounts.

In the beginning, I wanted to create a fun vibe on my portfolio, using strong, bright colors. After multiple mockups, I realized I wanted a more neutral color scheme to complement my previous projects.

Portfolio, colorful mockup idea 01
colorful mockup idea version 01
Portfolio, colorful mockup idea 02
colorful mockup idea version 02
Portfolio neutral mockup idea
neutral mockup final idea

Usability


In the work page, the user can navigate through the sections by hovering and clicking the item they would like to view, which will scroll to the selected item. As the user scrolls on the page, the buttons also change colors to indicate the location of the user.

work page navigation bar functionality
screenshot of the code used for the button coor on scroll
code used to change button colors on scroll

In the details page, the same navigation buttons are along the border, allowing the user to view other projects. The left-hand side of the page stays fixed, that way, the user can view the live website without having to scroll back up. For mobile, the website link is fixed at the bottom of the screen.

detail page features

Inspirations:

awwwards

wokine

kinfolk

codrops

Note: the development of this website started before the knowledge of WordPress. HTML was initially used but changed to PHP in order to reuse code.

- back -

- more projects -

Merry Me

Milk Studios

Weather Forecast

Movie Database

Japan

Portfolio