new layout

setsun · Jun 29, 2023 · 4315212 · 4315212
1 parent d2c78e1
commit 4315212
Show file tree

Hide file tree

Showing 12 changed files with 2,145 additions and 251 deletions.
diff --git a/common/constants.tsx b/common/constants.tsx
@@ -0,0 +1,51 @@
+import { InstagramLogoIcon, GitHubLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
+
+export const SOCIAL_LINKS = [
+ {
+ name: "GitHub",
+ link: "https://github.com/setsun",
+ icon: <GitHubLogoIcon />
+ },
+ {
+ name: "Instagram",
+ link: "https://instagram.com/i.am.setsun",
+ icon: <InstagramLogoIcon />
+ },
+ {
+ name: "Twitter",
+ link: "https://twitter.com/setsun_",
+ icon: <TwitterLogoIcon />
+ },
+ // {
+ // name: "Spotify",
+ // link: "https://open.spotify.com/user/3cl7vscgpyz5agjjh7fxg0l1z?si=66806580a1d24d68"
+ // },
+ // {
+ // name: "SoundCloud",
+ // link: "https://soundcloud.com/setsun_ai"
+ // }
+];
+
+
+export const NAVIGATION_ITEMS = [
+ {
+ name: 'Writing',
+ link: '/writing'
+ },
+ {
+ name: 'Visualizers',
+ link: '/visualizers'
+ },
+ {
+ name: 'Games',
+ link: '/games'
+ },
+ {
+ name: 'Photos',
+ link: '/photos'
+ },
+ {
+ name: 'Now Playing',
+ link: '/now-playing'
+ },
+]
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,39 +1,18 @@
-import {} from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import { SOCIAL_LINKS } from "../common/constants";
 
-const SOCIAL_LINKS = [
- {
- name: "GitHub",
- link: "https://github.com/setsun",
- },
- {
- name: "Instagram",
- link: "https://instagram.com/i.am.setsun"
- },
- {
- name: "Twitter",
- link: "https://twitter.com/setsun_"
- },
-
- {
- name: "Spotify",
- link: "https://open.spotify.com/user/3cl7vscgpyz5agjjh7fxg0l1z?si=66806580a1d24d68"
- },
- {
- name: "SoundCloud",
- link: "https://soundcloud.com/setsun_ai"
- }
-];
-
-const Footer: React.FC = () => {
- return (
- <footer className="flex justify-center gap-4 my-8">
- {SOCIAL_LINKS.map(({ name, link }) => (
- <a href={link} key={name} target="_blank" rel="noopener noreferrer">
- {name}
- </a>
- ))}
- </footer>
- );
+interface Props {
+ className?: string;
 }
 
+const Footer: React.FC<Props> = ({ className }) => (
+ <footer className={classNames('flex justify-center gap-4 my-8', className)}>
+ {SOCIAL_LINKS.map(({ name, link, icon }) => (
+ <a href={link} key={name} target="_blank" rel="noopener noreferrer">
+ {icon}
+ </a>
+ ))}
+ </footer>
+);
+
 export default Footer;
diff --git a/components/Header.tsx b/components/Header.tsx
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,29 +1,28 @@
 import Head from "next/head";
 import React, { ReactNode } from "react";
-import styled from 'styled-components';
 import Footer from "./Footer";
-import Header from "./Header";
+import Navigation from "./Navigation";
 
 type Props = {
  children: ReactNode;
 };
 
-const LayoutContainer = styled.div`
- padding: 0 2rem;
-`;
-
 const Layout: React.FC<Props> = (props) => (
  <>
  <Head>
  <title>setsun.xyz</title>
  <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>
 
- <Header />
+ <div className="flex">
+ <Navigation className="h-screen" />
 
- <LayoutContainer>{props.children}</LayoutContainer>
+ <div className="w-full">
+ {props.children}
 
- <Footer />
+ <Footer />
+ </div>
+ </div>
  </>
 );
 

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -0,0 +1,25 @@
+import { HamburgerMenuIcon, Cross1Icon } from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import { NAVIGATION_ITEMS } from '../common/constants';
+
+interface Props {
+ className?: string
+}
+
+const SideNavigation: React.FC<Props> = ({ className }) => (
+ <nav className={classNames('p-4 border-r-2 border-r-zinc-200 min-w-max', className)}>
+ {/* <HamburgerMenuIcon className='h-8 w-8' /> */}
+
+ {/* <Cross1Icon className='h-8 w-8' /> */}
+
+ <div className='flex flex-col gap-1'>
+ {NAVIGATION_ITEMS.map(({ name, link }) => (
+ <a href={link} key={link}>
+ {name}
+ </a>
+ ))}
+ </div>
+ </nav>
+);
+
+export default SideNavigation;
diff --git a/components/Post.tsx b/components/Post.tsx
@@ -32,7 +32,7 @@ const PostTitle = styled.h3`
 const Post: React.FC<{ post: PostProps }> = ({ post }) => {
  const authorName = post.author ? post.author.name : "Unknown author";
  return (
- <Container onClick={() => Router.push("/p/[id]", `/p/${post.id}`)}>
+ <Container onClick={() => Router.push("/writing/[id]", `/writing/${post.id}`)}>
  <PostTitle>{post.title}</PostTitle>
  <small>By {authorName}</small>
  <ReactMarkdown>

diff --git a/components/hero-scenes/WireframePlanet.tsx b/components/hero-scenes/WireframePlanet.tsx
@@ -0,0 +1,36 @@
+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 });
+
+ 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]} />
+ <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+ </mesh>
+
+ <mesh ref={ringTwoTurntable}>
+ <ringGeometry args={[15.5, 16, 100, 100]} />
+ <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+ </mesh>
+
+ <mesh ref={planetTurntable}>
+ <dodecahedronGeometry args={[10, 10]} />
+ <meshBasicMaterial attach="material" color="#fff" wireframe />
+ </mesh>
+ </>
+ )
+}
+
+export default WireframePlanet;
diff --git a/hooks/useTurntable.ts b/hooks/useTurntable.ts
@@ -0,0 +1,22 @@
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+
+interface Props {
+ speed?: number;
+ reverse?: boolean;
+ axis?: 'x' | 'y' | 'z';
+}
+
+export function useTurntable({ speed = 0.01, reverse, axis = 'y' }: Props) {
+ const ref = useRef<any>(null!);
+
+ useFrame(() => {
+ const finalSpeed = reverse ? speed * -1 : speed;
+
+ if (Number.isFinite(ref.current?.rotation?.[axis])) {
+ ref.current.rotation[axis] += finalSpeed;
+ }
+ });
+
+ return ref;
+}
diff --git a/package.json b/package.json
@@ -18,17 +18,19 @@
  "@radix-ui/colors": "^1.0.0",
  "@radix-ui/react-icons": "^1.3.0",
  "@react-spring/web": "^9.7.3",
+ "@react-three/drei": "^9.77.7",
  "@react-three/fiber": "^8.13.4",
  "@tailwindcss/container-queries": "^0.1.1",
  "@vercel/analytics": "^1.0.1",
  "@vercel/edge-config": "^0.2.1",
+ "classnames": "^2.3.2",
  "graphql": "^16.7.1",
  "graphql-request": "^6.1.0",
  "next": "13.4.7",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-markdown": "8.0.7",
- "styled-components": "^6.0.0",
+ "styled-components": "^6.0.1",
  "swr": "^2.2.0",
  "three": "^0.153.0",
  "ws": "^8.13.0",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,6 +4,8 @@ import Layout from "../components/Layout"
 import Post, { PostProps } from "../components/Post"
 import prisma from "../lib/prisma";
 import SpotifyIframePlaylist from "../components/SpotifyIframePlaylist";
+import { Canvas } from "@react-three/fiber";
+import WireframePlanet from "../components/hero-scenes/WireframePlanet";
 
 export const getStaticProps: GetStaticProps = async () => {
  const feed = await prisma.post.findMany({
@@ -29,13 +31,16 @@ const Blog: React.FC<Props> = (props) => {
  return (
  <Layout>
  <main>
- <div className="mb-6">
- <p>Engineering @ <a href="https://digitalocean.com">DigitalOcean</a>.</p>
- </div>
+ <Canvas className="w-full aspect-video">
+ <WireframePlanet />
+ </Canvas>
 
- {props.feed.map((post, i) => (
- <Post key={i} post={post} />
- ))}
+ <div className="mt-6 p-4">
+ <h2 className="underline mb-2">Recent Posts</h2>
+ {props.feed.map((post, i) => (
+ <Post key={i} post={post} />
+ ))}
+ </div>
 
  {/* <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1bUUPhe0zP9FgrsqYjxbTp?theme=0" />
  <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1cUbQxIOFcxeL5oUheu85i?theme=0" />

diff --git a/pages/p/[id].tsx → pages/writing/[id].tsx b/pages/p/[id].tsx → pages/writing/[id].tsx