Added guide page.

evankirkiles · Nov 28, 2022 · e9aae5b · e9aae5b · vercel · Nov 28, 2022
1 parent c5d3aaf
commit e9aae5b
Show file tree

Hide file tree

Showing 10 changed files with 323 additions and 12 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -29,7 +29,7 @@ const Header: React.FC = function Header() {
             <NavLink href="/submit">submit</NavLink>
             <NavLink href="/guide">guide</NavLink>
             <NavLink href="/about">about</NavLink>
-            <NavLink href="/credits">credits</NavLink>
+            {/* <NavLink href="/credits">credits</NavLink> */}
           </div>
           <div className={s.menu} onClick={() => setNavOpen(!navOpen)}>
             <div className={s.menu_text}>{navOpen ? 'CLOSE' : 'MENU'}</div>

diff --git a/src/components/NavMenu/NavMenu.tsx b/src/components/NavMenu/NavMenu.tsx
@@ -44,7 +44,7 @@ const NavMenu: React.FC<NavMenuProps> = function NavMenu({
               <NavLink href="/submit">→&nbsp;submit</NavLink>
               <NavLink href="/guide">→&nbsp;guide</NavLink>
               <NavLink href="/about">→&nbsp;about</NavLink>
-              <NavLink href="/credits">→&nbsp;credits</NavLink>
+              {/* <NavLink href="/credits">→&nbsp;credits</NavLink> */}
             </div>
             <div className={s.nav_column_2}>
               <div>Socials:</div>

diff --git a/src/components/SpaceCard/SpaceCard.module.scss b/src/components/SpaceCard/SpaceCard.module.scss
@@ -75,7 +75,7 @@
   font-weight: 100;
 
   &::before {
-    content: ' - ';
+    content: ' ↝ ';
   }
 }
 
@@ -150,3 +150,15 @@ $img_padding_inner: 20px;
   //     translateY(0px) rotateY(60deg);
   // }
 }
+
+.door_handle {
+  position: absolute;
+  top: 55%;
+  right: 0px;
+  transform-origin: 50% 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid $foreground;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
diff --git a/src/components/SpaceCard/SpaceCard.tsx b/src/components/SpaceCard/SpaceCard.tsx
@@ -52,6 +52,7 @@ const SpaceCard: React.FC<SpaceCardProps> = function SpaceCard({ space }) {
               <div className={s.author}>{space.author}</div>
             ) : null}
           </div>
+          <div className={s.door_handle}></div>
         </div>
       </Link>
 

diff --git a/src/components/SubmitForm/SubmitForm.module.scss b/src/components/SubmitForm/SubmitForm.module.scss
@@ -26,6 +26,15 @@
 .subtext {
   display: inline-block;
   font-family: Helvetica Neue;
+
+  & a {
+    text-decoration: underline;
+    transition: color 0.1s ease-in-out;
+    font-family: monospace;
+    &:hover {
+      color: $highlight;
+    }
+  }
 }
 
 .upload_row {

diff --git a/src/components/SubmitForm/SubmitForm.tsx b/src/components/SubmitForm/SubmitForm.tsx
@@ -17,6 +17,7 @@ import getImageDimensions from '../../util/getImageDimensions';
 import * as APIt from '../../supabase/types';
 import { insertSpacePrivate } from '../../supabase/api/spaces_private';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 const SubmitForm: React.FC = function () {
   // use router for redirecting to space page when finished
@@ -125,10 +126,13 @@ const SubmitForm: React.FC = function () {
       <h1 className={s.title}>submit your space.</h1>
       <p className={s.subtext}>
         if you would like to contribute your own personal space to the project,
-        follow the instructions here to create a scan. upon submission, i will
-        create collision boxes for your space and mark it as verified as soon as
-        i can, allowing your space to be explored and engaged with by the
-        audience.
+        follow the{' '}
+        <Link href="/guide" target="_blank" rel="noopener noreferrer">
+          submission guide
+        </Link>{' '}
+        to create a scan. upon submission, i will create collision boxes for
+        your space and mark it as verified as soon as i can, allowing your space
+        to be explored and engaged with by the audience.
       </p>
       <form
         className={s.form_container}
@@ -147,7 +151,7 @@ const SubmitForm: React.FC = function () {
               accept={'image/*'}
               required
             >
-              <div className={`${s.file_type} ${s.required}`}>DOOR</div>
+              <div className={`${s.file_type} ${s.required}`}>PREVIEW</div>
               <div className={s.file_accepts}>.png, .jpg...</div>
             </FileUpload>
           </div>

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -4,14 +4,26 @@
  * created on Mon Oct 10 2022
  * 2022 the nobot space,
  */
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
 import Header from '../components/Header/Header';
 import s from '../styles/About.module.scss';
 
 const AboutPage: React.FC = function AboutPage() {
   return (
-    <div className={s.container}>
+    <>
+      <Head>
+        <title>guide - abitofpersonalspace</title>
+        <NextSeo
+          canonical={'https://abitofpersonal.space/about'}
+          description={'about the A Bit of Personal Space project.'}
+        />
+      </Head>
       <Header />
-    </div>
+      <div className={s.container}>
+        <div className={s.contents}></div>
+      </div>
+    </>
   );
 };
 

diff --git a/src/pages/guide.tsx b/src/pages/guide.tsx
@@ -0,0 +1,119 @@
+/*
+ * guide.tsx
+ * author: evan kirkiles
+ * created on Sun Nov 27 2022
+ * 2022 the nobot space,
+ */
+
+import { NextPage } from 'next';
+import { NextSeo } from 'next-seo';
+import Head from 'next/head';
+import Link from 'next/link';
+import Header from '../components/Header/Header';
+import SubmitForm from '../components/SubmitForm/SubmitForm';
+import s from '../styles/Guide.module.scss';
+
+const GuidePage: NextPage = function SubmitPage() {
+  return (
+    <>
+      <Head>
+        <title>guide - abitofpersonalspace</title>
+        <NextSeo
+          canonical={'https://abitofpersonal.space/guide'}
+          description={'how to prepare a space for submission.'}
+        />
+      </Head>
+      <Header />
+      <div className={s.container}>
+        <div className={s.contents}>
+          <h1 className={s.title}>mapping a space</h1>
+          <p>
+            <span className={s.p_title}>A Bit of Personal Space</span> is open
+            to public submissions––in fact, we heavily encourage it. if
+            you&apos;d like to submit your own space for public archival, you
+            will need two tools:
+          </p>
+          <ul>
+            <li>
+              a device with a LiDAR sensor, i.e. any of iPhone 12 Pro / Pro Max,
+              iPhone 13 Pro / Pro Max, iPad Pro 2020 / 2021 / 2022 (or later).
+            </li>
+            <li>
+              the{' '}
+              <a
+                href="https://poly.cam"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={s.polycam}
+              >
+                Polycam app
+              </a>{' '}
+              for performing the scan.
+            </li>
+          </ul>
+          <p>
+            you may also attempt to use Polycam with the photo scanning mode,
+            available on any platform which the Polycam app allows. however,
+            your mileage may vary, and the LiDAR version is heavily recommended.
+          </p>
+          <h2 className={s.section_title}>1) scan your space</h2>
+          <p>
+            begin by opening up the Polycam app and accessing the scan
+            interface. using LiDAR mode, begin recording, and move the camera
+            around a bit. you will begin to see the projected digital model of
+            your real space. as you walk around and move the camera, the
+            projection will reach new areas and gain definition. once you have
+            your desired level of detail, and have reached all the areas you
+            want included in your scan, end the recording. now, by processing
+            the model, the point cloud will be converted into a model made of
+            triangles, readable by traditional modeling softwares.
+          </p>
+          <p>
+            at this point, also remember to take a preview picture of the space
+            you are scanning––you will need it to upload to our platform in step
+            3. do this with your phone&apos;s regular camera!
+          </p>
+          <h2 className={s.section_title}>2) download your scan</h2>
+          <p>
+            you now need to download a <b>.glb</b> (<b>G</b>raphics <b>L</b>
+            anguage <b>B</b>inary) representation of your scan, which packages
+            together the scanned geometry and textures into a single compressed
+            binary file. we recommend doing this by first clicking the little
+            cloud icon in the Polycam app to upload the model to Polycam
+            servers, and then downloading the <b>.glb</b> on your computer from{' '}
+            <a
+              href="https://poly.cam/captures"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={s.polycam}
+            >
+              Polycam&apos;s web platform
+            </a>
+            .
+          </p>
+          <h2 className={s.section_title}>3) upload your scan</h2>
+          <p>
+            the last step is to upload the room to{' '}
+            <span className={s.p_title}>A Bit of Personal Space</span>. Go to{' '}
+            <Link href="/submit" target="_blank" rel="noopener noreferrer">
+              the submission page
+            </Link>{' '}
+            and fill in the form with as much information about your space as
+            you deem sharable. use the file upload fields to provide the{' '}
+            <b>.glb</b> you downloaded previously, as well as the preview
+            picture.
+          </p>
+          <p>
+            once you submit, your file will be uploaded to our servers, at which
+            point we will review the space, add in physics collision boxes, and
+            then release your space on{' '}
+            <span className={s.p_title}>A Bit of Personal Space</span>. and
+            thank you for participating!
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GuidePage;
diff --git a/src/styles/About.module.scss b/src/styles/About.module.scss
@@ -1,16 +1,85 @@
 /*
  * About.module.scss
  * author: evan kirkiles
- * created on Mon Oct 10 2022
+ * created on Mon Nov 28 2022
  * 2022 the nobot space, 
  */
+
 @import '../styles/mixins';
 
+@keyframes fadeup {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.title {
+  font-size: 40px;
+  margin: 0px;
+
+  @include respond-to('small') {
+    font-size: 60px;
+  }
+}
+
 .container {
   width: 100%;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
+  min-height: calc(100vh - $header-height);
+  padding: 15vh 20px;
+  animation: fadeup 0.3s ease-in-out;
+  @include dot-background;
+  user-select: auto;
+}
+
+.polycam {
+  color: #26ed80;
+}
+
+.contents {
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  & .p_title {
+    font-family: 'Schnyder L';
+  }
+
+  & p {
+    font-family: 'Helvetica';
+    opacity: 0.8;
+  }
+
+  & li {
+    font-family: 'Helvetica';
+  }
+
+  & a {
+    text-decoration: underline;
+    transition: color 0.1s ease-in-out;
+    font-family: monospace;
+
+    &:hover {
+      color: $highlight;
+    }
+  }
+}
+
+.section_title {
+  font-size: 25px;
+  margin-bottom: 10px;
+
+  @include respond-to('small') {
+    font-size: 30px;
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                   <div className={s.author}>{space.author}</div>
                 ) : null}
               </div>
+              <div className={s.door_handle}></div>
             </div>
           </Link>
@@ Expand Down @@