Skip to main content

Creating an online portfolio


Another crucial element of assembling an online personality behind a brand is creating an accessible portfolio (or e-portfolio) which demonstrates skills and previous experience in a specific field. For that purpose I developed my own online portfolio using Bootstrap. But before I dive into the process, here is an example of my previous attempt of creating a live website concentrating on my ambition to become a web designer
 

The prototype was designer in Adobe Muse but was never published online. It was mainly built for one of my university units during the first year of my studies. My career goals and ambitions were still a bit vague and needed more clarification (which came eventually by looking further into the industry and acquiring work experience).
The presentation mainly relies on using dark visuals which in some cases might be considered as a trademark for one's creative work (e.g. photography or filmography). However, for a web designer, creating content which catches the eye and demonstrates creativity by using abstract shapes, iconography and vibrant colours is crucial for making their work stand out. This is why the portfolio design above would not be beneficial when it comes to applications.
In terms of its technical performance, several aspects should be mentioned:

  • Heavy use of images - this would cause longer loading times (with images being the biggest asset of websites in terms of their size)
  • No actual demonstration of knowledge in CSS and HTML - the prototype as mentioned was designed on Adobe Muse - a software package which acts just like Photoshop but instead of graphics it creates whole websites using a drag and drop technique
  • Likely to cause issues if being made responsive - ensuring that the website is accessible on all devices would result in some of the visuals being resized - a technique that would not look very good with the logo for instance or the background note for the About section
These outcomes led to the consideration of creating a whole new portfolio design (georgi-g.com). The process for that consisted of determining the following elements:

  • Framework - being more aware of responsive design building methodologies, I decided to use Bootstrap as the foundation for my website. Bootstrap's functionality would oositively benefit the website in terms of the support of responsive design and Bootstrap elements (Modal Box plugins, sections, fixed navigation)

  • Interactivity - Adding animations to the site after laying out all the content was accomplished by using another framework called Animate on Scroll. Initially I had planned to stick with Animate.css which I was used to by implementing it on another project. However, when adding it to the website it did not quite interact with the HTML elements the way I expected it to and despite looking for ways to change the functionality it would still not load the animation at the time of the scrolling. Instead, Animate on Scroll seemed to be just as effective and had better support for scrolling elements
Another interactive feature that can be noticed on the website is the parallax scrolling technique. It was accomplished by using CSS rules to define the behaviour of the section background.
Also, when doing more testing on the mobile navigation it was discovered that when clicking on the links, the page scrolls down to the selected section but that overlay navigation remains on top. The issue was solved with a Javascript code.

  • Navigation
Ensuring that the user has instant access to all elements of the website was done by adding a fixed navigation. Enhanced by smooth scrolling features (again accessible via Bootstrap functionality), it results in improved user experience

  • Layout
Across most sections of the website, there is not much complexity surrounding the structure of the content. However, the Projects section is displayed in a grid-like design (again using Bootstrap,s responsive features) with a hovering effect.


Final Result:

Intro section

About Me section

Skills section

Projects section

Contact Section

Mobile view of the Skills section

Mobile menu



Labels:

Comments

Post a Comment

Popular posts from this blog

Signature Printing: Next Steps

During my next few meetings at the Bate Brand office Elliott asked me if I can start working on the footer section of Signature Printing as at that point we pretty much had most of the content for the homepage. All images were in place, the layout was approved and the animation that I had implemented was working well. Where text content was needed, I put placeholder text which would later on be changed by Bate Brand’s copywriter – Laura. For the footer I attempted adding a contact form, subscribe button and a small text box that contains address details and contact number. Mark then joined in and showed me how to customize the fields in the contact form and how to display a response message. Up to that point I and the rest of the team were pleased with the homepage. Subsequently, we decided that it was time to think about the rest of the sections in the main menu. I looked into other printing and print consultancy related websites’ navigation ideas more extensively and came up w...
Post a Comment
Read more

Creating a mockup for Signature Printing

For my next meetin with Bate Brand I researched some of the features that sites identical to Signature Printing incorporate. Subsequently, I created a PSD mockup that included a carousel slideshow, fixed menu at the top of the page and parallax scrolling I presented the mockup to Elliott and justified my choice for the sections and dynamic functionality (where available). He seemed pleased with it and said him and Mark would go through it more extensively. Also, Elliott gave me access to Bate Brand’s Squarespace account so I could explore it a bit more and attempt adding content blocks, check the available templates and see how the mock I had created can be best represented with a Squarespace template. I decided to use the Bedford template as a start. I had no difficulties placing content blocks or rearranging them. However, after analyzing the settings options and doing additional research online, I found out that the template does not support parallax scrolling o...
Post a Comment
Read more

Looking for work experience

Acquiring work experience before graduating and getting a feel of what working with professionals feels like are objectives I consider as highly important. This led me to applying on a voluntary basis for several companies on Isle of Wight as a Web Design intern, hoping to produce some original work and make contacts that would help me if I decided to take a placement year. In October 2016 I approached several companies by email and phone. I attached my best pieces of work that match the quality of the projects I had seen in the portfolios of the businesses. A lot of them however were small web design agencies that that could not accommodate a student due to lack of space. Eventually I received a message from a company called Bate Brand that seemed interested in my work. I was invited to their office for an informal chat that would help me and Mark (Bate Brand’s director) see how I can be useful for the company. On October 21st I met Mark and his team in their office in Ryde. ...
Post a Comment
Read more