chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

_duotóne_

Browse Source
This commit is contained in:
Chuck Dries
2022-10-24 18:40:11 -07:00
parent f24135a5af
commit 78c9126300
3 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Nav.tsx
View File

@@ -5,7 +5,8 @@ import useDimensions from "react-cool-dimensions";
import Menu from "@spectrum-icons/workflow/Menu";
const navClasses = "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
const navClasses =
"hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
<ul
@@ -13,7 +14,7 @@ const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
"z-30 bg-vibrant-dark rounded overflow-hidden",
isVertical
? "inline-flex flex-wrap justify-center"
: "absolute rounded-md top-[40px] border border-white"
: "absolute rounded-md top-[40px] border border-vibrant-light"
)}
>
<li>
@@ -80,7 +81,7 @@ interface NavProps {
const Nav = ({ internalLinks, className }: NavProps) => {
const { observe, currentBreakpoint } = useDimensions({
breakpoints: { XS: 0, LG: 690 },
breakpoints: { XS: 0, LG: 750 },
updateOnBreakpointChange: true,
});
const [linksMenu, setLinksMenu] = useState(false);
@@ -89,7 +90,6 @@ const Nav = ({ internalLinks, className }: NavProps) => {
<nav
className={classnames(
"mt-0 flex justify-center w-full font-serif",
"bg-vibrant-dark",
className
)}
ref={observe}
@@ -111,7 +111,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
))}
</ul>
{internalLinks && currentBreakpoint !== "XS" && (
<span className="block p-3 text-gray-200">|</span>
<span className="block p-3 text-vibrant-light opacity-75">|</span>
)}
{currentBreakpoint === "XS" && (
<button

20
src/pages/index.tsx
View File

@@ -170,18 +170,22 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
DarkMuted: [0, 0, 0],
LightMuted: [255, 255, 255],
Vibrant: [255, 255, 255],
LightVibrant: [255, 255, 255],
DarkVibrant: [0, 0, 0],
LightVibrant: [0, 0, 0],
DarkVibrant: [231, 229, 228],
})}
/>
</Helmet>
<div className="top-0 z-10 bg-black">
<Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} />
<div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
<h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
<h2 className="">Full Stack Software Engineer & Photographer</h2>
<div className="top-0 z-10">
<div className="bg-vibrant-dark text-black pb-1">
<Nav
className="mb-4"
internalLinks={[{ href: "/", label: "Home" }]}
/>
<div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
<h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
<h2 className="">Full Stack Software Engineer & Photographer</h2>
</div>
</div>
{/* <div className="w-full gradient h-[10px]"></div> */}
<div className="flex flex-col md:flex-row md:items-end justify-between">
<KeywordsPicker
keywords={[

29
src/styles/global.css
View File

@@ -82,17 +82,22 @@
}
.gradient {
background-image: linear-gradient(
45deg,
hsl(226deg 100% 20%) 0%,
hsl(279deg 68% 26%) 24%,
hsl(309deg 85% 28%) 39%,
hsl(324deg 92% 37%) 51%,
hsl(339deg 72% 50%) 60%,
hsl(356deg 91% 62%) 68%,
hsl(15deg 100% 62%) 76%,
hsl(32deg 100% 57%) 83%,
hsl(45deg 100% 50%) 91%,
hsl(55deg 100% 50%) 100%
180deg,
hsl(31deg 24% 44%) 0%,
hsl(27deg 25% 42%) 7%,
hsl(22deg 26% 40%) 14%,
hsl(18deg 27% 37%) 21%,
hsl(12deg 28% 35%) 29%,
hsl(9deg 29% 32%) 36%,
hsl(4deg 30% 30%) 43%,
hsl(0deg 31% 27%) 50%,
hsl(0deg 31% 23%) 57%,
hsl(0deg 31% 19%) 64%,
hsl(0deg 32% 15%) 71%,
hsl(0deg 30% 12%) 79%,
hsl(0deg 30% 8%) 86%,
hsl(0deg 30% 4%) 93%,
hsl(0deg 0% 0%) 100%
);
}
}
@@ -122,4 +127,4 @@ kbd {
button {
@apply cursor-auto;
}
}