feat: update components and styles for improved UI
- Changed the style in components.json from "new-york" to "radix-mira". - Updated Tailwind CSS configuration path in components.json. - Added menu color and accent properties in components.json. - Upgraded various dependencies in package.json, including Next.js and framer-motion. - Enhanced globals.css with new theme variables and animations for accordion components. - Added new social media links in Contact component and replaced anchor tags with Link component for better routing. - Removed outdated project entry from Projects component. - Refactored Timeline component to use Button component for year selection. - Added new icon for maishift in public directory.
This commit is contained in:
parent
7d86d8a444
commit
b436b79769
8 changed files with 804 additions and 128 deletions
|
|
@ -3,9 +3,75 @@
|
|||
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
--radius-3xl: calc(var(--radius) + 12px);
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
|
||||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||||
|
||||
@keyframes accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accordion-up {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "NType82Headline";
|
||||
src: url("https://f.imnya.ng/font/NType82-Headline.woff2") format("woff2");
|
||||
|
|
@ -44,7 +110,7 @@
|
|||
--chart-3: hsl(197 37% 24%);
|
||||
--chart-4: hsl(43 74% 66%);
|
||||
--chart-5: hsl(27 87% 67%);
|
||||
--radius: 0.6rem;
|
||||
--radius: 0.625rem;
|
||||
--sidebar-background: hsl(340 25% 98%);
|
||||
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
||||
--sidebar-primary: hsl(240 5.9% 10%);
|
||||
|
|
@ -98,65 +164,6 @@
|
|||
--scrollbar-hover: hsla(340 10% 60% / 0.8);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar-background);
|
||||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||||
|
||||
@keyframes accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accordion-up {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const contact = [
|
||||
{
|
||||
|
|
@ -27,11 +28,21 @@ const contact = [
|
|||
"url": "https://instagram.com/imnya.ng",
|
||||
"icon": <Instagram className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
"name": "𝕏",
|
||||
"url": "https://x.com/imnya_ng",
|
||||
"icon": <p className="text-[20px] font-bold">𝕏</p>
|
||||
},
|
||||
{
|
||||
"name": "Discord",
|
||||
"url": "https://imnya.ng/discord",
|
||||
"icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
|
||||
},
|
||||
{
|
||||
"name": "maishift",
|
||||
"url": "https://mai.sft.sh/imnyang",
|
||||
"icon": <Image src="/icon/maimai.webp" alt="mai.sft.sh" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
|
||||
}
|
||||
]
|
||||
|
||||
export default function Contact() {
|
||||
|
|
@ -40,14 +51,14 @@ export default function Contact() {
|
|||
{contact.map((method) => (
|
||||
<Tooltip key={method.name} >
|
||||
<TooltipTrigger asChild>
|
||||
<a
|
||||
<Link
|
||||
href={method.url}
|
||||
className="flex items-center space-x-2 text-foreground/80 hover:text-foreground transition-colors"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{method.icon}
|
||||
</a>
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{method.name}</p>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,6 @@ const projects = [
|
|||
detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
|
||||
tags: ['React', 'ElysiaJS'],
|
||||
},
|
||||
{
|
||||
name: '@today.isangjeong',
|
||||
url: 'https://instagram.com/today.isangjeong',
|
||||
desc: '인스타에서 급식 공유를 간편하게',
|
||||
detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.',
|
||||
tags: ['TypeScript', 'igramapi', '@napi-rs/canvas'],
|
||||
},
|
||||
{
|
||||
name: 'NYL',
|
||||
url: 'https://nyl.ny64.kr',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { events } from "@/lib/events";
|
||||
import { LinkIcon } from "lucide-react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function TimelineComponent() {
|
||||
const [selectedYear, setSelectedYear] = useState<number | null>(null);
|
||||
|
|
@ -34,18 +35,14 @@ export default function TimelineComponent() {
|
|||
{/* Left column - Year buttons */}
|
||||
<div className="w-full md:w-24 flex flex-row md:flex-col gap-2 overflow-y-auto pr-2">
|
||||
{years.map((year) => (
|
||||
<button
|
||||
<Button
|
||||
key={year}
|
||||
type="button"
|
||||
onClick={() => setSelectedYear(year)}
|
||||
className={`px-4 py-2 rounded-lg font-semibold transition-all text-sm ${
|
||||
selectedYear === year
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-background border border-border hover:bg-muted"
|
||||
}`}
|
||||
variant={selectedYear === year ? "default" : "outline"}
|
||||
className="font-semibold"
|
||||
>
|
||||
{year}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue