This was my first attempt at creating my portfolio website. I have since created a new portfolio website at maximerrillees.com.

This is the first website that I designed and developed from scratch. My goal was to create a clean and consistent design and learn a lot along the way. Specifically, I wanted to learn how to position elements on a page with grid, create and deploy SVGs, and use animations and effects to create visual appeal.

1. Design the website
2. Develop the website layout
3. Add and format content to the website
4. Refine the content and layout
5. Publish the website on netlify

The website was designed on figma. It was the first time I used the tool but it was easy to pick up and turned out to be a fantastic tool. I will definitely be using it again.

I began by looking for design inspiration. I eventually settled on the 'art deco' style. I liked the clean lines and it seemed doable for someone with limited design/SVG-creation experience. My goal was to create an art-deco style website that didn't look too dated.

I began be wanting to create four distinct sections in my website; one for a homepage, projects section, skills section and contact me section. I found four different art-deco colour themes to base each section on. I liked that each colour theme used different shades of the same colour. I also really like that the colours were pastel shades that are easy on the eyes.

Next was the text. Google fonts had a lot of art-deco style fonts but only liked one. I used that font throughout the site, except for the menu-bar and section headings. I styled the menu bar and headings on menus in video games that had an art-deco style.

Creating and finding the SVGs was the hardest part of designing the website. This was a big limiting factor in my design. I had some ideas I couldn't deploy because I couldn't find or create the shapes that I wanted. Thankfully there are a lot of open-source SVGs out there I could use. I ended up using SVGs for all the icons and the city-scape. I created the corner decorations and spotlights.

After a lot of trial and error, I abandoned the idea of using four different colour themes. It didn't look great. I reduced the number of sections from four to three and stuck to two different colour schemes. This looked cleaner and it saved me a lot of time.

I eventually settled on a design that I liked and could start coding!

I've tried to create one other website before and I remember having a hard time laying out the website the way I wanted to. So this time I wanted to completely create the layout first before adding any content.

I used grid to place my divs because it was the tool I was most familiar and comfortable with using. It ended up being very easy to use. I was able to finish the initial layout in a short time. I could place all my divs where I wanted to and it was easy to change the placement of each div.

Next was filling out each of the divs with content. I began by adding in the SVGs because I expected them to be the most challenging type of content to add. I was right. The biggest problem was getting the SVGs the right size and getting them to scale when the browser size changed.

I tried many different display types, position types, and ways of placing content within the container. After a lot of trial and error, I eventually managed to get the SVGs to the right size and position but none of them scaled with the browser perfectly but it looked good when displayed on a full browser page and a mobile phone so that was good enough for a first try. Also, I had other things to do and a limited amount of time so I had to move on.

Next was adding in the text. Adding the text through index.html was easy but positioning the text within each container was a challenge. Like with the SVGs, I had a hard time positioning the text in the right place within each container. I eventually got everything to where I wanted it to be through trial and error. By this point, it became clear to me that I need to develop a much better understanding of the different display and positioning options. But that's for another time. It looks okay for now and I needed to move on.

The last thing to add was the menu bar. I went through many different design iterations with regards to placement and functionality. I couldn't implement some of those designs because I didn't know how to display and position them the way I wanted. I eventually settlled on a design that I could implement - not my first choice but it looked good enough.

The form was relatively easy to add. I found a tutorial on YouTube that walked me through adding a form and I adjusted it to match my design and fit my page.

This took a long time. Most of that time was spent adding the text content and positioning each element to display the way I wanted them to. I also got new ideas along the way and changed the layout accordingly. Using grid made it very easy to change the layout.

I also spent a lot of time adding in effects. I had wanted to add in a lot of effects and animations from the start. I didn't deploy most of what I wanted to do because I didn't have enough time to learn how to do it all, but I managed to add in the smooth scrolling effect and some hover effects. I'm really happy with them. Unfortunately, I couldn't figure out how to add hover effects to SVGs. I wanted the spotlights to 'turn on' when someone hovered their mouse over them. I came close but ran out of time. Something to figure out for next time.

I couldn't believe how easy this was to do. It took me less than three minutes to sign up for an account and deploy the site from my github account.

1. Learn how to properly use each display and positioning option. I had no problems developing the website layout but getting every element to do what I wanted within each section was a challenge.
2. Test the website on a variety of browser magnification settings. I designed the website based on 150% magnification which is what I use. If I zoom out to 100% the design falls apart.
3. Learn how to create SVGs. Images are important and add a lot of visual appeal to a website. I think knowing how to make basic nice-looking SVGs will go a long way.