responsiveportfolio

[responsiveportfolio]

Website Development .3

For the last part I mainly focused on creating the elements together I also created pages for the work section of the website as well as slightly changing the picture of myself for the about section. I realized after that I needed to spend more time on the layout work evenly throughout.

[responsiveportfolio]

Website Development .2

After setting up the navbar, I then looked through for images to use for the landing page, after a few images I found the right match, and proceeded to create an intro to the start as well as the starting pages. The font I originally chose did not work with the theme so that had to change, and a few logo drafts until I reached the final close to final version.

after adding particles.js I felt like the site elevated to another level after this I was just missing more interactivity to make it unique which is why I decided to make the icons in the about section green once they tap it (hover function on pc’s).

^^^ (background colour change on hover)

[responsiveportfolio]

Typing Animation

I was looking for javascript elements to add to the site and I needed a better way of introducing myself to future viewers so I found a tutorial on how to create animated text for the website using javascript and CSS, although one thing to add it was not responsive, it would be a shame to scrap the work but I believed I could find my way around that issue.

[responsiveportfolio]

Image change on Hover/Tap

Since I was using font awesome's inline SVG’s it fairly easy to code them to change colour which slightly adds to the interactivity of the site. I wanted to achieve a different effect with the SVG doing a 360-degree rotation (with the colour change) although I did not have enough time to dedicate myself to it.

[responsiveportfolio]

First Draft (Intro to Landing)

Originally I had different plans for the site, I was focused on making it an interactive experience and base it on game development (as it is my biggest passion) but I went for a more subtle design. It was a shame to lose that first concept although it was nice trying a new approach. The first draft included particles.js in the background and an animated button. 

[responsiveportfolio]

Logo Design

Final version of the logo ^^^^

I decided to create a logo for my site, I wanted to choose a clean and concise style for my website so I need a logo to go with it, I always admired the design of the Penrose triangle which I opted in to implement it. The triangle itself is also used as a tab icon within the portfolio site. I wanted to create a logo with my initials only although I did not see a suitable option either I could not find the right font combination to go with it or that it didn’t suit the theme of the site.

[responsiveportfolio]

Further Improvements

For further improvements, I would say I should’ve spent more time doing the code academy courses. I had numerous moments where I had to recollect my knowledge again. In terms of design, I would say I should spend time on the about and contact form of the page, as they seem the most lacking.

And there were moments where I had to use media queries, I had to look for other sources to make my site responsive. I enjoyed this project it was only a shame there was so little time to finish it off completely.

[responsiveportfolio]

Final Outcome

Here is the final outcome that was achieved for the January 11th deadline, I can see that there are improvements that I could make in terms of design and web interactivity but I am very satisfied with what I was able to achieve with the time that I had.

[responsiveportfolio]

Implementing particles.js

After some hours scouring the web for useful elements for the site, I found a javascript library that was perfect for the landing page. After following some tutorials, I managed to implement into the website, it made perfect use of the empty space I had in the background, I decided to limit this only to the 1st section of the site as it can be very texture heavy to run.

[responsiveportfolio]

Almost Final Responsive App

Here is the result I achieved after working through an intense course in Udemy, it helped get a solid grasp of how I can compile code within my app to make site responsive but also interactive.

[responsiveportfolio]

Website Development .1

The pictures below illustrate my working process throughout this assignment, due to the lack of time I felt as I was not hitting my mark although web development is not my strongest skill which gave me a chance to seriously improve it.

I took some courses on code academy and then progressed onto to sketching out basic layouts for the site, I found a course on Udemy that adhered to novice learners in the web development. After 24 lessons I began to hold a grasp of what I’m producing. To keep the website error free I began to annotate each section to keep it organized but also for my self as well as I tend to forget after so many lines of code.

Later on, I decided on a colour scheme which helped me progress onto the design of the site after the basic structure was built I went off to look for further improvements I could make.

Here I was creating my sections and annotating each part for my better understanding, then the I implemented the nav bar below with my first logo that I eventually scrapped.

[responsiveportfolio]

Using Heroku and Node.JS

We were then given instructions on how to publish our sites on a virtual server to see our sites working in full display, node.js was used through command prompt to make contact with the virtual server to publish our sites. This was all provided with the guidance of Mar, who showed us the steps on how to achieve this.

After following the tutorials I could not get the site to upload to heroku, the first few errors I received were the ico icons for the tab bar that I had to remove after an hour of working around I had uploaded the site to heroku. link: https://domsnavportfolio2019.herokuapp.com/

[responsiveportfolio]

Code Academy

We were also given a task to finish 4 particular courses in Code Academy, languages such HTML, CSS, SASS and Javascript, unfortunately, I did not finish all the courses due to some time constraints but I learned valuable techniques that I did spend on I mostly focused on creating a clean and clear UX for the website which is why I put so much emphasis on the landing page. 

[responsiveportfolio]

Website Wireframes

I thought it would be a good idea to sketch the idea for the website first before starting with the work. This provided me a visual basis of where to start. Certain suggestions were not added to the final version although it was helpful to develop a concept in the beginning. Here are the wireframes I sketched out to start.

[responsiveportfolio]

Responsive Portfolio Research

We were advised to look through examples of responsive sites from the website three.js in where we gained a better understanding of how bootstrap performs as well as ideas for inspiration. Here are a few examples of sites that piqued my interest with work again with web development.

First portfolio: https://emmitfenn.com/ was the most visually striking to me, I had a chance to look through the code to see the inner workings of the site although I was still puzzled by the responsiveness of the site.

Second portfolio:http://2016.makemepulse.com/ was another one I particularly liked, the design is very interactive it seems to really engage the viewers of the site.

Third portfolio:https://lhbzr.com/ the last portfolio seemed so heavily detailed yet so smooth, It is really interesting to see how these individuals base their sites based on their skills.