Add responsive styles

src/app/[slug]/page.tsx

@@ -1,11 +1,11 @@
 import dynamic from 'next/dynamic';
 import { getAlbum, getAlbums } from '@/lib/api';
 import Nav from '@/lib/nav';
-import { slugToAlbumTitle } from '@/lib/slug';
+import { slugToAlbumTitle } from '@/lib/api/slug';
 import { LocationIcon } from '@/lib/icons/location-icon';
 import { Album } from '@/types';
 
-const Masonry = dynamic(() => import('@/lib/masonry'), {
+const Masonry = dynamic(() => import('@/lib/images/masonry'), {
   ssr: false
 });
 

src/app/about/page.tsx

@@ -81,8 +81,8 @@ async function AboutPage() {
         `}</p>
 
           <p className="mb-32 text-lg">
-            The website is open source on GitHub, built with React and hosted on
-            Pages and Contentful.
+            The website is open source on GitHub, built with TypeScript and
+            React, and hosted using Pages and Contentful.
           </p>
 
           <Contact />

src/app/globals.css

@@ -29,9 +29,6 @@
 }
 
 /* Animations */
-.fade-in {
-  animation: fadeIn 2.5s ease-in-out;
-}
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -40,15 +37,18 @@
     opacity: 1;
   }
 }
-.blink {
-  animation: blink 1s step-start infinite;
-  pointer-events: none;
+.fade-in {
+  animation: fadeIn 2.5s ease-in-out;
 }
 @keyframes blink {
   50% {
     opacity: 0;
   }
 }
+.blink {
+  animation: blink 1s step-start infinite;
+  pointer-events: none;
+}
 @keyframes scaleIn {
   0%,
   100% {
@@ -73,6 +73,20 @@
   animation-iteration-count: 1;
   animation-delay: 150ms;
 }
+@keyframes marquee {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100%;
+  }
+}
+.marquee div {
+  display: block;
+  position: absolute;
+  overflow: hidden;
+  animation: marquee 5s linear infinite;
+}
 
 /* Lightbox */
 .photoswipe--custom {

src/lib/masonry.tsx → src/lib/images/masonry.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Masonry as MasonicMasonry } from 'masonic';
-import { useLightbox } from '../hooks/use-lightbox';
+import { useLightbox } from '../../hooks/use-lightbox';
 import { Photo } from '@/types';
 
 const MasonryItem = ({ data: { url, width, height } }: { data: Photo }) => (