Portfolio

GatsbyJS

I chose to create my portfolio with GatsbyJS for many reasons, one of them is because it allows generating static pages during a build process. This way are pages loaded faster, making it possible to create successful SEO and there's much more advantages about it if you go through their docs.

Image Optimizations

by using gatsby-image (with sharp plugin) many image optimizations are achieved.

Every image was resized and compressed to the right extent, generated multiple smaller images so smartphones and tablets don’t download desktop-sized images, efficiently lazy load images to speed initial page load and save bandwidth, use the "blur-up" technique or a "traced placeholder" SVG to show a preview of the image while it loads and hold the image position so your page doesn’t jump while images load.

Contentful API (Headless CMS)

is a platform for content mangement. Using their API, every data that's shown on the website (for example "project details" page for each proejct) is imported from their API into my portfolio dynamically.

Using their system is effective because this way content can be changed easily through their platform, and the content that is shown on the website will always be the most updated. (Their API prevents me from getting into position where I need to rebuild my website after each minor change in the website, using their API along with Webhooks allows me skip this process so that every change that's done through the platform automatically triggers a rebuild for the website with the most updated data).

Page Speed and SEO

according to GTMetrix (a website that analyzes website performances), this portfolio website hits the 100/100% score in page speed and performance. There were made many optimizations to achieve this amazing speed.

Every page on the website has its own unique meta tags. Thanks to that and along with the page speed SEO can be achieved more efficiently.

UI improvements and browsers support

Not every browser has the same abilities as others. Every browser supports other features. Therefore some customizations had to be made to make this website perfect for every browser:

Using PostCSS & autoprefixer & their polyfills provide a better CSS support for many browsers so all the functionality is guaranteed.

In addition, I added an extrenal polyfill for Intersection Observer. I mimicked my own polyfill for clip-path, because there isn't any proper polyfill for this (made this by making semi transaprent linear-background for the required parts).

Despite the (100% amazing) page speed, I created a "skeleton" for project details so that it would give the user a better experience in case the page still loads for him.

PWA (progressive web app) + Offline Mode

an option to install the website as an app (add to home button), using service-worker to enable offline mode, pre-caching and caching, all these allow make sure the next time you come back to the website it'll load faster.

Security against XSS attacks

Cross-Site Scripting is a type of attack that injects a script or an unexpected link to another site into the client side of the application. Gatsby serves static content to the user and thus inherits several security principles. Despite this fact still there are some possible vulnerabilities where XSS attacks can occur, so I used DOMPurify wherever required to sanitize the HTML and achieve safer zone.

Multilingual

The whole website is supporting both Hebrew (RTL language) and English (LTR language), adding the prefix '/he' will make the website in Hebrew.

Animations

using CSS and the Intersection API to achieve beautiful and lovely experience for the user.

Responsive Design

working in any sort of environment, both in phones and computers.