From db845bf6c66527cdd94bedd35827bf09e780ab2e Mon Sep 17 00:00:00 2001 From: tymur999 Date: Sat, 7 Mar 2026 23:19:21 -0600 Subject: [PATCH] mobile-friendly view and scss->sass --- .idea/jsLibraryMappings.xml | 0 src/about/About.mdx | 2 +- src/about/AboutPage.tsx | 2 +- src/about/about.sass | 82 +++++++++++++++++++++ src/about/about.scss | 93 ------------------------ src/img/{.DSC_5633.jpg => DSC_5633.jpg} | Bin src/img/{.IMG_3095.jpg => IMG_3095.jpg} | Bin src/img/blog-box.svg | 1 + src/index.sass | 27 +++++++ src/index.scss | 30 -------- src/index.tsx | 2 +- src/index/Canvas.tsx | 10 ++- src/index/canvas.sass | 18 +++++ src/index/canvas.scss | 19 ----- src/nav/Links.tsx | 14 +--- src/nav/Menu.tsx | 4 +- src/nav/Nav.tsx | 22 +++--- src/nav/menu.sass | 13 ++++ src/nav/menu.scss | 16 ---- src/nav/nav.sass | 50 +++++++++++++ src/nav/nav.scss | 57 --------------- src/router/Link.tsx | 4 +- src/router/Route.tsx | 25 +++++-- src/router/RouterContext.tsx | 4 +- src/router/link.sass | 8 ++ src/router/link.scss | 13 ---- 26 files changed, 243 insertions(+), 273 deletions(-) create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 src/about/about.sass delete mode 100644 src/about/about.scss rename src/img/{.DSC_5633.jpg => DSC_5633.jpg} (100%) rename src/img/{.IMG_3095.jpg => IMG_3095.jpg} (100%) create mode 100644 src/img/blog-box.svg create mode 100644 src/index.sass delete mode 100644 src/index.scss create mode 100644 src/index/canvas.sass delete mode 100644 src/index/canvas.scss create mode 100644 src/nav/menu.sass delete mode 100644 src/nav/menu.scss create mode 100644 src/nav/nav.sass delete mode 100644 src/nav/nav.scss create mode 100644 src/router/link.sass delete mode 100644 src/router/link.scss diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..e69de29 diff --git a/src/about/About.mdx b/src/about/About.mdx index bf9d8af..e2cdde5 100644 --- a/src/about/About.mdx +++ b/src/about/About.mdx @@ -1,4 +1,4 @@ -import openingImage from "../img/IMG_20240725_175449_803.jpg"; +import openingImage from "../img/DSC_5633.jpg"; import rainbow from "../img/IMG-0186.jpg"; import japanese from "../img/IMG_20230531_000224_01.jpg"; import computers from "../img/IMG_3071.jpg"; diff --git a/src/about/AboutPage.tsx b/src/about/AboutPage.tsx index 4e30777..db2a0a7 100644 --- a/src/about/AboutPage.tsx +++ b/src/about/AboutPage.tsx @@ -1,4 +1,4 @@ -import "./about.scss"; +import "./about.sass"; import {HTMLProps, lazy} from "react"; import {Link} from "../router/Link"; import {Path} from "../router/router"; diff --git a/src/about/about.sass b/src/about/about.sass new file mode 100644 index 0000000..071022a --- /dev/null +++ b/src/about/about.sass @@ -0,0 +1,82 @@ +@use "../nav/nav" +$paragraph: 20px +$max-width: 600px +$min-width: 400px + +.about-page + color: white + display: flex + justify-content: center + +.title + text-align: center + margin: nav.$padding + +.self + width: 100% + border-bottom: white 4px solid + + +.about-container + min-width: $min-width + flex-shrink: 1 + display: flex + flex-direction: column + align-items: center + font-family: Neuton, serif + line-height: 40px + + img:not(.self) + border: 2px white solid + + p + text-indent: 30px + padding: nav.$padding + max-width: $max-width + font-size: $paragraph + + h1 + font-size: $paragraph * 2 + padding: nav.$padding + + h2 + font-size: $paragraph * 1.5 + padding: nav.$padding + + h3 + font-size: $paragraph * 1.1 + font-weight: bold + +.edge + background: #27213C + flex-grow: 1 + min-width: 30% + +.clothing, .computers + margin: 15px 0 + display: flex + flex-direction: row + justify-content: center + + +.clothing>img + width: 33% + + +.computers + // select second + img:not(:first-child) + width: 20% + + img + width: 30% + +.external-link + text-decoration: underline !important + +ul + display: flex + flex-direction: column + font-size: $paragraph + max-width: $max-width + gap: 10px diff --git a/src/about/about.scss b/src/about/about.scss deleted file mode 100644 index 69ba68c..0000000 --- a/src/about/about.scss +++ /dev/null @@ -1,93 +0,0 @@ -@use "../nav/nav.scss"; -$paragraph: 20px; -$max-width: 600px; - -.about-page { - color: white; - display: flex; - justify-content: center; -} - -.title { - text-align: center; - margin: nav.$padding; -} - -.self { - width: 100%; - border-bottom: white 4px solid; -} - -.about-container { - margin-top: 2 * nav.$padding; - flex-shrink: 1; - max-width: 75%; - display: flex; - flex-direction: column; - align-items: center; - font-family: Neuton; - line-height: 40px; - - img:not(.self) { - border: 2px white solid; - } - - p { - text-indent: 30px; - margin: 10px; - max-width: $max-width; - font-size: $paragraph; - } - - h1 { - font-size: $paragraph * 2; - } - h2 { - font-size: $paragraph * 1.5; - } - h3 { - font-size: $paragraph * 1.1; - font-weight: bold; - } -} - -.edge { - background:#27213C; - flex-grow: 1; -} - -.clothing, .computers { - margin: 15px 0; - display: flex; - flex-direction: row; - justify-content: center; -} - -.clothing>img { - width: 33%; -} - -.computers { - // select second - img:not(:first-child) { - width: 20%; - } - - img { - width: 30%; - } -} - - - -.external-link { - text-decoration: underline !important; -} - -ul { - display: flex; - flex-direction: column; - font-size: $paragraph; - max-width: $max-width; - gap: 10px; -} \ No newline at end of file diff --git a/src/img/.DSC_5633.jpg b/src/img/DSC_5633.jpg similarity index 100% rename from src/img/.DSC_5633.jpg rename to src/img/DSC_5633.jpg diff --git a/src/img/.IMG_3095.jpg b/src/img/IMG_3095.jpg similarity index 100% rename from src/img/.IMG_3095.jpg rename to src/img/IMG_3095.jpg diff --git a/src/img/blog-box.svg b/src/img/blog-box.svg new file mode 100644 index 0000000..c786e4f --- /dev/null +++ b/src/img/blog-box.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.sass b/src/index.sass new file mode 100644 index 0000000..adda38b --- /dev/null +++ b/src/index.sass @@ -0,0 +1,27 @@ +$phone: 750px + +html, body + margin: 0 + padding: 0 + font-family: Inter, sans-serif + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + +#root + display: flex + flex-direction: column + min-height: 100vh + background: black + color: white + +// disable image dragging +img + user-select: none + pointer-events: none + +button + background: none + border: none + padding: 0 + color: white + cursor: pointer \ No newline at end of file diff --git a/src/index.scss b/src/index.scss deleted file mode 100644 index 7b8b05f..0000000 --- a/src/index.scss +++ /dev/null @@ -1,30 +0,0 @@ -body { - margin: 0; - width: 100%; - height: 100%; - background: black; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: white; -} - -// disable image dragging -img { - user-select: none; - pointer-events: none; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -button { - background: none; - border: none; - color: white; - cursor: pointer; -} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index e72afe9..65069e5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.scss'; +import './index.sass'; import {RouterProvider} from "./router/RouterContext"; import "@fontsource/inter"; // Defaults to weight 400 import "@fontsource/neuton"; diff --git a/src/index/Canvas.tsx b/src/index/Canvas.tsx index f09b4b6..bf04363 100644 --- a/src/index/Canvas.tsx +++ b/src/index/Canvas.tsx @@ -1,5 +1,5 @@ +import "./canvas.sass"; import {motion} from "framer-motion"; -import "./canvas.scss"; import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber"; import {Vector3} from "three"; import {Moon} from "./Moon"; @@ -9,7 +9,8 @@ export default function Canvas() { return (
- +
+ @@ -17,9 +18,10 @@ export default function Canvas() { - +
+ Welcome to my blog - +
) } diff --git a/src/index/canvas.sass b/src/index/canvas.sass new file mode 100644 index 0000000..ab2f0bd --- /dev/null +++ b/src/index/canvas.sass @@ -0,0 +1,18 @@ +@use "../index" + +.canvas + display: flex + flex-direction: column + justify-content: center + align-items: center + +.canvas-ctr + width: 100% + height: 100vh + display: flex + flex-direction: column + flex-grow: 1 + +.welcome + position: absolute + font-family: Neuton, serif diff --git a/src/index/canvas.scss b/src/index/canvas.scss deleted file mode 100644 index dc3df20..0000000 --- a/src/index/canvas.scss +++ /dev/null @@ -1,19 +0,0 @@ -.canvas { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - background: black; - color: white; - z-index: -999; - overflow: hidden; -} - -.welcome { - text-align: center; - position: absolute; - top: calc(50% + 50px); - font-family: Neuton; - font-size: 30px; -} \ No newline at end of file diff --git a/src/nav/Links.tsx b/src/nav/Links.tsx index 7b92978..7d15620 100644 --- a/src/nav/Links.tsx +++ b/src/nav/Links.tsx @@ -1,14 +1,13 @@ import {Link} from "../router/Link"; -import {motion} from "framer-motion"; import {ROUTES} from "../router/Route"; import ResumePdf from "../img/resume.pdf"; +import {motion} from "motion/react"; export function Links() { return
- - Tymur Arsentiev + Tymur Arsentiev { ROUTES.map(([path, name]) => @@ -21,13 +20,4 @@ export function Links() {

Resume

-} - -function Spacers(props: {length: number}) { - const spacers = []; - for (let i = 0; i < props.length; i++) { - spacers.push(
); - } - - return spacers; } \ No newline at end of file diff --git a/src/nav/Menu.tsx b/src/nav/Menu.tsx index 2d43daa..a3c8f8e 100644 --- a/src/nav/Menu.tsx +++ b/src/nav/Menu.tsx @@ -1,5 +1,5 @@ -import "./menu.scss"; -import {motion, animate} from "framer-motion"; +import "./menu.sass"; +import {animate, motion} from "framer-motion"; import {useEffect} from "react"; const articles = [ diff --git a/src/nav/Nav.tsx b/src/nav/Nav.tsx index 82ddc80..97f6b43 100644 --- a/src/nav/Nav.tsx +++ b/src/nav/Nav.tsx @@ -1,34 +1,32 @@ import {useState} from "react"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faBars} from "@fortawesome/free-solid-svg-icons/faBars"; -import {Menu} from "./Menu"; import {ReactComponent as Wave} from "../img/menu-wave.svg"; -import "./nav.scss"; +import "./nav.sass"; import {Links} from "./Links"; +import {Menu} from "./Menu"; export default function Nav() { const [active, setActive] = useState(false); - return <> + return
- - ; + +
; } function MenuButton(props : { active: boolean, setActive: (_:boolean) => void }) { const {active, setActive} = props; return ( -
- -
+ ); } diff --git a/src/nav/menu.sass b/src/nav/menu.sass new file mode 100644 index 0000000..5b59066 --- /dev/null +++ b/src/nav/menu.sass @@ -0,0 +1,13 @@ +@use "nav" + +.menu + position: absolute + display: flex + flex-direction: column + background: nav.$menu + color: white + width: 25% + height: 100vh + + div + padding: nav.$padding \ No newline at end of file diff --git a/src/nav/menu.scss b/src/nav/menu.scss deleted file mode 100644 index fce8ace..0000000 --- a/src/nav/menu.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "./nav"; - -.menu { - position: absolute; - display: flex; - flex-direction: column; - background: nav.$menu; - z-index: 10; - color: white; - width: 25%; - height: 100vh; - - div { - padding: nav.$padding; - } -} \ No newline at end of file diff --git a/src/nav/nav.sass b/src/nav/nav.sass new file mode 100644 index 0000000..cc329c3 --- /dev/null +++ b/src/nav/nav.sass @@ -0,0 +1,50 @@ +@use "../index" +$padding: 15px +$menu: #282c34 + +.menu-btn + align-self: center + display: flex + flex-direction: column + align-items: center + font-size: 30px + + +// hide menu button and center links +@media screen and (max-width: index.$phone) + .menu-btn + display: none + position: absolute + + .links + justify-content: center + +nav + background-color: $menu + padding: $padding + display: flex + align-items: center + justify-content: center + + .name + margin: auto + flex-grow: 1 + h1 + margin: auto 0 + font-size: 40px + + + +.links + flex-grow: 1 + justify-content: center + align-items: center + display: flex + flex-wrap: wrap + gap: 15px + + +.wave + user-select: none + pointer-events: none + position: absolute diff --git a/src/nav/nav.scss b/src/nav/nav.scss deleted file mode 100644 index 7911f91..0000000 --- a/src/nav/nav.scss +++ /dev/null @@ -1,57 +0,0 @@ -$padding: 15px; -$menu: #282c34; - -.menu-btn>button:hover { - opacity: 90%; -} - -.menu-btn>button:active { - opacity: 80%; -} - -.menu-btn { - align-self: center; - display: flex; - flex-direction: column; - align-items: center; - button { - font-size: 30px; - } -} - -nav { - background-color: $menu; - padding: $padding; - display: flex; - justify-content: center; -} - -nav>a{ - text-align: center; -} - -.name>h1 { - margin: 0; - font-size: 40px; -} - -.name { - margin: auto; - position: relative; -} - -.wave { - user-select: none; - pointer-events: none; - position: absolute; -} - -.links { - display: flex; - flex-grow: 1; - gap: 15px; -} - -.nav { - font-family: Inter; -} \ No newline at end of file diff --git a/src/router/Link.tsx b/src/router/Link.tsx index e22e8d4..bb6bd5c 100644 --- a/src/router/Link.tsx +++ b/src/router/Link.tsx @@ -1,4 +1,4 @@ -import "./link.scss"; +import "./link.sass"; import React, {HTMLProps, ReactNode} from "react"; import {useRouter} from "./RouterContext"; @@ -7,7 +7,7 @@ import {Path} from "./router"; export function Link(props: {href: Path, children : ReactNode, target?: '_blank' } & HTMLProps) { let {children, className, href} = props; const router = useRouter(); - className = `${className} link`; + className = `${className ?? ""} link`.trim(); function onClick(event: React.MouseEvent) { // perform the default action if _blank diff --git a/src/router/Route.tsx b/src/router/Route.tsx index 0da1431..8511014 100644 --- a/src/router/Route.tsx +++ b/src/router/Route.tsx @@ -1,31 +1,40 @@ import React, {PropsWithChildren} from "react"; import {useRouter} from "./RouterContext"; import {Path} from "./router"; +import {ArticlesList} from "../articles/ArticlesList"; -const Canvas = React.lazy(() => import("../index/Canvas")); -const About = React.lazy(() => import("../about/AboutPage")); - -export const ROUTES: [Path, string][] = [ +type Route = [Path, string]; +type Routes = [Route, Route, Route]; +export const ROUTES: Routes = [ ["/", "Home"], ["/about", "About"], ["/articles", "Articles"] ]; -function Route(props: PropsWithChildren & {path: Path}) { - const {path, children} = props; +function Route(props: PropsWithChildren & {route: Route}) { + const {route: [path], children} = props; const router = useRouter(); return <>{router.current === path && children} } +const Canvas = React.lazy(() => import("../index/Canvas")); +const About = React.lazy(() => import("../about/AboutPage")); + + export function Routes() { + const [index, about, articles] = ROUTES; + return <> - + - + + + + } \ No newline at end of file diff --git a/src/router/RouterContext.tsx b/src/router/RouterContext.tsx index 7e32741..5343332 100644 --- a/src/router/RouterContext.tsx +++ b/src/router/RouterContext.tsx @@ -22,11 +22,11 @@ export function RouterProvider(props : PropsWithChildren) { }, []); return