Added reading page

app/reading/page.tsx

@@ -0,0 +1,89 @@
+import {SimpleLayout} from '@/components/layouts/SimpleLayout'
+import {Card} from '@/components/ui/Card'
+
+export const metadata = {
+    title: 'Reading - Ryan Freeman',
+    description: 'I have many leather-bound books, take a look at my book recommendations.'
+}
+
+type Book = {
+    title: string
+    author: string
+    url: string
+}
+
+export default async function Reading() {
+    const books: Book[] = [
+        {
+            title: 'The StatQuest Illustrated Guide To Machine Learning',
+            author: 'Josh Starmer',
+            url: 'https://www.goodreads.com/book/show/61071078-the-statquest-illustrated-guide-to-machine-learning?from_search=true&from_srp=true&qid=P0adGCf2x6&rank=1'
+        },
+        {
+            title: 'JavaScript: The Good Parts',
+            author: 'Douglas Crockford',
+            url: 'https://www.goodreads.com/book/show/2998152-javascript?from_search=true&from_srp=true&qid=ZB1r3CXS1L&rank=1'
+        },
+        {
+            title: 'Introduction to Machine Learning with Python',
+            author: 'Andreas C. Müller, Sarah Guido',
+            url: 'https://www.goodreads.com/book/show/24346909-introduction-to-machine-learning-with-python?ref=nav_sb_ss_1_44'
+        },
+        {
+            title: 'Python Crash Course',
+            author: 'Eric Matthes',
+            url: 'https://www.goodreads.com/book/show/23241059-python-crash-course?from_search=true&from_srp=true&qid=P23IVsHmuf&rank=1'
+        },
+        {
+            title: 'Automate the Boring Stuff with Python',
+            author: 'Al Sweigart',
+            url: 'https://www.goodreads.com/book/show/22514127-automate-the-boring-stuff-with-python?ref=nav_sb_ss_1_22'
+        },
+        {
+            title: 'JavaScript and jQuery',
+            author: 'Jon Duckett',
+            url: 'https://www.goodreads.com/book/show/16219704-javascript-and-jquery?from_search=true&from_srp=true&qid=HnvCmGl3Er&rank=1'
+        },
+        {
+            title: 'Data Visualisation',
+            author: 'Andy Kirk',
+            url: 'https://www.goodreads.com/book/show/29200705-data-visualisation?ref=nav_sb_ss_1_18'
+        },
+        {
+            title: 'Docker in Practice',
+            author: 'Ian Miell, Aidan Hobson Sayers',
+            url: 'https://www.goodreads.com/book/show/25484084-docker-in-practice?from_search=true&from_srp=true&qid=qiIF1RmMxV&rank=1'
+        },
+        {
+            title: 'Laravel: Up and Running',
+            author: 'Matt Stauffer',
+            url: 'https://www.goodreads.com/book/show/28646669-laravel?ref=nav_sb_ss_2_9'
+        },
+        {
+            title: 'HTML and CSS',
+            author: 'Jon Duckett',
+            url: 'https://www.goodreads.com/book/show/10361330-html-and-css?from_search=true&from_srp=true&qid=OKIiricQbD&rank=1'
+        },
+    ]
+
+    return (
+        <SimpleLayout
+            heading="What's on my bookshelf"
+            description={metadata.description}
+            gradient="bg-gradient-to-r from-sky-400 to-blue-500">
+            <ul
+                role="list"
+                className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
+            >
+                {books.map((book) => (
+                    <Card as="li" key={book.title}>
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
+                            <Card.Link href={book.url}>{book.title}</Card.Link>
+                        </h2>
+                        <Card.Description>{book.author}</Card.Description>
+                    </Card>
+                ))}
+            </ul>
+        </SimpleLayout>
+    )
+}

components/common/Footer.tsx

@@ -18,6 +18,7 @@ export function Footer() {
                                 className="flex flex-wrap justify-center gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                                 <NavLink href="/">Home</NavLink>
                                 <NavLink href="/about">About</NavLink>
+                                <NavLink href="/reading">Reading</NavLink>
                                 <NavLink href="/writing">Writing</NavLink>
                                 <NavLink href="/projects">Projects</NavLink>
                                 <NavLink href="/uses">Uses</NavLink>

components/ui/Navigation.tsx

@@ -65,6 +65,7 @@ export function MobileNavigation(props: Props) {
                             <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
                                 <MobileNavItem href="/">Home</MobileNavItem>
                                 <MobileNavItem href="/about">About</MobileNavItem>
+                                <MobileNavItem href="/reading">Reading</MobileNavItem>
                                 <MobileNavItem href="/writing">Writing</MobileNavItem>
                                 <MobileNavItem href="/projects">Projects</MobileNavItem>
                                 <MobileNavItem href="/uses">Uses</MobileNavItem>
@@ -108,6 +109,7 @@ export function DesktopNavigation(props: Props) {
             <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
                 <NavItem href="/">Home</NavItem>
                 <NavItem href="/about">About</NavItem>
+                <NavItem href="/reading">Reading</NavItem>
                 <NavItem href="/writing">Writing</NavItem>
                 <NavItem href="/projects">Projects</NavItem>
                 <NavItem href="/uses">Uses</NavItem>