The aim of this project is to create a personal portfolio website. The intended audience will be future employers and clients. My goal is to create something professional but that is also unique and will stand out. The content on my website contains information about me, examples of the projects I've done and contact information.
See full figma plan at: https://www.figma.com/file/aBBEp663xXrIH2ShnEmkfKcz/Jessica's-Personal-Portfolio
When I first started planning this website I struggled to find inspiration. I tried doing a color palette of my favorite painting and even a color palette of my cat!
As much as I liked these colors I just couldn't picture them on my website. So I thought about what else I liked and decided on a winter theme using the below color palette:
I chose the winter theme because I lived in Canada for several years and I love winter/cold weather and the colors associated with them. However, the design I came up with still did not quite work. Many of the elements did not mesh together very well (or weren't relevent) and overall the design looked a bit boring.
I did a mood board on pinterest mainly of color palettes and pictures I liked. It didn't really help me very much but it was a nice place to look up my chosen color combinations and see what ways they can be used together.
I decided to start again, and my next design was the one I kept!
For my final design, I kept the dark grey color I had been working with previously and added orange. I also used white and some lighter colors for text etc.
I really love how the orange and grey work together so well. It also made me feel nostalgic as these were the colors I used to decorate my first apartment - so it seemed fitting they would be what I use in my first website! As an added bonus, the colors also match my pet cats (one is grey and one is orange) 😺.
When it came to the logo I knew that I wanted it to incorporate my initials but I also didn't want it to be boring. I felt that it should include a bit of my personality so I tried a few different versions were I incorporated a cat into the letter 'O'.
Once I had my final color scheme picked I settled on the final logo design:
I chose two fonts for my website, Yantramanav for headings and Montserrat for paragraphs. They are both simple, clean looking fonts that will be easy to read.
I tested them in my color scheme to see what color went better with each background.
I wanted my website to have a simple layout that was not overly cluttered. There are four pages - home, about, projects and contact.
Below is an example of the mobile layout. I aim to keep it very similar in the desktop and tablet versions.
Originally I wanted swipe navigation on my website but as I was trying to only use HTML and CSS I could not find a CSS method to implement the swiping function. There were some ways but they would not be compatible with many browsers and may not function very well on some devices.
I went with a navigation that requires the user to actually press the labeled button. It uses anchor tags to link to each section.
The 'About' section contains a brief bio about me, a downloadable CV with an icon to show it is a pdf file and a list of my skills (the ones I'll have when this class finishes).
The 'Projects' section is very simple and provides a brief description of each project along with a link to its Github page.
The 'Contact' section contains a contact form and icons that link to my Github, Twitter and LinkedIn.
The coding for my website was fairly straight forward once I had my design finished. I used flexbox to lay out the structure of the page. I did spend a lot of time trying to fix small things, like a box that is out of alignment etc. It took a while to figure out how to fix things without detroying the whole site!
Because I spent so long trying to figure out how to do a swipe navigation my actual navigation is not quite set up how I want it. But that is ok because I will likely add some javascript at a later point.
Due to its simple layout and use of flexbox my site is reasonably responsive but I still needed some media queries to make it look more organized and make the most of the extra space when viewing on a desktop. I still need to work on landscape view for mobile - it works but could be better.
There were many challenges. Finding inspiration and settling on a design were probably the hardest parts for me.
Trying to use only HTML and CSS was a bit hard when it came to not being able to implement a feature I wanted such as the swiping navigation. However, it helped me learn more about what CSS has to offer.
It was difficult to make it fit the screen for certain mobile browser such as Safari as they pushed my nav bar out of view. I am still working on a solution for this.
Another challenge is spending a long time doing things a certain way and then learning a better way but not having enough time to implement it!
I used many useful resources:
- Figma
- Slack
- VS Code
- Netlify
- Github
- Animate.css
This website is licensed under the MIT license. (https://opensource.org/licenses/MIT)