From 5f06079b5b0a63b213f8986458e14400e28fc344 Mon Sep 17 00:00:00 2001 From: Timothy Pidashev Date: Wed, 8 Jan 2025 14:51:51 -0800 Subject: [PATCH] Add background to content; update layouts; add more content: --- src/src/components/about/current-focus.tsx | 24 ++++---- .../background.tsx => background/index.tsx} | 56 +++++++++++-------- src/src/components/header/index.tsx | 22 +++++--- src/src/content/projects/iridescent.mdx | 52 ++++++++++++++++- src/src/content/projects/reviveauto.mdx | 2 +- src/src/layouts/{blog.astro => content.astro} | 3 + src/src/layouts/index.astro | 7 ++- src/src/layouts/main.astro | 25 --------- src/src/layouts/projects.astro | 33 ----------- src/src/pages/404.astro | 21 +++++-- src/src/pages/about.astro | 4 +- src/src/pages/blog/[...slug].astro | 6 +- src/src/pages/blog/index.astro | 6 +- src/src/pages/projects/[...slug].astro | 6 +- src/src/pages/projects/index.astro | 6 +- src/src/pages/resume.astro | 6 +- 16 files changed, 151 insertions(+), 128 deletions(-) rename src/src/components/{hero/background.tsx => background/index.tsx} (90%) rename src/src/layouts/{blog.astro => content.astro} (78%) delete mode 100644 src/src/layouts/main.astro delete mode 100644 src/src/layouts/projects.astro diff --git a/src/src/components/about/current-focus.tsx b/src/src/components/about/current-focus.tsx index ccfd7cd..341cc1c 100644 --- a/src/src/components/about/current-focus.tsx +++ b/src/src/components/about/current-focus.tsx @@ -4,22 +4,22 @@ import { Code2, BookOpen, RocketIcon, Compass } from 'lucide-react'; export default function CurrentFocus() { const recentProjects = [ { - title: "Project Name 1", - description: "Short description of the project", - href: "/projects/project-1", - tech: ["React", "TypeScript", "Node.js"] + title: "Darkbox", + description: "My gruvbox theme, with a pure black background", + href: "/projects/darkbox", + tech: ["Neovim", "Lua"] }, { - title: "Project Name 2", - description: "Short description of the project", - href: "/projects/project-2", - tech: ["Python", "Django", "PostgreSQL"] + title: "Revive Auto Parts", + description: "A car parts listing site built for a client", + href: "/projects/reviveauto", + tech: ["Tanstack", "React Query", "Fastapi"] }, { - title: "Project Name 3", - description: "Short description of the project", - href: "/projects/project-3", - tech: ["Next.js", "Tailwind", "Prisma"] + title: "Fhccenter", + description: "Website made for a private school", + href: "/projects/fhccenter", + tech: ["Nextjs", "Typescript", "Prisma"] } ]; diff --git a/src/src/components/hero/background.tsx b/src/src/components/background/index.tsx similarity index 90% rename from src/src/components/hero/background.tsx rename to src/src/components/background/index.tsx index 7d31162..d3bd547 100644 --- a/src/src/components/hero/background.tsx +++ b/src/src/components/background/index.tsx @@ -24,13 +24,22 @@ interface Grid { offsetY: number; } +interface BackgroundProps { + layout?: 'index' | 'sidebar'; + position?: 'left' | 'right'; +} + const CELL_SIZE = 25; const TRANSITION_SPEED = 0.1; const SCALE_SPEED = 0.15; const CYCLE_FRAMES = 120; const INITIAL_DENSITY = 0.15; +const SIDEBAR_WIDTH = 240; -const Background: React.FC = () => { +const Background: React.FC = ({ + layout = 'index', + position = 'left' +}) => { const canvasRef = useRef(null); const gridRef = useRef(); const animationFrameRef = useRef(); @@ -50,14 +59,10 @@ const Background: React.FC = () => { }; const calculateGridDimensions = (width: number, height: number) => { - // Calculate number of complete cells that fit in the viewport const cols = Math.floor(width / CELL_SIZE); const rows = Math.floor(height / CELL_SIZE); - - // Calculate offsets to center the grid const offsetX = Math.floor((width - (cols * CELL_SIZE)) / 2); const offsetY = Math.floor((height - (rows * CELL_SIZE)) / 2); - return { cols, rows, offsetX, offsetY }; }; @@ -138,7 +143,6 @@ const Background: React.FC = () => { }; const computeNextState = (grid: Grid) => { - // First pass: compute next state without applying it for (let i = 0; i < grid.cols; i++) { for (let j = 0; j < grid.rows; j++) { const cell = grid.cells[i][j]; @@ -153,11 +157,9 @@ const Background: React.FC = () => { } } - // Mark cells that need to transition if (cell.alive !== cell.next && !cell.transitioning) { cell.transitioning = true; cell.transitionComplete = false; - // For dying cells, start the shrinking animation if (!cell.next) { cell.targetScale = 0; cell.targetOpacity = 0; @@ -172,13 +174,10 @@ const Background: React.FC = () => { for (let j = 0; j < grid.rows; j++) { const cell = grid.cells[i][j]; - // Update animation properties cell.opacity += (cell.targetOpacity - cell.opacity) * TRANSITION_SPEED; cell.scale += (cell.targetScale - cell.scale) * SCALE_SPEED; - // Handle transition states if (cell.transitioning) { - // Check if shrinking animation is complete for dying cells if (!cell.next && cell.scale < 0.05) { cell.alive = false; cell.transitioning = false; @@ -186,7 +185,6 @@ const Background: React.FC = () => { cell.scale = 0; cell.opacity = 0; } - // Check if growing animation is complete for new cells else if (cell.next && !cell.alive && !cell.transitionComplete) { cell.alive = true; cell.transitioning = false; @@ -194,7 +192,6 @@ const Background: React.FC = () => { cell.targetScale = 1; cell.targetOpacity = 1; } - // Start growing animation for new cells once old cells have shrunk else if (cell.next && !cell.alive && cell.transitionComplete) { cell.transitioning = true; cell.targetScale = 1; @@ -214,17 +211,21 @@ const Background: React.FC = () => { const resizeCanvas = () => { const dpr = window.devicePixelRatio || 1; - const displayWidth = window.innerWidth; - const displayHeight = window.innerHeight; + let displayWidth: number; + let displayHeight: number; + + if (layout === 'index') { + displayWidth = window.innerWidth; + displayHeight = window.innerHeight; + } else { + displayWidth = SIDEBAR_WIDTH; + displayHeight = window.innerHeight; + } - // Set canvas size accounting for device pixel ratio canvas.width = displayWidth * dpr; canvas.height = displayHeight * dpr; - - // Scale the context to ensure correct drawing operations ctx.scale(dpr, dpr); - // Set CSS size canvas.style.width = `${displayWidth}px`; canvas.style.height = `${displayHeight}px`; @@ -232,7 +233,6 @@ const Background: React.FC = () => { gridRef.current = initGrid(displayWidth, displayHeight); isInitialized.current = true; } else if (gridRef.current) { - // Update grid dimensions and offsets on resize const { cols, rows, offsetX, offsetY } = calculateGridDimensions(displayWidth, displayHeight); gridRef.current.cols = cols; gridRef.current.rows = rows; @@ -264,7 +264,6 @@ const Background: React.FC = () => { const xOffset = (cellSize - scaledSize) / 2; const yOffset = (cellSize - scaledSize) / 2; - // Add grid offsets to center the animation const x = grid.offsetX + i * CELL_SIZE + (CELL_SIZE - cellSize) / 2 + xOffset; const y = grid.offsetY + j * CELL_SIZE + (CELL_SIZE - cellSize) / 2 + yOffset; const scaledRoundness = roundness * cell.scale; @@ -312,10 +311,21 @@ const Background: React.FC = () => { cancelAnimationFrame(animationFrameRef.current); } }; - }, []); + }, [layout]); + + const getContainerClasses = () => { + if (layout === 'index') { + return 'fixed inset-0 -z-10'; + } + + const baseClasses = 'fixed top-0 bottom-0 hidden lg:block -z-10'; + return position === 'left' + ? `${baseClasses} left-0` + : `${baseClasses} right-0`; + }; return ( -
+
{ setIsClient(true); setCurrentPath(document.location.pathname); - // Trigger initial animation after a brief delay setTimeout(() => setShouldAnimate(true), 50); }, []); @@ -44,7 +42,11 @@ export default function Header() { return (
-
- {headerLinks} +
+
+ {headerLinks} +
); diff --git a/src/src/content/projects/iridescent.mdx b/src/src/content/projects/iridescent.mdx index f1dc9a3..8edb695 100644 --- a/src/src/content/projects/iridescent.mdx +++ b/src/src/content/projects/iridescent.mdx @@ -1,8 +1,58 @@ --- title: "Iridescent" -description: "An open-source graphics engine." +description: "An open-source graphics engine" githubUrl: "https://github.com/timmypidashev/iridescent" techStack: ["Cmake", "Glad", "Imgui"] date: "2024-05-03" image: "/projects/iridescent/thumbnail.jpeg" --- + +## Overview +A open-source graphics engine concept created for my highschool senior project. +Built to expand my understanding of the low level programming world, and further +my reach of graphics and c++ programming. + +## Key Features +* **Dockable Windows**: A quality of life feature utilizing imgui which allows +to efficiently use monitor space, moving logging and certain tools into their own +windows outside of the engines viewspace. + +* **Layer Stack**: Deterministic and fast stack which determines the order in which +all layers of the application are drawn, from the ui all the way to the polygons making +up the scene. + +* **Input Polling**: A realtime implementation polling all input events on the keyboard +and mouse for an extremely low latency between input events and scene events. + +* **Detailed Logging**: A detailed logging system which logs events from the scene all the +way down to the system. + +* **Shading**: The crème de la crème of the renderer, adding shading to the entire scene. + +## Development Highlights +Some of the best highlights for me during this project was quite literally every time I managed +to fix a compilation issue. The exhileration after each successful step forward was just mesmerizing, +and I knew the moment I began my obsession wouldn't end until the engine was in a complete state. +Since I was going into this blind during my senior year at highschool, I knew almost nothing about +c++ or the build systems that accompany it, so learning all of that at once was both a breath of fresh +air and a frustration. However, after several days of work, I became very comfortable with cmake, my build +system of choice, and most basic concepts of c++, allowing me to begin working on the engine itself. +It was at this point where I started hitting some real knowledge barriers and ended up going to multiple +resources to learn and understand the inner workings of a graphics renderer. Resources such as the +[Hazel Engine Series](https://www.youtube.com/watch?v=JxIZbV_XjAs&list=PLlrATfBNZ98dC-V-N3m0Go4deliWHPFwT), +[Learn C++ Website](https://www.learncpp.com/learn-cpp-site-index/), and [OpenGL Tutorials](https://www.opengl.org/sdk/docs/tutorials/) +helped me tremendously here. + +## Challenges and Roadblocks +Some of the biggest challenges I faced was overcoming the knowledge barrier I had on the inner workings +of graphics rendering and low level programming overall. Thankfuly, being stubborn and obsessed can +sometimes help, and in this case after numerous attempts, I began meticoulouly learning every aspect +of the engine as I developed it, and over time it began paying off, snowballing into a very fun experience. +Some food for thought, after you overcome the biggest barrier in your journey, the rest seems laughably easy. + +## Summary +Looking back, working on Iridescent was some of the most fun I have ever had programming as of yet, +and I am still craving for the next project to top this one. It was only by working on this engine +that I realized just how much I love working on the little details, obsessing over each little system +in the engine. Definitely something I will have to do again, maybe write a little game, but thats for +future me to decide :D diff --git a/src/src/content/projects/reviveauto.mdx b/src/src/content/projects/reviveauto.mdx index ae5fe38..d0abee7 100644 --- a/src/src/content/projects/reviveauto.mdx +++ b/src/src/content/projects/reviveauto.mdx @@ -1,6 +1,6 @@ --- title: "Revive Auto Parts" -description: "A car parts listing site built for a client." +description: "A car parts listing site built for a client" demoUrl: "https://reviveauto.parts" techStack: ["Tanstack", "React Query", "Fastapi"] date: "2025-01-04" diff --git a/src/src/layouts/blog.astro b/src/src/layouts/content.astro similarity index 78% rename from src/src/layouts/blog.astro rename to src/src/layouts/content.astro index 2c1455e..fae5ca8 100644 --- a/src/src/layouts/blog.astro +++ b/src/src/layouts/content.astro @@ -2,6 +2,7 @@ import "@/style/globals.css"; import Header from "@/components/header"; import Footer from "@/components/footer"; +import Background from "@/components/background"; export interface Props { title: string; @@ -23,7 +24,9 @@ const { title, description, permalink, current } = Astro.props;
+ +