The intended audience for this site is primarily potential employers. It is also a good introduction to me and my work to anyone else that may be interested. Maybe other coding students, or future students. I also hope to build on this website as my skills grow and develop and as I have more projects to add.
I spent a LOT of time on figure out which colours to use. I've always liked the idea of yellow with grey and white. I used those colours recently in a kitchen renovation and think they work well together. But after thinking about that for a while, and seeing some examples from previous students I thought that there were already too many yellow/grey designs around and I wanted to do something different. I looked around and added interesting colour combinations and designs to my pintrest. I remembered doing a tutorial in codepen and ending up with 2 colours accidentally sitting next to each other and liking how they looked together. Yellow and orange. It doesn't sound good, but it did look good.
I thought about it more over the weekend and while at the Marimekko exhibition at the Bendigo Art Gallery I liked the colours on many of the dresses there. I took many photos of pieces of the exhibition so I could spend more time examining the colour conbinations later on. One of the fabrics had yellow, orange and white - which tied into what I was already thinking and did look like a nice combination.
The next step was going onto the computer, adding colours in figma to see how they looked together and checking colour comparison websites to see if I could improve the colours or shades. After much time experimenting I was happy with my colours. I also thought about dropping the yellow and having orange, grey and white. Similar to the yellow, grey and white I love but with orange. I thought that looked quite good as well. In the early stages of playing around with colours I also tried adding dodgerblue (because everyone loves dodgerblue) but unfortunately it didn't make it in the end.
Even though black text was easiest to read on the yellow background I wanted to avoid black text if possible.
I eventually decided to use the yellow and orange sparingly and stick to a white background most of the time with dark slate grey text. I do like grey though so I added an image on the landing page with lots of greys and a bit of yellow. I ended up using the yellow from that image as the yellow elsewhere on the site so it was consistently the same yellow.
Last week I conpleted a YouTube tutorial 'skewed div' which split the screen diagonally. I liked the look of this and wanted to incorporate that angled feel into my design. My original idea was to habe angled bars that scroll over a static background/background image as the user scrolls. This got me then thinking of triangles, to keep consistent with the idea of slanted lines. A lot of sites are so straight and square I wanted to try and do something a little different. Playing around a bit with Figma, I tried various menu ideas to display at the top of the screen. I started with a rectangle divided it into 4 triangles. It didn't look that great, and I couldn't imagine how text might fit in there. I also tried 3 trianges - 2 smaller ones with a large one in the centre of the rectangle. This looked good but still didn't feel quite right. I then flipped it vertically so the middle triangle pointed up and this felt a lot better.
I ended up removing the middle triangle and keeping the two side ones as menu buttons. The middle triangle, between the two menu triangles now just blends into the rest of the page below.
Originally I was thinking of having links for -Home -About -Projects -Contact but later realised I could get away with less. I also decided early on to have the whole site as on page that the user can scroll through or link through to the different sections. I added the Contact section to the end of the About section and it works well.
I was very happy with my mobile design in Figma and thought all the elements (shapes and colours) worked well together.
I wanted a background image that would stay in place while everything else scrolled over it. I also wanted to use the angled block to break up the sections, which I think looks nice when going under the menu triangles and when "About" or "Projects" is clicked on.
I completed the mobile design first and then adpated that to the desktop design. This was fairly simple and looks mostly the same except I included a lot more white space on the final design.
Complete Figma available here: https://www.figma.com/file/LWsJTO86u4lwh6F1eIcdtF7q/Portfolio-Website-Design
Designing a logo was hard. I'm not a designer so I just wanted something simple. I just started with my name, played around with fonts and put lines above and below. I actually ended up using two different fonts in the one word. The capital G is Open Sans and the rest is Kohinoor Devanagari. I made these yellow and from there decided to continue the theme of the long and less-long yellow lines throughout the site design. I used them above and below and headings and also placed the lines without a heading to balance things out after the contact section. I thought this was a nice touch to keep the look consistent.
Again, wanted to keep this simple. I originally thought a white G in an orange circle would look good but then I decided I should probably stick with the theme of angled straight lines so I put in it a trangle instead. I played around with colour of text and background, and then flipped the triangle over so it didn't look like a G rating logo on a DVD.
Having not done any css before the whole project was challenging.
The biggest challenge was the time frame. If I had more time I think there could be a lot of improvements to the site.
The other challenge is my insistance that things look right. My eye-for-detail wouldn't let errors be and I would take time to move things a few pixels rather than moving on to the next part of the project. Being new to css I spent a lot of time researching how to do things and playing around with different options to see what worked. This was good in a way as it helped me to learn what a lot of the functions do but it took a very long time and has resulted in some possibly messy or unnecessary code.
Another big challenge was not really knowing how to code for mobile. I started in codepen just to see if I could get the triangles menu to work and then moved into vs code. It wasn't until a couple of days into coding that someone showed the mobile view in the developer tools on Chrome. I had already done so much that I continued on with how I was doing it and was told I could put in media queries later to fix things up.
One thing that could have been a huge challenge was when my css file was deleted by another student while being helped with my push to github. After he deleted my assets folder I lost images and the css but still had the html open on the screen so I was able to quickly save that again. Luckily I had been viewing the site a lot as I coded and was able to inspect the css there and copy it and create a new file. It wasn't too hard to find the same images again and copy them back in as well. This could have been a huge disaster but worked out ok as I still had the tab open.
Also challenging were creating the little yellow lines of different lengths to go with headings, etc. It may not look like much but they caused a lot of headaches but I was determined to get the site to match my design as much as possible.
Figma was also challenging to learn but I got the hang of it by the end. I would have preferred to design with pen and paper.
Lots of other "little" challenges that took a lot of time but also taught me a lot. I'm happy with how the site has turned out though.
The biggest positive out of this project is dealing with all the challenges and learning so much from them. I feel like if I was to make another site it would take much less time. I think this was a good way to learn and might make other sites to help me learn grid and flexbox in the future.
Another highlight was the fact that, even though this is a personal project, having a team of others around me to ask questions and seek advice was very helpful and I was able to repay the favour when questions came my way. Being in such a supportive environment was hugely beneficial and I wouldn't have finished to anywhere near this standard had I have worked from home or elsewhere.
This site contains a link to my github page if any further information is required.