feat: improve mobile experience

src/App.jsx

@@ -11,6 +11,10 @@ import state from './state.json'
 import { ThreeD } from '@/components/3D/index.jsx'
 import { useAtomValue } from 'jotai'
 import { isAmsterdamAtom } from '@/atoms/3d.js'
+import useDeviceType from '@/loading.jsx'
+import { FullInfo } from '@/components/2D/FullInfo.jsx'
+import { AboutMeSection } from '@/components/2D/AboutMe.jsx'
+import { ContactSection } from '@/components/2D/Contact.jsx'
 // import { Perf } from 'r3f-perf'
 
 // import studio from '@theatre/studio'
@@ -23,6 +27,56 @@ import { isAmsterdamAtom } from '@/atoms/3d.js'
 function App() {
   const sheet = getProject('sayjeyhi.com', { state }).sheet('r3f')
   const isAmsterdam = useAtomValue(isAmsterdamAtom)
+  const searchParams = new URLSearchParams(window.location.search)
+  const isLightweight = searchParams.get('lightweight')
+
+  const deviceType = useDeviceType()
+
+  if (isLightweight) {
+    return (
+      <>
+        <FullInfo
+          before={<AboutMeSection ignoreScroll className="mt-12" />}
+          after={<ContactSection />}
+        />
+      </>
+    )
+  }
+
+  if (deviceType === 'mobile') {
+    // Mobile is not supported
+    return (
+      <div className="w-full h-full flex flex-col items-center justify-center text-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="mb-6"
+          width="64"
+          height="64"
+          viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" strokeWidth="1.5">
+            <path d="M4 10c0-3.771 0-5.657 1.172-6.828S8.229 2 12 2s5.657 0 6.828 1.172S20 6.229 20 10v4c0 3.771 0 5.657-1.172 6.828S15.771 22 12 22s-5.657 0-6.828-1.172S4 17.771 4 14z" />
+            <path
+              strokeLinecap="round"
+              d="M15 19H9m7.748-16.622l-.084.126c-.756 1.134-1.134 1.701-1.686 2.044a3 3 0 0 1-.342.183c-.592.27-1.273.27-2.636.27s-2.045 0-2.636-.27a3 3 0 0 1-.342-.183c-.552-.343-.93-.91-1.686-2.044l-.084-.126"
+              opacity=".5"
+            />
+          </g>
+        </svg>
+        <p className="font-semibold text-lg">Unfortunately mobile is not supported yet.</p>
+        <span className="font-light text-sm mt-2">
+          Use a desktop browser or switch light weight mode.
+        </span>
+
+        <div className="mt-6 flex items-center justify-center">
+          <button
+            className="bg-primary text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg"
+            onClick={() => (window.location.href = '/?lightweight=true')}>
+            Light weight mode
+          </button>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <MotionConfig

src/components/2D/AboutMe.jsx

@@ -15,7 +15,7 @@ export const AboutMeSection = props => {
       {menuOpened || section !== 0 ? (
         <Section key="placeholder" />
       ) : (
-        <Section className="max-w-screen-2xl" key="me">
+        <Section className={`max-w-screen-2xl ${props.className}`} key="me">
           <div className="window">
             <h1 className="leading-none font-light text-xl sm:text-md">
               <span className="bg-white text-gray-700">
@@ -42,8 +42,11 @@ export const AboutMeSection = props => {
             </div>
 
             <button
-              onClick={() => setSection(1)}
-              className="inline-flex generic-squircle transform px-2 py-1 font-bold lg:px-6 lg:py-4 mt-5 text-black text-base md:text-lg lg:text-xl active:scale-95 transition-transform"
+              onClick={() => {
+                if (props.ignoreScroll) return
+                setSection(1)
+              }}
+              className="inline-flex generic-squircle transform px-2 py-3 font-bold lg:px-6 lg:py-4 mt-5 text-black text-base md:text-lg lg:text-xl active:scale-95 transition-transform"
               {...cursorHandlers}>
               Up for a magical twist?
               <div id="mouse-scroll">

src/components/2D/FullInfo.jsx

@@ -0,0 +1,84 @@
+import { Section } from '@/components/2D/Section.jsx'
+import { GameEducation } from '@/components/2D/Game/Prizes/Education.jsx'
+import { GameProjects } from '@/components/2D/Game/Prizes/Projects.jsx'
+import { GameCertifications } from '@/components/2D/Game/Prizes/Certifications.jsx'
+import { GameTalks } from '@/components/2D/Game/Prizes/Talks.jsx'
+import { GameExperience } from '@/components/2D/Game/Prizes/Experience.jsx'
+import { useCursorHandlers } from '@/components/2D/Cursor.jsx'
+
+export const FullInfo = ({ before, setShowFullInformation, after }) => {
+  const cursorHandlers = useCursorHandlers()
+
+  return (
+    <Section key="placeholder" className="fixed bg-white z-20 !py-0">
+      <div className="overflow-y-auto max-w-full overflow-x-hidden px-3 lg:pl-0 lg:pr-3">
+        {before && before}
+
+        {setShowFullInformation && (
+          <button
+            {...cursorHandlers}
+            onClick={e => {
+              e.stopPropagation()
+              setShowFullInformation(false)
+            }}
+            className="absolute top-0 right-0 text-primary p-2 z-20 bg-white rounded-bl-2xl scale-75 outline-squircle">
+            <svg xmlns="http://www.w3.org/2000/svg" className="w-10 h-10" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="m12 13.4l-2.917 2.925q-.277.275-.704.275t-.704-.275q-.275-.275-.275-.7t.275-.7L10.6 12L7.675 9.108Q7.4 8.831 7.4 8.404t.275-.704q.275-.275.7-.275t.7.275L12 10.625L14.892 7.7q.277-.275.704-.275t.704.275q.3.3.3.713t-.3.687L13.375 12l2.925 2.917q.275.277.275.704t-.275.704q-.3.3-.712.3t-.688-.3z"
+              />
+            </svg>
+          </button>
+        )}
+
+        <br />
+        <Title title="Educations" subTitle="My academic background" />
+        <GameEducation />
+        <br />
+        <br />
+        <br />
+        <Title
+          title="Projects"
+          subTitle="The open source projects I worked on (scroll horizontally)"
+        />
+        <GameProjects />
+        <br />
+        <br />
+        <br />
+        <Title title="Certifications" subTitle="My certifications (scroll horizontally)" />
+        <GameCertifications />
+        <br />
+        <br />
+        <br />
+        <Title title="Talks" subTitle="The talks I gave (less than a scrollable area :D )" />
+        <GameTalks />
+        <br />
+        <br />
+        <br />
+        <Title
+          title="Work experience"
+          subTitle="List of the companies I worked for (scroll horizontally)"
+        />
+        <GameExperience />
+        <br />
+        <br />
+        <br />
+        {after && after}
+      </div>
+    </Section>
+  )
+}
+
+const Title = ({ title, subTitle }) => (
+  <div className="mb-5">
+    <h2 className="w-[100vw] text-left text-3xl lg:text-4xl font-bold text-primary mt-6 lg:mt-8">
+      {title}
+    </h2>
+    {subTitle && (
+      <p className="w-[100vw] text-left text-[12px] lg:text-md text-gray-400">
+        <span className="hidden lg:inline ml-2 mr-1">&gt; </span>
+        {subTitle}
+      </p>
+    )}
+  </div>
+)

src/components/2D/index.jsx

@@ -1,89 +1,24 @@
-import { Cursor, useCursorHandlers } from './Cursor'
+import { Cursor } from './Cursor'
 import { AboutMeSection } from '@/components/2D/AboutMe'
 import { SkillsSection } from '@/components/2D/Skills'
 import { ProjectsSection } from '@/components/2D/Projects'
 import { GameSection } from '@/components/2D/Game/Game'
 import { ContactSection } from '@/components/2D/Contact'
 
 import { Section } from './Section'
-import { Menu, MenuButton } from './Menu'
+import { Menu } from './Menu'
 import { Scroll } from '@react-three/drei'
 import { showFullInformationAtom } from '@/atoms/menu.js'
 import { useAtom } from 'jotai'
-import { GameEducation } from '@/components/2D/Game/Prizes/Education.jsx'
-import { GameProjects } from '@/components/2D/Game/Prizes/Projects.jsx'
-import { GameCertifications } from '@/components/2D/Game/Prizes/Certifications.jsx'
-import { GameTalks } from '@/components/2D/Game/Prizes/Talks.jsx'
-import { GameExperience } from '@/components/2D/Game/Prizes/Experience.jsx'
+import { FullInfo } from '@/components/2D/FullInfo.jsx'
 
 export const TwoD = () => {
   const [showFullInformation, setShowFullInformation] = useAtom(showFullInformationAtom)
-  const cursorHandlers = useCursorHandlers()
 
   return (
     <Scroll html>
       <Menu />
-      {showFullInformation && (
-        <Section key="placeholder" className="fixed bg-white z-20 !py-0">
-          <div className="overflow-y-auto max-w-full overflow-x-hidden px-3 lg:pl-0 lg:pr-3">
-            <button
-              {...cursorHandlers}
-              onClick={e => {
-                e.stopPropagation()
-                setShowFullInformation(false)
-              }}
-              className="absolute top-0 right-0 text-primary p-2 z-20 bg-white rounded-bl-2xl scale-75 outline-squircle">
-              <svg xmlns="http://www.w3.org/2000/svg" className="w-10 h-10" viewBox="0 0 24 24">
-                <path
-                  fill="currentColor"
-                  d="m12 13.4l-2.917 2.925q-.277.275-.704.275t-.704-.275q-.275-.275-.275-.7t.275-.7L10.6 12L7.675 9.108Q7.4 8.831 7.4 8.404t.275-.704q.275-.275.7-.275t.7.275L12 10.625L14.892 7.7q.277-.275.704-.275t.704.275q.3.3.3.713t-.3.687L13.375 12l2.925 2.917q.275.277.275.704t-.275.704q-.3.3-.712.3t-.688-.3z"
-                />
-              </svg>
-            </button>
-
-            <br />
-            <Title title="Educations" subTitle="My academic background" />
-            <GameEducation />
-            <br />
-            <br />
-            <br />
-
-            <Title
-              title="Projects"
-              subTitle="The open source projects I worked on (scroll horizontally)"
-            />
-            <GameProjects />
-
-            <br />
-            <br />
-            <br />
-
-            <Title title="Certifications" subTitle="My certifications (scroll horizontally)" />
-            <GameCertifications />
-
-            <br />
-            <br />
-            <br />
-
-            <Title title="Talks" subTitle="The talks I gave (less than a scrollable area :D )" />
-            <GameTalks />
-
-            <br />
-            <br />
-            <br />
-
-            <Title
-              title="Work experience"
-              subTitle="List of the companies I worked for (scroll horizontally)"
-            />
-            <GameExperience />
-
-            <br />
-            <br />
-            <br />
-          </div>
-        </Section>
-      )}
+      {showFullInformation ? <FullInfo setShowFullInformation={setShowFullInformation} /> : null}
       <div className="flex flex-col items-center w-screen">
         <AboutMeSection />
         <SkillsSection />
@@ -96,17 +31,3 @@ export const TwoD = () => {
     </Scroll>
   )
 }
-
-const Title = ({ title, subTitle }) => (
-  <div className="mb-5">
-    <h2 className="w-[100vw] text-left text-3xl lg:text-4xl font-bold text-primary mt-6 lg:mt-8">
-      {title}
-    </h2>
-    {subTitle && (
-      <p className="w-[100vw] text-left text-[12px] lg:text-md text-gray-400">
-        <span className="hidden lg:inline ml-2 mr-1">&gt; </span>
-        {subTitle}
-      </p>
-    )}
-  </div>
-)

src/loading.jsx

@@ -1,3 +1,25 @@
+import { useState, useEffect } from 'react'
+
+function useDeviceType() {
+  const [deviceType, setDeviceType] = useState('desktop')
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+
+    if (/android/i.test(userAgent)) {
+      setDeviceType('mobile')
+    } else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+      setDeviceType('mobile')
+    } else {
+      setDeviceType('desktop')
+    }
+  }, [])
+
+  return deviceType
+}
+
+export default useDeviceType
+
 export function Loading() {
   return (
     <div className="w-full h-full flex flex-col items-center justify-center">