Ag-Portfolio

photography portfolio website

Freelance project

2020

The client has portrayed an idea of creating a mobile first portfolio website where he can showcase his works, photography skills, and also a place where he can write articles about composition, photo editing, and photography tips that people can share on social media platforms.

scroll

THE TECH BEHIND THE WEBSITE

The major task was to create such an application, that can synchronize with assets sourced from the flickr website where the client stores his works. To address this problem I signed up for a flickr developer account to be able to use flickr's api using the api key they provided, doing so the important assets were retrieved and ready to be used. To enable the client content creation a cms had to be provided, besides the website had to be seo friendly with the right meta tags in case users shared an article on social media. Therefore I chosed to work with GatsbyJs ( a static site generator with the ability to be server side rendred ) in combination with Netlify cms. This combination guarantees fast performance and an easy to use interface for content creation by the highly customizable configuration that Nelify cms comes with. The approved mobile design radically contradicted with the laptop design in terms of ui components, thus dynamic responsive components had to be implemented. The best solution was to create a react hook which returns the screen width and listens to screen resize events, this assures the following advantages: 1- only one event listener was implemented 2- specific components can be mounted or unmounted conditionally according to exact screen widths 3- increase in performance by coupling related logic
  • GatsbyJs
  • ReactJs
  • GraphQl
  • Sass
  • Netlify CMS
  • TypeScript
  • GSAP
  • NodeJs

A MOBILE FRIENDLY APPROACH

In todays digital age, users expect every website to have a mobile version. So companies and developers must try to produce the same if not better experience for users interacting with their site on a mobile device. This project helped me understand how a professional team translates a desktop site into a mobile device.