Rewrite with react, create everything with components. Add more content - possibly expand more on work knowledge and personal projects, have main section where content changes depending on toolbar/navbar click/request.
https://www.figma.com/file/Bf41ZvP3dI1GMq8yshdGhIVD/Proper-Mockups?node-id=7%3A35
I wanted to produce a website that accurately represented both my skill sets in front end development and my preference in layouts and colours. A simple yet clean approach, I want to display as much vital information about myself yet be extremely brief and keep the viewers interested enough to continue reading/scrolling.
In my design I was intending for a simple yet elegant approach. I wanted my colours and layout to be appealing to the eye yet not be "to much". I wanted to find the niche between plain and boring and obnoxious and overbearing. I wanted to remove complexity from my design and have a straight forward single page "scroller". I believe white text on a dark/black background displays that crisp, easy on the eye effect I was looking for. I also wanted to involve pictures relating to my text to add that little bit of extra personality to my website.
I can't stand overbearing fonts. I believe a simple, structured clean font is always going to be the best for reading. Easy to read, nice to look at and neat. My font decisions were a rather peculiar process. I would go to the google fonts website and scroll as fast as possible and suddenly stop, examine the fonts displayed on the page and test them out on my figma mockup. I found Hind and Monda to be quite appealing and exactly what I was looking for. I also found Handlee to have the simpleness I was after but also to look a bit fancy to break the monotony.
I believe the first page that a user arrives on in a website is the most important. I kept information and text to a minimal to avoid immediate boredom. I wanted something to capture my user and make them intrigued and want to scroll down to find out information about me. I viewed hundreds of different suitable background images and narrowed it down to few choices. Once again I wanted to find the niche between boring and overbearing.
I wanted to display as much vital content as possible yet at the same time be very brief. In my opinion a portfolio is similar to a resume in the sense that an employer will be on my site for 20-30 seconds. Therefore I avoided like the plague 1000 word monologues telling my life story. I wanted the first content the user would see was what I am doing. In the future I can easily adapt/change this area to seeking employment, self learning, working at "" etc. I thought while I still have their attention to get the most important part out first. I also wanted to explain why I am doing what I am doing. In my work history I really wanted to highlight my vast experience in my family business because I believe that has vital importance when compared to traits commonly sought after in software development. I also used pictures to provide a bit of personality, as well as the old saying " a picture tells a thousand words."
I would say I was borderline ignorant when I thought I didn't need a design/mockup and I could do that no problems. Boy was I wrong and I am glad I figured that out with a bit of time to spare. I believe my HTML structure was excellent however without a solid plan, the CSS part was a real struggle. I completely redesigned my website on figma paying close attention to details of fonts, padding, borders, sizes etc. From there I wrote css mobile first as advised by my teacher Patrick. Constantly doubting myself and having meltdowns. I decided to use bootstrap and then decided not to use bootstrap atleast 5 different times. I eventually calmed myself down and reminded myself my beginning intent was to write pure html and css. I got mobile working, added a media query for 768 px and 1440 but only minor changes, just sizes of fonts and headings. I was trying to implement something else when I accidentally put in a header nav bar that only appears once the user is in the content/main of my website. I liked it so I decided to keep it.
I want to change my ruby project image to a transitioning image of the example used as well as a screenshot of some code I wrote. Same as my tesla clone example I would like to have an image transition between google, tesla and pinterest clones I created. I would also like to implement a contact form rather than an email link.
Even though HTML is commonly looked down on as easy because it technically isn't a programming language I pride myself on my neat, well structured, readable code used in my index html file. I find that badly/lazy written HTML can be an absolute nightmare both to read and to navigate around. I purposely lay out my code with the intent for anyone reading it to be able to follow along easily and not get lost in an endless maze of HTML.
- Figma
- FontAwesome
- Googlefonts
- Google Chrome Developer Tools
- Atom text Editor
- Udemy
23-02-2017 Had a full working site for a galaxy s5 but zero responsiveness what so ever. Started making small changes with reference to my figma mockup. Once again mockups proving to be so incredibly valuable(a week ago I was saying what a waste of time they were, had it all planned out in my head. BAD IDEA). Got ipad responsiveness working with media queries. Also implemented a fixed nav-bar which follows wherever you scroll. Did it by accident trying to achieve something else but I liked it so kept it. Adding final touches like proper hyperlinks.
22-03-2017: Spent all day coding up a solution to my figma mockups. I think I have it damn near perfect, I have changed a few things along the way like padding sizes and borders etc. The indecisiveness was so strong. Every few minutes thinking about making everything responsive then calming myself down and reminding myself to just get mobile working first. Deciding to use boot strap then deciding not to use bootstrap at least 5 different times. I eventually stuck it out and wrote pure css and html. Finally got something I was happy with.
21-03-2017: So today I got home, ate then sat down at my computer for 5 or 6 hours on end and completely redesigned my website in figma. I created three mockups, galaxy s5, ipad and desktop size. I really realised the significant importance of mockups when creating your website after my teacher Patrick did a demo.
17-03-2017. Today we finished our mockups/wireframes. I experimented with several different header/background images as well as different text fonts, sizes and colours. I have the basic html structure down with a small amount of styling