fixes
This commit is contained in:
parent
0b3745bc88
commit
f06b8ed77c
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
48
src/components/ui/scroll-area.tsx
Normal file
48
src/components/ui/scroll-area.tsx
Normal 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 }
|
Loading…
x
Reference in New Issue
Block a user