-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: boxes pattern and inconsistent colors
- Loading branch information
rxyhn
committed
Sep 8, 2024
1 parent
38fa2a3
commit 301b37e
Showing
7 changed files
with
107 additions
and
65 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| interface GridProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| const Boxes: React.FC<GridProps> = ({ className = "" }) => { | ||
| const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); | ||
|
|
||
| useEffect(() => { | ||
| const updateDimensions = () => { | ||
| setDimensions({ | ||
| width: window.innerWidth, | ||
| height: window.innerHeight, | ||
| }); | ||
| }; | ||
|
|
||
| window.addEventListener("resize", updateDimensions); | ||
| updateDimensions(); | ||
|
|
||
| return () => window.removeEventListener("resize", updateDimensions); | ||
| }, []); | ||
|
|
||
| const getCellSize = () => { | ||
| if (dimensions.width < 640) return 20; // sm | ||
| if (dimensions.width < 768) return 30; // md | ||
| if (dimensions.width < 1024) return 45; // lg | ||
| return 88; // xl | ||
| }; | ||
|
|
||
| const cellSize = getCellSize(); | ||
| const columns = Math.ceil(dimensions.width / cellSize); | ||
| const rows = Math.ceil(dimensions.height / 2 / cellSize); // Only half the screen height | ||
|
|
||
| return ( | ||
| <div | ||
| className={`absolute h-1/2 w-full overflow-hidden ${className}`} | ||
| style={{ zIndex: -1 }} | ||
| > | ||
| {/* Left gradient overlay */} | ||
| <div className="absolute left-0 top-0 h-full w-1/2"> | ||
| <div className="absolute inset-0 z-30 bg-gradient-to-tl from-black from-50% via-transparent via-90% to-transparent to-100%" /> | ||
| <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black"> | ||
| {Array.from({ length: rows }).map((_, rowIndex) => ( | ||
| <div | ||
| key={rowIndex} | ||
| className="relative flex w-full divide-x divide-dashed divide-neutral-700" | ||
| style={{ height: `${cellSize}px` }} | ||
| > | ||
| {Array.from({ length: columns / 2 }).map((_, colIndex) => ( | ||
| <div key={colIndex} className="relative w-full bg-black"> | ||
| <div className="absolute inset-0.5 bg-black" /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Right gradient overlay */} | ||
| <div className="absolute right-0 top-0 h-full w-1/2"> | ||
| <div className="absolute inset-0 z-30 bg-gradient-to-tr from-black from-50% via-transparent via-90% to-transparent to-100%" /> | ||
| <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black"> | ||
| {Array.from({ length: rows }).map((_, rowIndex) => ( | ||
| <div | ||
| key={rowIndex} | ||
| className="relative flex w-full divide-x divide-dashed divide-neutral-700" | ||
| style={{ height: `${cellSize}px` }} | ||
| > | ||
| {Array.from({ length: columns / 2 }).map((_, colIndex) => ( | ||
| <div key={colIndex} className="relative w-full bg-black"> | ||
| <div className="absolute inset-0.5 bg-black" /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Boxes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| import { basics } from "@cv"; | ||
| const { name } = basics; | ||
| --- | ||
|
|
||
| <footer class="w-full print:hidden"> | ||
| <div | ||
| class="mx-auto items-center border-t border-neutral-800 bg-black px-6 py-4 text-center text-xs text-neutral-200 sm:mt-20" | ||
| > | ||
| © {new Date().getFullYear()} | ||
| {name}. All rights reserved. | ||
| </div> | ||
| </footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters