Add caching

src/pages/Article.tsx

@@ -123,9 +123,30 @@ const Article = () => {
 	}
 
 	useEffect(() => {
-		loadArticle().then(() => setEndpointCalled(true));
+		if(!sessionStorage.getItem('article+' + hashCode(articleSlug))) {
+			loadArticle().then(() => setEndpointCalled(true));
+		} else {
+			setArticle(JSON.parse(sessionStorage.getItem('article+' + hashCode(articleSlug))!));
+			setEndpointCalled(true);
+		}
 	}, []);
 
+	/**
+	 * Returns a hash code from a string
+	 * @param  {String} str The string to hash.
+	 * @return {Number}    A 32bit integer
+	 * @see http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+	 */
+	const hashCode = (str: string): number => {
+		let hash = 0;
+		for(let i = 0, len = str.length; i < len; i++) {
+			let chr = str.charCodeAt(i);
+			hash = (hash << 5) - hash + chr;
+			hash |= 0; // Convert to 32bit integer
+		}
+		return hash;
+	}
+
 	useEffect(() => {
 		if(!endpointCalled) return;
 
@@ -137,6 +158,13 @@ const Article = () => {
 		});
 	}, [endpointCalled]);
 
+	useEffect(() => {
+		if(!article) return;
+		if(sessionStorage.getItem('article+' + hashCode(articleSlug))) return;
+		if(article.skeleton) return;
+		sessionStorage.setItem('article+' + hashCode(articleSlug), JSON.stringify(article));
+	}, [article]);
+
 	const getMonthName = (month: number) => {
 		const date = new Date();
 		date.setMonth(month);

src/pages/Hire.tsx

@@ -231,7 +231,7 @@ const Index = () => {
 			icon: HardwareLike
 		},
 		{
-			name: 'Java / Kotlin Environment',
+			name: 'Kotlin & TypeScript',
 			icon: JavaLike
 		},
 		{

src/pages/Stories.tsx

@@ -55,6 +55,7 @@ const Stories = () => {
 	}, { scope: heading });
 
 	useGSAP(() => {
+		gsap.to('.articles a', { pointerEvents: 'none' });
 		gsap.fromTo('.article', {
 			y: 25,
 			opacity: 0
@@ -104,12 +105,19 @@ const Stories = () => {
 	};
 
 	useEffect(() => {
-		loadPosts().then(() => setEndpointCalled(true));
+		if(!sessionStorage.getItem('articles')) {
+			loadPosts().then(() => setEndpointCalled(true));
+		} else {
+			setArticleItems(JSON.parse(sessionStorage.getItem('articles') || '[]'));
+			setEndpointCalled(true);
+		}
 	}, []);
 
 	useEffect(() => {
 		if(!endpointCalled) return;
 
+		// Cache in the browser
+		gsap.to('.articles a', { pointerEvents: 'all' });
 		gsap.fromTo('.article .preview img', {
 			opacity: 0
 		}, {
@@ -119,6 +127,14 @@ const Stories = () => {
 		});
 	}, [endpointCalled]);
 
+	useEffect(() => {
+		if(articleItems.length === 0) return;
+		// Cache in sessionStorage if not already cached
+		if(sessionStorage.getItem('articles')) return;
+		if(!articleItems[0].title) return;
+		sessionStorage.setItem('articles', JSON.stringify(articleItems));
+	}, [articleItems]);
+
 	const truncate = (string: string, maxlength: number): string => {
 		return string.length > maxlength ? string.slice(0, maxlength).split(' ').slice(0, -1).join(' ') + ' …' : string;
 	}

src/styles/app.scss

@@ -1671,6 +1671,7 @@ header {
 		font-family: "Greycliff CF Regular", sans-serif;
 		font-size: 20px;
 		color: #5C5C5C;
+		line-height: 1.6rem;
 	}
 
 	b, strong {