This commit is contained in:
Braydon 2024-08-30 00:22:58 -04:00
parent 0b3745bc88
commit f06b8ed77c
5 changed files with 110 additions and 52 deletions

View File

@ -3,15 +3,15 @@ import Navbar from "@/components/landing/navbar";
import { ReactElement } from "react";
const LandingPage = (): ReactElement => (
<main
className="h-screen flex flex-col"
style={{
background:
"linear-gradient(to top, hsla(240, 8%, 8%, 0.5), hsl(var(--background)))",
}}
>
<main className="h-screen flex flex-col">
<Navbar />
<div className="px-5 xs:px-7 h-full flex flex-col justify-center">
<div
className="h-full px-5 xs:px-7 flex flex-col justify-center"
style={{
background:
"linear-gradient(to top, hsla(240, 8%, 8%, 0.7), hsl(var(--background)))",
}}
>
<Greeting />
</div>
</main>

View File

@ -7,6 +7,7 @@ import { UseThemeProps } from "next-themes/dist/types";
import Link from "next/link";
import { ReactElement } from "react";
import Project from "@/types/project";
import { ScrollArea } from "@/components/ui/scroll-area";
import Image from "next/image";
const projects: Project[] = [
@ -64,51 +65,60 @@ const projects: Project[] = [
const MyWork = (): ReactElement => {
const { theme }: UseThemeProps = useTheme();
return (
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
{projects.map((project, index) => (
<Link key={index} href={project.link || "#"} target="_blank">
<MagicCard
className="w-[25rem] p-2.5 cursor-default opacity-95"
gradientColor={theme === "dark" ? "#262626" : "#D9D9D9"}
<ScrollArea className="h-[17.75rem]">
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
{projects.map((project, index) => (
<Link
key={index}
href={project.link || "#"}
target="_blank"
>
{/* Icon, Name & Years Active */}
<div className="flex gap-2.5 items-center">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
<div className="flex gap-1">
<span className="text-green-400/80">
{project.startDate.format("MMM YYYY")}
</span>
-
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format("MMM YYYY")}
</span>
) : (
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 cursor-default opacity-95"
gradientColor={
theme === "dark" ? "#262626" : "#D9D9D9"
}
>
{/* Icon, Name & Years Active */}
<div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
<div className="flex gap-3">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
Present
{project.startDate.format("MMM YYYY")}
</span>
)}
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format("MMM YYYY")}
</span>
) : (
<span className="text-green-400/80">
Present
</span>
)}
</div>
</div>
</div>
{/* Description */}
<p className="mt-2.5 line-clamp-3 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{project.description}
</p>
</MagicCard>
</Link>
))}
</div>
{/* Description */}
<p className="mt-2.5 line-clamp-3 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{project.description}
</p>
</MagicCard>
</Link>
))}
</div>
</ScrollArea>
);
};
export default MyWork;

View File

@ -22,8 +22,8 @@ import {
import BlurFade from "@/components/ui/blur-fade";
const Navbar = (): ReactElement => (
<BlurFade className="pt-1" delay={1.35} inView>
<nav className="px-3 xs:px-7 py-4 flex gap-3 xs:gap-10 sm:gap-14 justify-center items-center border-b transition-all transform-gpu">
<BlurFade className="pt-1 z-50" delay={1.35} inView>
<nav className="px-3 xs:px-7 py-4 flex gap-3 xs:gap-10 sm:gap-14 justify-center items-center bg-background border-b transition-all transform-gpu">
<Branding />
<Links />
<ThemeSwitcher />
@ -110,7 +110,7 @@ const UsefulLinksContent = (): ReactElement => (
<Link href="https://status.rainnny.club" target="_blank">
<Button className="gap-3 cursor-default" variant="ghost">
<SignalIcon width={24} height={24} />
<span>Service Status</span>
<span>Status</span>
</Button>
</Link>
</div>

View File

@ -65,7 +65,7 @@ const Navigation = (): ReactElement => {
{/* Selected Content */}
{selected && (
<BlurFade key={selected.name} delay={0.05} inView>
<div className="mt-7">{selected.content}</div>
<div className="mt-5">{selected.content}</div>
</BlurFade>
)}
</div>

View File

@ -0,0 +1,48 @@
"use client"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
export { ScrollArea, ScrollBar }