responsiveness for ipad

Author: rayraycodes

src/App.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { Navigation } from './components/Navigation';
 import { Footer } from './components/Footer';
-import { LoadingScreen } from './components/LoadingScreen';
 import { Home } from './components/pages/Home';
 import { About } from './components/pages/About';
 import { Experience } from './components/pages/Experience';
@@ -17,13 +16,11 @@ import { Contact } from './components/pages/Contact';
 import { Photography } from './components/pages/Photography';
 import { CMS } from './components/pages/CMS';
 import { preloadCriticalImages } from './utils/preloadImages';
-import { useImageLoading } from './hooks/useImageLoading';
 import './utils/navHeight';
 
 function AppContent() {
   const location = useLocation();
   const isHomePage = location.pathname === '/' || location.pathname === '/#/';
-  const isLoading = useImageLoading();
 
   // Scroll to top when opening About, Stories, Projects, etc. so the top nav "moves up" into view
   useEffect(() => {
@@ -44,44 +41,39 @@ function AppContent() {
     };
   }, []);
 
-  // Preload critical images on app mount (for additional optimization)
+  // Preload critical images on app mount
   useEffect(() => {
-    if (!isLoading) {
-      preloadCriticalImages();
-    }
-  }, [isLoading]);
+    preloadCriticalImages();
+  }, []);
 
   return (
-    <>
-      <LoadingScreen isLoading={isLoading} />
-      <div className="min-h-screen bg-background flex flex-col">
-        {!isHomePage && <Navigation />}
-        <main className="flex-1">
-          <Routes>
-            <Route path="/" element={
-              <div className="min-h-screen flex flex-col items-center justify-center bg-background">
-                <Home />
-              </div>
-            } />
-            <Route path="/about" element={<About />} />
-            <Route path="/experience" element={<Experience />} />
-            <Route path="/projects" element={<Projects />} />
-            <Route path="/projects/:projectId" element={<ProjectDetail />} />
-            <Route path="/impact" element={<Impact />} />
-            <Route path="/impact/:storyId" element={<StoryDetail />} />
-            <Route path="/storiesofadventure" element={<StoriesOfAdventure />} />
-            <Route path="/storiesofadventure/:storyId" element={<StoryOfAdventureDetail />} />
-            <Route path="/accessibility" element={<Accessibility />} />
-            <Route path="/contact" element={<Contact />} />
-            <Route path="/photography" element={<Photography />} />
-            <Route path="/cms" element={<CMS />} />
-            <Route path="/CMS" element={<Navigate to="/cms" replace />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </main>
-        {!isHomePage && <Footer />}
-      </div>
-    </>
+    <div className="min-h-screen bg-background flex flex-col">
+      {!isHomePage && <Navigation />}
+      <main className="flex-1">
+        <Routes>
+          <Route path="/" element={
+            <div className="min-h-screen flex flex-col items-center justify-center bg-background">
+              <Home />
+            </div>
+          } />
+          <Route path="/about" element={<About />} />
+          <Route path="/experience" element={<Experience />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/projects/:projectId" element={<ProjectDetail />} />
+          <Route path="/impact" element={<Impact />} />
+          <Route path="/impact/:storyId" element={<StoryDetail />} />
+          <Route path="/storiesofadventure" element={<StoriesOfAdventure />} />
+          <Route path="/storiesofadventure/:storyId" element={<StoryOfAdventureDetail />} />
+          <Route path="/accessibility" element={<Accessibility />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/photography" element={<Photography />} />
+          <Route path="/cms" element={<CMS />} />
+          <Route path="/CMS" element={<Navigate to="/cms" replace />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </main>
+      {!isHomePage && <Footer />}
+    </div>
   );
 }
 

src/components/LoadingScreen.tsx

@@ -2,7 +2,6 @@ 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 { ImageWithFallback } from '../figma/ImageWithFallback';
 import contentData from '../../data/content';
 
 export function Home() {
@@ -19,12 +18,11 @@ export function Home() {
           <p className="text-sm sm:text-base md:text-lg text-gray-600 mb-3 sm:mb-4 font-medium">
             रेगन
           </p>
-          <ImageWithFallback
+          <img 
             src={getImageUrl("src/assets/ray.png")} 
             alt="Regan Maharjan"
             className="w-auto mx-auto rounded-full object-contain"
             style={{ height: 'clamp(200px, 30vh, 400px)' }}
-            loading="eager"
           />
         </motion.div>