Skip to main content

Implemening a Squarespace CSS Timeline


I showed Elliott the outcome of my attempts to incorporate a timeline that runs smoothly on Squarespace. I also did a lot of testing for tablet and phone mode (one of Squarespace’s features) and see how the platform responds to the code. Some of the codes did not perform as expected due to CSS segments that Squarespace does not support. However, I ended up choosing a timeline that had a modern look and a few options for customization – changing the icons and the background. Elliott was impressed with my progress as I also added more transition effects.

Original CSS Code

Customized CSS Code within Squarespace

After doing a bit more testing I discovered that the icons don't show in an appropriate manner on mobile devices or any devices with smaller resolutions. As a result I decided to remove the icons but bring more contrast to the timeline items which joined by the animation effects would really make the content stand out

Final Timeline Result Implemented





Comments

Popular posts from this blog

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 wh...

Skills Gap & Job Analysis

Another step that I took which helped me visualise the steps I need to take in order to get a job in the field I have chosen was to look into current web design vacancies. Understanding what skills employers seek from candidates would help me analyse my understanding of how prepared I am at the moment to get a job in web design and what I need to do to increase the chances of getting employed. For the purpose I spent some time researching web design job specifications and came across a wide range of skills that are primarily required for the job. Here is a list of the vacancies which the content below is based on: Creative Web Designer - Atlantic Group (advertised by Indeed)  - optional screenshot Graphic Designer / Web Designer - Hays Specialist (advertised by Reed)  - optional screenshot Junior Web Designer - Become (Advertised by The Guardian Jobs)  - optional screenshot Web Designer - Dixons Carphone (advertised by TotalJobs)  - optional sc...

The importance of a (live) Portfolio

During my first visit at Bate Brand’s studio I encountered a situation that made me feel quite nervous initially. After summarizing the idea of doing work experience, I was asked by Mr. Bate to show the team a representation of my work. I assumed that Mr. Bate wanted to see a live portfolio with excerpts that I have created – a necessity for any designer that works with web technologies and graphics. For the time being I did not have a portfolio that was available online. I had researched hosting options but did not go any further than that. This made me feel quite insecure and I felt almost ashamed that I had not proceeded with the task before.  I explained to Mr. Bate that at the present time I was not able to showcase my previous work in a remotely accessed format. I also mentioned that I had looked into domain availability and pricing plans and explained that at the time I could not afford them. However, I remembered that when approaching Bate Brand for a first time by an ...