Developing Process

My idea of building a personal website is to help people get to know who I am and use it to promote and document some of my photographs and videos at the same time.
First, I picked four inner typologies, a content heavy page “Biography” for my information and resume, a photo-rich page “My Work”, a time-based page “Timeline” and a form page “Contact Me”. After I decided what my four inner pages are, it is time to design the style of the inner pages. I get a lot of inspirations from my old design for CCT 260 shown below.
I keep the color tone becuase bule and purple are my favourite colors. I think they can represent me the most. Furthermore, I want to make sure the color is not too monotone and lost its contrast, so I add an orange background color to where the dark texts may appear too blend in with the background image.
old design 1 old design 2
Here are some initial wireframe sketches with my thoughts on different visual components listed on the side, as you can see I made a lot of changes after I started codings.
old design 1 old design 2
old design 1 old design 2
photo of myself
The most challenging part to code is “My Work” page, I wanted to included a carousel and picture modals in my page but I’m not very familiar with the Javascript yet, so I tried a lot of times to fixed the problem, I think the one took the longest time is trying to apply the modal effect on every picture. But luckily I found some help on this website and fixed the problem.
But the caption on the carousel still appears on top of the modals when I click on the modal pictures. So I have to get rid of 'z-index', then It worked.