imnyang
96a43a9a3c
- Add timeline route helper
- src/app/timeline/route.ts
- simple helper to navigate to #timeline
- Add NeoFetch component (client)
- src/components/NeoFetch.tsx
- Displays avatar iframe, uptime calculation, experience count, WakaTime stats, terminal/ip, locale and colour palette
- Uses custom hooks useIpData and useWakaTimeData, and events data
- Add Top (hero) component (client)
- src/components/Top.tsx
- Full-screen hero with randomized background, parallax on mouse, device orientation & motion handlers, requestPermission trigger on image click
- Includes Sidebar import and optimized Image usage
- Add Timeline UI component (client)
- src/components/timeline.tsx
- Year selector + filtered event list with links and icons
- Handles initial selection and rendering grouped by year
- Add reusable Timeline primitives (client)
- src/components/ui/timeline.tsx
- Timeline context and composable parts: Timeline, TimelineItem, Indicator, Separator, Date, Title, Content, Header
- Orientation support and controlled/uncontrolled API
- Add data & hooks
- src/lib/events.ts
- Seeded events array (education/awards/conference entries) used by timeline and NeoFetch
- src/hooks/use-ip-data.ts
- Fetches terminal/ip info from https://api.imnya.ng/ip
- src/hooks/use-wakatime-data.ts
- Fetches WakaTime summary from https://api.imnya.ng/wakatime
Notes:
- All new components are client-side ("use client")
- Adds device motion/orientation listeners with cleanup
- Provides basic error handling for network hooks
- Improves homepage/UX with interactive hero and timeline data visualization
26 lines
736 B
TypeScript
26 lines
736 B
TypeScript
import Image from "next/image";
|
|
import { Popover } from "./ui/popover";
|
|
|
|
export default function Sidebar() {
|
|
return (
|
|
<div className="w-[100px] h-screen absolute top-0 left-0 flex flex-col items-center justify-between">
|
|
<div className="w-full h-full flex flex-col items-center gap-6">
|
|
<Image
|
|
src="/Frame.svg"
|
|
alt="logo"
|
|
className="w-fit h-fit mt-[50px]"
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
<div className="font-ntype rotate-90 mt-8 text-3xl opacity-70 flex flex-row gap-2 w-full">
|
|
<h1>
|
|
<a href="mailto:me@imnya.ng">me@imnya.ng</a>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Popover />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|