article ai

rayraycodes · rayraycodes · commit 4f6a85afc8ce · 2026-02-11T12:18:44.000-05:00
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="description" content="Computer scientist and Application Systems Analyst Senior bridging technology, education, and human-centered design" />
     
     <!-- Open Graph / Facebook -->
diff --git a/public/assets/aishift.png b/public/assets/aishift.png
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -135,6 +135,7 @@ export function Navigation({ inline = false }: NavigationProps) {
           ? 'bg-white border-b border-black/10 shadow-lg' 
           : 'bg-white/90 backdrop-blur-sm shadow-md'
       }`}
+      style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}
     >
       <div className="max-w-[100rem] w-full mx-auto px-4 sm:px-6 lg:px-20">
         <div className="flex items-center justify-between h-16 lg:h-20">
diff --git a/src/components/pages/About.tsx b/src/components/pages/About.tsx
@@ -5,7 +5,7 @@ import contentData from '../../data/content';
 
 export function About() {
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-12 pt-6 sm:pt-8 lg:pt-12 pb-16 sm:pb-24 lg:pb-32">
         {/* Main Content */}
         <motion.div
diff --git a/src/components/pages/Accessibility.tsx b/src/components/pages/Accessibility.tsx
@@ -26,7 +26,7 @@ export function Accessibility() {
   });
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Hero Section */}
       <section className="py-16 lg:py-24 bg-gradient-to-b from-blue-50/30 via-white to-white">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/Contact.tsx b/src/components/pages/Contact.tsx
@@ -37,7 +37,7 @@ export function Contact() {
   }));
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Hero Section */}
       <section className="py-16 lg:py-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/Experience.tsx b/src/components/pages/Experience.tsx
@@ -33,7 +33,7 @@ export function Experience() {
   };
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Hero Section */}
       <section className="py-16 lg:py-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/Impact.tsx b/src/components/pages/Impact.tsx
@@ -90,7 +90,7 @@ export function Impact() {
   };
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Header */}
       <section className="py-16 lg:py-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/Photography.tsx b/src/components/pages/Photography.tsx
@@ -474,7 +474,7 @@ export function Photography() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen bg-gray-50 pt-36 sm:pt-24 lg:pt-32">
       <main className="max-w-7xl mx-auto px-6 lg:px-12 pt-12 lg:pt-16 pb-32 lg:pb-40">
         {/* Welcome Message */}
         <div className="mb-8 text-center">
diff --git a/src/components/pages/ProjectDetail.tsx b/src/components/pages/ProjectDetail.tsx
@@ -78,7 +78,7 @@ export function ProjectDetail() {
   }
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Project Detail Modal */}
       <div className="max-w-6xl mx-auto px-4 lg:px-12">
         {/* Back Button and Share */}
diff --git a/src/components/pages/Projects.tsx b/src/components/pages/Projects.tsx
@@ -89,7 +89,7 @@ export function Projects() {
   };
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Hero Section */}
       <section className="pt-16 lg:pt-24 pb-20 lg:pb-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/StoriesOfAdventure.tsx b/src/components/pages/StoriesOfAdventure.tsx
@@ -211,7 +211,7 @@ export function StoriesOfAdventure() {
   };
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       {/* Header */}
       <section className="pt-16 lg:pt-24 pb-20 lg:pb-24 bg-gradient-to-b from-background to-blue-50/20">
         <div className="max-w-7xl mx-auto px-6 lg:px-12">
diff --git a/src/components/pages/StoryDetail.tsx b/src/components/pages/StoryDetail.tsx
@@ -126,7 +126,7 @@ export function StoryDetail() {
   }
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       <div className="max-w-4xl mx-auto px-6 lg:px-12">
         {/* Back Button and Share */}
         <div className="flex items-center justify-between mb-8">
diff --git a/src/components/pages/StoryOfAdventureDetail.tsx b/src/components/pages/StoryOfAdventureDetail.tsx
@@ -192,7 +192,7 @@ export function StoryOfAdventureDetail() {
   }
 
   return (
-    <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">
+    <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">
       <div className="max-w-4xl mx-auto px-6 lg:px-12">
         {/* Back Button and Share */}
         <div className="flex items-center justify-between mb-8">
diff --git a/src/data/content.ts b/src/data/content.ts
@@ -1425,7 +1425,13 @@ const contentData = {
             "Documented the gap between public perception and current AI reality"
           ],
           "impact": "This reflection on the AI shift serves as a wake-up call for professionals across industries. It's not about fear, but about awareness and positioning. The people who understand this shift early and adapt accordingly will have significant advantages. Those who ignore it may find themselves caught off guard by rapid changes in their fields. The message is clear: engage with AI now, integrate it into your work, and position yourself to thrive in an AI-augmented world.",
-          "images": []
+          "images": [
+            {
+              "url": "/assets/aishift.png",
+              "alt": "Visual representation of the AI shift and technological transformation",
+              "caption": "The AI Shift Is Already Here"
+            }
+          ]
         }
       }
     ],
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -210,6 +210,12 @@ html {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+  
+  /* Ensure content starts below fixed navigation on mobile */
+  /* Navigation bar is h-16 (64px), so we need at least that plus safe area */
+  body {
+    padding-top: env(safe-area-inset-top, 0px);
+  }
 }
 
 /* Apple-inspired utility classes */

Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,7 @@ export function Navigation({ inline = false }: NavigationProps) {`
`135`	`135`	`? 'bg-white border-b border-black/10 shadow-lg'`
`136`	`136`	`: 'bg-white/90 backdrop-blur-sm shadow-md'`
`137`	`137`	}`}
	`138`	`+ style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}`
`138`	`139`	`>`
`139`	`140`	`<div className="max-w-[100rem] w-full mx-auto px-4 sm:px-6 lg:px-20">`
`140`	`141`	`<div className="flex items-center justify-between h-16 lg:h-20">`
Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export function ProjectDetail() {`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`return (`
`81`		`- <div className="min-h-screen pt-28 sm:pt-24 lg:pt-32">`
	`81`	`+ <div className="min-h-screen pt-36 sm:pt-24 lg:pt-32">`
`82`	`82`	`{/* Project Detail Modal */}`
`83`	`83`	`<div className="max-w-6xl mx-auto px-4 lg:px-12">`
`84`	`84`	`{/* Back Button and Share */}`