From e9aae5b566dca9b3a83ecb52cc905bd3af113316 Mon Sep 17 00:00:00 2001 From: evan kirkiles Date: Mon, 28 Nov 2022 13:44:28 -0500 Subject: [PATCH] Added guide page. --- src/components/Header/Header.tsx | 2 +- src/components/NavMenu/NavMenu.tsx | 2 +- .../SpaceCard/SpaceCard.module.scss | 14 ++- src/components/SpaceCard/SpaceCard.tsx | 1 + .../SubmitForm/SubmitForm.module.scss | 9 ++ src/components/SubmitForm/SubmitForm.tsx | 14 ++- src/pages/about.tsx | 16 ++- src/pages/guide.tsx | 119 ++++++++++++++++++ src/styles/About.module.scss | 73 ++++++++++- src/styles/Guide.module.scss | 85 +++++++++++++ 10 files changed, 323 insertions(+), 12 deletions(-) create mode 100644 src/pages/guide.tsx create mode 100644 src/styles/Guide.module.scss diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 49c8c4a..6c669b6 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -29,7 +29,7 @@ const Header: React.FC = function Header() { submit guide about - credits + {/* credits */}
setNavOpen(!navOpen)}>
{navOpen ? 'CLOSE' : 'MENU'}
diff --git a/src/components/NavMenu/NavMenu.tsx b/src/components/NavMenu/NavMenu.tsx index d2d50e6..4cb46f3 100644 --- a/src/components/NavMenu/NavMenu.tsx +++ b/src/components/NavMenu/NavMenu.tsx @@ -44,7 +44,7 @@ const NavMenu: React.FC = function NavMenu({ → submit → guide → about - → credits + {/* → credits */}
Socials:
diff --git a/src/components/SpaceCard/SpaceCard.module.scss b/src/components/SpaceCard/SpaceCard.module.scss index 0ca39a1..9a81a52 100644 --- 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 index 9bd3c5c..683f2ae 100644 --- a/src/components/SpaceCard/SpaceCard.tsx +++ b/src/components/SpaceCard/SpaceCard.tsx @@ -52,6 +52,7 @@ const SpaceCard: React.FC = function SpaceCard({ space }) {
{space.author}
) : null}
+
diff --git a/src/components/SubmitForm/SubmitForm.module.scss b/src/components/SubmitForm/SubmitForm.module.scss index ffca45b..d67e2c5 100644 --- 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 index a9b30c4..2dce83e 100644 --- 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 () {

submit your space.

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{' '} + + submission guide + {' '} + 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.

-
DOOR
+
PREVIEW
.png, .jpg...
diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 5844160..77fd323 100644 --- 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 ( -
+ <> + + guide - abitofpersonalspace + +
-
+
+
+
+ ); }; diff --git a/src/pages/guide.tsx b/src/pages/guide.tsx new file mode 100644 index 0000000..ccf8664 --- /dev/null +++ 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 ( + <> + + guide - abitofpersonalspace + + +
+
+
+

mapping a space

+

+ A Bit of Personal Space is open + to public submissions––in fact, we heavily encourage it. if + you'd like to submit your own space for public archival, you + will need two tools: +

+
    +
  • + 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). +
    • +
  • + the{' '} + + Polycam app + {' '} + for performing the scan. +
    • +
+

+ 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. +

+

1) scan your space

+

+ 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. +

+

+ 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's regular camera! +

+

2) download your scan

+

+ you now need to download a .glb (Graphics L + anguage Binary) 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 .glb on your computer from{' '} + + Polycam's web platform + + . +

+

3) upload your scan

+

+ the last step is to upload the room to{' '} + A Bit of Personal Space. Go to{' '} + + the submission page + {' '} + and fill in the form with as much information about your space as + you deem sharable. use the file upload fields to provide the{' '} + .glb you downloaded previously, as well as the preview + picture. +

+

+ 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{' '} + A Bit of Personal Space. and + thank you for participating! +

+
+
+ + ); +}; + +export default GuidePage; diff --git a/src/styles/About.module.scss b/src/styles/About.module.scss index ef74608..e78056a 100644 --- 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; + } } diff --git a/src/styles/Guide.module.scss b/src/styles/Guide.module.scss new file mode 100644 index 0000000..6d907a9 --- /dev/null +++ b/src/styles/Guide.module.scss @@ -0,0 +1,85 @@ +/* + * Guide.module.scss + * author: evan kirkiles + * created on Sun Nov 27 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%; + 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; + } +}