clean up sketch

README.md

@@ -1,3 +1,5 @@
 # setsun.xyz
 
-〰 consciousness stream 〰
+〰 consciousness stream 〰
+
+##### just a playground for new technologies, and personal explorations / musing.

common/constants.tsx

@@ -28,6 +28,10 @@ export const SOCIAL_LINKS = [
 
 
 export const NAVIGATION_ITEMS = [
+ {
+ name: 'About',
+ link: '/'
+ },
  {
  name: 'Writing',
  link: '/writing'

components/Layout.tsx

@@ -14,13 +14,15 @@ const Layout: React.FC<Props> = (props) => (
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌅</text></svg>" />
  </Head>
 
- <div className="flex">
- <Navigation className="h-screen" />
+ <div className="flex h-screen overflow-hidden">
+ <Navigation />
 
- <div className="w-full">
- {props.children}
+ <div className="w-full overflow-scroll">
+ <div className="p-4">
+ {props.children}
 
- <Footer />
+ <Footer />
+ </div>
  </div>
  </div>
  </>

components/Navigation.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 const SideNavigation: React.FC<Props> = ({ className }) => (
- <nav className={classNames('p-4 border-r-2 border-r-zinc-200 min-w-max', className)}>
+ <nav className={classNames('p-6 border-r-2 border-r-zinc-200 min-w-max', className)}>
  {/* <HamburgerMenuIcon className='h-8 w-8' /> */}
 
  {/* <Cross1Icon className='h-8 w-8' /> */}

components/hero-scenes/WireframePlanet.tsx

@@ -1,33 +1,43 @@
-import { PerspectiveCamera } from '@react-three/drei';
 import { DoubleSide } from 'three';
 import { useTurntable } from '../../hooks/useTurntable';
 
 const WireframePlanet = () => {
- const ringOneTurntable = useTurntable({ speed: 0.0001 });
- const ringTwoTurntable = useTurntable({ speed: 0.0001 });
- const planetTurntable = useTurntable({ speed: 0.0001, reverse: true });
+ const ringOneTurntable = useTurntable({ speed: 0.001, axis: 'x' });
+ const ringTwoTurntable = useTurntable({ speed: 0.001, axis: 'x', reverse: true });
+ const ringThreeTurntable = useTurntable({ speed: 0.001, axis: 'y' });
+ const ringFourTurntable = useTurntable({ speed: 0.001, axis: 'y', reverse: true });
+ const planetTurntable = useTurntable({ speed: 0.0025, axis: 'x', reverse: true });
 
  return (
  <>
- {/* <PerspectiveCamera
- makeDefault
- args={[75, window.innerWidth / window.innerHeight, 0.01, 5000]}
- position={[550, 325, -500]}
- /> */}
-
- <mesh rotation={[0, Math.PI / 2, 0]} ref={ringOneTurntable}>
- <ringGeometry args={[15.5, 16, 100, 100]} />
+ <mesh rotation={[Math.PI / 2, 0, 0]} ref={ringOneTurntable}>
+ <ringGeometry args={[15.95, 16, 100, 100]} />
  <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
  </mesh>
 
- <mesh ref={ringTwoTurntable}>
- <ringGeometry args={[15.5, 16, 100, 100]} />
+ <mesh rotation={[-Math.PI / 2, 0, 0]} ref={ringTwoTurntable}>
+ <ringGeometry args={[15.95, 16, 100, 100]} />
+ <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+ </mesh>
+
+ <mesh rotation={[0, -Math.PI / 2, 0]} ref={ringThreeTurntable}>
+ <ringGeometry args={[15.95, 16, 100, 100]} />
+ <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+ </mesh>
+
+ <mesh rotation={[0, Math.PI / 2, 0]} ref={ringFourTurntable}>
+ <ringGeometry args={[15.95, 16, 100, 100]} />
+ <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+ </mesh>
+
+ <mesh rotation={[0, 0, Math.PI / 2]}>
+ <ringGeometry args={[15.95, 16, 100, 100]} />
  <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
  </mesh>
 
  <mesh ref={planetTurntable}>
  <dodecahedronGeometry args={[10, 10]} />
- <meshBasicMaterial attach="material" color="#fff" wireframe />
+ <meshNormalMaterial attach="material" wireframe />
  </mesh>
  </>
  )

package.json

@@ -32,7 +32,7 @@
  "react-markdown": "8.0.7",
  "styled-components": "^6.0.1",
  "swr": "^2.2.0",
- "three": "^0.153.0",
+ "three": "^0.154.0",
  "ws": "^8.13.0",
  "y-indexeddb": "^9.0.11",
  "y-webrtc": "^10.2.5",
@@ -51,6 +51,6 @@
  "postcss": "^8.4.24",
  "prisma": "^4.16.1",
  "tailwindcss": "^3.3.2",
- "typescript": "5.1.5"
+ "typescript": "5.1.6"
  }
 }

pages/index.tsx

@@ -31,11 +31,16 @@ const Blog: React.FC<Props> = (props) => {
  return (
  <Layout>
  <main>
- <Canvas className="w-full aspect-video">
+ <Canvas
+ className="w-full aspect-video"
+ camera={{
+ position: [0, 0, -30]
+ }}
+ >
  <WireframePlanet />
  </Canvas>
 
- <div className="mt-6 p-4">
+ <div className="mt-6">
  <h2 className="underline mb-2">Recent Posts</h2>
  {props.feed.map((post, i) => (
  <Post key={i} post={post} />