responsive

Author: rayraycodes

src/components/Navigation.tsx

@@ -66,7 +66,7 @@ export function Navigation({ inline = false }: NavigationProps) {
     }, 150);
   }, [location.pathname, inline]);
 
-  const navLinks = contentData.navigation.links;
+  const navLinks = inline ? (contentData.navigation.homeLinks || contentData.navigation.links) : contentData.navigation.links;
 
   // Exact same header menu behaviour, rendered inline below content (e.g. below Namaste on Home)
   if (inline) {

src/components/pages/Home.tsx

@@ -1,6 +1,8 @@
 import { motion } from 'motion/react';
+import { Link } from 'react-router-dom';
+import { Hand, BookOpen, FolderKanban, Camera } from 'lucide-react';
 import { getImageUrl } from '../../utils/imageUtils';
-import { Navigation } from '../Navigation';
+import contentData from '../../data/content';
 
 export function Home() {
   return (
@@ -31,10 +33,49 @@ export function Home() {
           <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-normal tracking-tight mb-4 sm:mb-6 text-gray-900">
             Hello, welcome here,
           </h1>
-          <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal text-gray-700 mb-8 sm:mb-12 md:mb-16">
+          <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal text-gray-700 mb-6 sm:mb-8 md:mb-10">
             Namaste (Greetings!)
           </p>
-          <Navigation inline />
+          <div className="text-base sm:text-lg md:text-xl text-gray-700 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto leading-loose">
+            <p className="mb-4 text-left sm:text-center leading-relaxed">
+              Feel free to explore!{' '}
+              <Link 
+                to="/about" 
+                className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-gray-200 hover:bg-gray-300 border-2 border-gray-300 hover:border-gray-400 transition-all font-semibold text-gray-900 shadow-sm hover:shadow-md my-1 sm:my-0"
+              >
+                <Hand className="w-4 h-4 sm:w-5 sm:h-5" />
+                Get to know me
+              </Link>
+              {' '}better,{' '}
+              <Link 
+                to="/storiesofadventure" 
+                className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-gray-200 hover:bg-gray-300 border-2 border-gray-300 hover:border-gray-400 transition-all font-semibold text-gray-900 shadow-sm hover:shadow-md my-1 sm:my-0"
+              >
+                <BookOpen className="w-4 h-4 sm:w-5 sm:h-5" />
+                dive into my stories
+              </Link>
+              ,{' '}
+              <Link 
+                to="/projects" 
+                className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-gray-200 hover:bg-gray-300 border-2 border-gray-300 hover:border-gray-400 transition-all font-semibold text-gray-900 shadow-sm hover:shadow-md my-1 sm:my-0"
+              >
+                <FolderKanban className="w-4 h-4 sm:w-5 sm:h-5" />
+                check out my projects
+              </Link>
+              , and{' '}
+              <Link 
+                to="/photography" 
+                className="inline-flex items-center gap-1.5 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-gray-200 hover:bg-gray-300 border-2 border-gray-300 hover:border-gray-400 transition-all font-semibold text-gray-900 shadow-sm hover:shadow-md my-1 sm:my-0"
+              >
+                <Camera className="w-4 h-4 sm:w-5 sm:h-5" />
+                browse my photo stories
+              </Link>
+              .
+            </p>
+            <p className="text-gray-600 text-left sm:text-center">
+              Seriously, go ahead and click around - I promise it's worth it! 😄
+            </p>
+          </div>
         </motion.div>
       </div>
     </div>

src/data/content.ts

@@ -49,20 +49,38 @@ const contentData = {
       },
       {
         "path": "/about",
-        "label": "Meet Regan"
+        "label": "Get to Know Regan"
       },
       {
         "path": "/storiesofadventure",
-        "label": "Stories"
+        "label": "Adventure Stories"
       },
       {
         "path": "/projects",
-        "label": "Projects"
+        "label": "Cool Projects"
       },
       {
         "path": "/photography",
         "label": "Photo Stories"
       }
+    ],
+    "homeLinks": [
+      {
+        "path": "/about",
+        "label": "get to know me"
+      },
+      {
+        "path": "/storiesofadventure",
+        "label": "dive into my stories"
+      },
+      {
+        "path": "/projects",
+        "label": "check out my projects"
+      },
+      {
+        "path": "/photography",
+        "label": "browse my photo stories"
+      }
     ]
   },
   "home": {