From fd13b72380848da87a3724674e1dc136fe823096 Mon Sep 17 00:00:00 2001 From: tymur999 Date: Wed, 4 Mar 2026 20:29:38 -0600 Subject: [PATCH] wave canvas styling fix + links righthand bar --- src/index/Canvas.tsx | 66 ++++++------------------------------------- src/index/Stars.tsx | 33 ++++++++++++++++++++++ src/index/canvas.scss | 2 +- src/nav/Links.tsx | 21 ++++++++++++++ src/nav/Nav.tsx | 15 +++------- src/nav/nav.scss | 40 +++++++++++++++----------- 6 files changed, 91 insertions(+), 86 deletions(-) create mode 100644 src/index/Stars.tsx create mode 100644 src/nav/Links.tsx diff --git a/src/index/Canvas.tsx b/src/index/Canvas.tsx index 98f7f51..0f5a2f0 100644 --- a/src/index/Canvas.tsx +++ b/src/index/Canvas.tsx @@ -1,90 +1,42 @@ import {motion} from "framer-motion"; import "./canvas.scss"; import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber"; -import React, {useMemo, useRef} from "react"; +import React, {useMemo, useRef, useState} from "react"; import {Mesh, Vector3} from "three"; import {Moon} from "./Moon"; +import {Stars} from "./Stars"; -type Coordinate = [number, number, number]; export default function Canvas() { return (
- - + Welcome to my blog - +
) } -function Frame() { +function Sphere() { useFrame(state => { const { x, y } = state.pointer - // Smoothly interpolate the camera position // We multiply by a factor (e.g., 5) to increase the range of movement state.camera.position.lerp(new Vector3(x * 10, y * 10, 5), 0.1) - // Always keep the camera looking at the center state.camera.lookAt(0, 0, 0) }) - return <> -} - -function Sphere() { - const meshRef = useRef(null); - - useFrame(() => { - if(meshRef.current) { - meshRef.current.rotation.y += 0.01 - } - }); - - return ( - - - - - ) -} - -const RADIUS = 20; -const COUNT = 100; -function Stars() { - const positions = useMemo(() => { - const positions: Coordinate[] = []; - for(let i = 0; i < COUNT; i++) { - const u = Math.random(); - const v = Math.random(); - - const theta = 2 * Math.PI * u; - const phi = Math.acos(2 * v - 1); - - // x = r*sin(theta)*cos(phi) - // x = r*sin(theta)*sin(phi) - // z = r*cos(phi) - positions.push([ - RADIUS * Math.sin(phi) * Math.cos(theta), - RADIUS * Math.sin(phi) * Math.sin(theta), - RADIUS * Math.cos(phi), - ]) - } - return positions; - }, []); - - return positions.map(coord => - - - - ) + return + + + } \ No newline at end of file diff --git a/src/index/Stars.tsx b/src/index/Stars.tsx new file mode 100644 index 0000000..8814a29 --- /dev/null +++ b/src/index/Stars.tsx @@ -0,0 +1,33 @@ +import {useMemo} from "react"; + +const RADIUS = 20; +const COUNT = 100; +type Coordinate = [number, number, number]; +export function Stars() { + const positions = useMemo(() => { + const positions: Coordinate[] = []; + for(let i = 0; i < COUNT; i++) { + const u = Math.random(); + const v = Math.random(); + + const theta = 2 * Math.PI * u; + const phi = Math.acos(2 * v - 1); + + // x = r*sin(theta)*cos(phi) + // x = r*sin(theta)*sin(phi) + // z = r*cos(phi) + positions.push([ + RADIUS * Math.sin(phi) * Math.cos(theta), + RADIUS * Math.sin(phi) * Math.sin(theta), + RADIUS * Math.cos(phi), + ]) + } + return positions; + }, []); + + return positions.map(coord => + + + + ) +} diff --git a/src/index/canvas.scss b/src/index/canvas.scss index 48e34fc..49b0f75 100644 --- a/src/index/canvas.scss +++ b/src/index/canvas.scss @@ -12,5 +12,5 @@ main { .welcome { text-align: center; position: absolute; - top: 50%; + top: calc(50% + 50px); } \ No newline at end of file diff --git a/src/nav/Links.tsx b/src/nav/Links.tsx new file mode 100644 index 0000000..7126528 --- /dev/null +++ b/src/nav/Links.tsx @@ -0,0 +1,21 @@ +import React, {useState} from "react"; +import {Link} from "../router/Link"; +import {motion} from "framer-motion"; + +export function Links() { + const [links, setLinks] = useState(["About", "Articles"]); + + return
+ { links.map(() => /* add spacers for flexbox */
)} + + { links.map(link => <Link href={`/${link}`}><h3>{link}</h3></Link>) } + </div> +} + +function Title() { + return ( + <Link href="/" className="name"> + <motion.h1 className="name">Tymur Arsentiev</motion.h1> + </Link> + ); +} diff --git a/src/nav/Nav.tsx b/src/nav/Nav.tsx index a11263a..642d413 100644 --- a/src/nav/Nav.tsx +++ b/src/nav/Nav.tsx @@ -6,15 +6,16 @@ import wave from "../img/menu-wave.svg"; import "./nav.scss"; import {motion} from "framer-motion"; import {Link} from "../router/Link"; +import {Path} from "../router/router"; +import {Links} from "./Links"; export default function Nav() { const [active, setActive] = useState(false); return <> - <nav className="header"> + <nav> <MenuButton active={active} setActive={setActive}/> - <Title/> - <Link href="/about" className="nav-item">About</Link> + <Links/> </nav> <Menu active={active}/> <img className="wave" alt="wave" src={wave}/> @@ -34,11 +35,3 @@ function MenuButton(props : { active: boolean, setActive: (_:boolean) => void }) </div> ); } - -function Title() { - return ( - <Link href="/" className="name"> - <motion.h1>Tymur Arsentiev</motion.h1> - </Link> - ); -} \ No newline at end of file diff --git a/src/nav/nav.scss b/src/nav/nav.scss index 526e702..1c3910a 100644 --- a/src/nav/nav.scss +++ b/src/nav/nav.scss @@ -1,16 +1,16 @@ $padding: 15px; $menu: #282c34; -.menu-btn:hover { +.menu-btn>button:hover { opacity: 90%; } -.menu-btn:active { +.menu-btn>button:active { opacity: 80%; } .menu-btn { - justify-self: center; + align-self: center; display: flex; flex-direction: column; align-items: center; @@ -19,29 +19,35 @@ $menu: #282c34; } } -.name { - position: absolute; - font-weight: bold; - left: 50%; - transform: translateX(-50%); - -} - -.header { +nav { background-color: $menu; padding: $padding; display: flex; - font-size: calc(10px + 2vmin); - color: white; - min-height: 3 * $padding; + justify-content: center; +} + +nav>a{ + text-align: center; +} + +.name>h1 { + margin: 0; + font-size: 40px; } .name { - align-self: center; - flex-grow: 1; + margin: auto; + position: relative; } + .wave { user-select: none; pointer-events: none; position: absolute; +} + +.links { + display: flex; + flex-grow: 1; + gap: 15px; } \ No newline at end of file