feat: some component stuff

This commit is contained in:
2026-03-13 23:02:26 +01:00
parent b17c7134c5
commit e83b77171d
10 changed files with 675 additions and 882 deletions

View File

@@ -1,241 +1,183 @@
import { useEffect, useState } from "react";
import { Skeleton } from "./ui/skeleton";
import { MoveUpRight } from "lucide-react";
import { useEffect, useState } from 'react'
import { Skeleton } from './ui/skeleton'
interface DiscordUser {
id: string;
username: string;
discriminator: string;
avatar: string;
global_name: string | null;
id: string
username: string
discriminator: string
avatar: string
global_name: string | null
}
interface DiscordActivity {
id: string;
name: string;
type: number;
state?: string;
details?: string;
id: string
name: string
type: number
state?: string
details?: string
timestamps?: {
start?: number;
end?: number;
};
start?: number
end?: number
}
assets?: {
large_image?: string;
large_text?: string;
small_image?: string;
small_text?: string;
};
application_id?: string;
large_image?: string
large_text?: string
small_image?: string
small_text?: string
}
application_id?: string
}
interface LanyardData {
discord_user: DiscordUser;
discord_status: "online" | "idle" | "dnd" | "offline";
activities: DiscordActivity[];
listening_to_spotify: boolean;
discord_user: DiscordUser
discord_status: 'online' | 'idle' | 'dnd' | 'offline'
activities: DiscordActivity[]
listening_to_spotify: boolean
spotify?: {
track_id: string;
track_id: string
timestamps: {
start: number;
end: number;
};
song: string;
artist: string;
album_art_url: string;
album: string;
};
start: number
end: number
}
song: string
artist: string
album_art_url: string
album: string
}
}
interface LanyardResponse {
success: boolean;
data: LanyardData;
success: boolean
data: LanyardData
}
export default function BentoDiscord() {
const [discordData, setDiscordData] = useState<LanyardData | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [discordData, setDiscordData] = useState<LanyardData | null>(null)
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
const fetchDiscordData = async () => {
try {
const response = await fetch(`https://api.lanyard.rest/v1/users/703974042700611634`);
const data: LanyardResponse = await response.json();
const response = await fetch(
`https://api.lanyard.rest/v1/users/703974042700611634`,
)
const data: LanyardResponse = await response.json()
if (data.success) {
setDiscordData(data.data);
setDiscordData(data.data)
}
setIsLoading(false);
setIsLoading(false)
} catch (error) {
console.error('Error fetching Discord data:', error);
setIsLoading(false);
console.error('Error fetching Discord data:', error)
setIsLoading(false)
}
};
}
fetchDiscordData();
// Update every 30 seconds
const interval = setInterval(fetchDiscordData, 30000);
return () => clearInterval(interval);
}, []);
fetchDiscordData()
const interval = setInterval(fetchDiscordData, 30000)
return () => clearInterval(interval)
}, [])
const getStatusColor = (status: string) => {
switch (status) {
case "online": return "bg-green-400";
case "idle": return "bg-yellow-400";
case "dnd": return "bg-red-400";
default: return "bg-gray-400";
case 'online':
return 'bg-green-400'
case 'idle':
return 'bg-yellow-400'
case 'dnd':
return 'bg-red-400'
default:
return 'bg-gray-400'
}
};
}
const getStatusText = (status: string) => {
switch (status) {
case "online": return "Online";
case "idle": return "Away";
case "dnd": return "Do Not Disturb";
default: return "Offline";
case 'online':
return 'Online'
case 'idle':
return 'Away'
case 'dnd':
return 'Do Not Disturb'
default:
return 'Offline'
}
};
}
const getAvatarUrl = (user: DiscordUser) => {
return `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=128`;
};
return `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=128`
}
const getMainActivity = (activities: DiscordActivity[]) => {
return activities.find(activity => activity.type !== 4 && activity.name !== "Spotify") || activities[0];
};
return (
activities.find(
(activity) => activity.type !== 4 && activity.name !== 'Spotify',
) || null
)
}
if (isLoading) {
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
<div className="flex h-full w-full flex-col justify-between rounded-lg p-4">
<div className="flex items-center gap-2">
<Skeleton className="h-2 w-2 rounded-full" />
<Skeleton className="h-3 w-16" />
</div>
{/* Discord Logo */}
<div className="absolute right-3 top-3 z-10">
<svg width="24" height="24" viewBox="0 0 24 24" className="text-primary">
<path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header Skeleton */}
<div className="mb-4 flex items-center gap-2">
<Skeleton className="h-2 w-2 rounded-full" />
<Skeleton className="h-3 w-20" />
</div>
{/* Profile Skeleton */}
<div className="flex flex-1 gap-3 items-center">
<div className="relative flex-shrink-0">
<Skeleton className="h-16 w-16 rounded-full" />
<Skeleton className="absolute -bottom-1 -right-1 h-5 w-5 rounded-full" />
</div>
<div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
<Skeleton className="h-3 w-2/3" />
</div>
</div>
{/* Footer Skeleton */}
<div className="mt-4 flex items-center justify-between">
<Skeleton className="h-1 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<div className="flex items-center gap-3">
<Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
<div className="flex min-w-0 flex-1 flex-col gap-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
</div>
</div>
<Skeleton className="h-3 w-24" />
</div>
);
)
}
if (!discordData) return <p>Something absolutely horrible has gone wrong</p>;
if (!discordData)
return <p className="text-muted-foreground p-4 text-sm">Unavailable</p>
const mainActivity = getMainActivity(discordData.activities);
const displayName = discordData.discord_user.global_name || discordData.discord_user.username;
const mainActivity = getMainActivity(discordData.activities)
const displayName =
discordData.discord_user.global_name || discordData.discord_user.username
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
</div>
{/* Discord Logo */}
<div className="absolute right-3 top-3 z-10">
<svg width="24" height="24" viewBox="0 0 24 24" className="text-primary">
<path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
<a
href={`https://discord.com/users/${discordData.discord_user.id}`}
target="_blank"
rel="noopener noreferrer"
className="group hover:bg-accent/40 flex h-full w-full flex-col justify-between rounded-lg p-4 transition-colors duration-200"
>
<div className="flex items-center gap-1.5">
<span
className={`h-2 w-2 flex-shrink-0 rounded-full ${getStatusColor(discordData.discord_status)}`}
/>
<span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
{getStatusText(discordData.discord_status)}
</span>
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header */}
<div className="mb-4 flex items-center gap-2">
<div className={`flex h-2 w-2 rounded-full ${getStatusColor(discordData.discord_status)} animate-pulse`}></div>
<span className="text-xs font-medium text-muted-foreground">
{getStatusText(discordData.discord_status).toUpperCase()}
</span>
</div>
{/* Profile Info */}
<div className="flex flex-1 gap-3 items-center">
<div className="relative flex-shrink-0">
<img
src={getAvatarUrl(discordData.discord_user)}
alt="Discord avatar"
width={64}
height={64}
className="h-16 w-16 rounded-full border shadow-lg"
/>
<div className={`absolute -bottom-1 -right-1 h-5 w-5 rounded-full ${getStatusColor(discordData.discord_status)} border-2 border-background`}></div>
</div>
<div className="flex min-w-0 flex-1 flex-col justify-center">
<h3 className="mb-1 truncate text-sm font-bold leading-tight">
{displayName}
</h3>
{mainActivity ? (
<>
<p className="truncate text-xs text-muted-foreground">
{mainActivity.name}
</p>
{mainActivity.details && (
<p className="truncate text-xs text-muted-foreground/70">
{mainActivity.details}
</p>
)}
</>
) : (
<p className="truncate text-xs text-muted-foreground">
@{discordData.discord_user.username}
</p>
)}
</div>
</div>
{/* Footer */}
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center gap-1">
<div className="h-1 w-8 rounded-full bg-muted">
<div className="h-full rounded-full bg-primary"></div>
</div>
</div>
<a
href={`https://discord.com/users/${discordData.discord_user.id}`}
aria-label="View Discord profile"
title="View Discord profile"
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary/80 text-muted-foreground transition-all duration-200 hover:bg-secondary hover:text-foreground hover:scale-110"
>
<MoveUpRight size={14} />
</a>
<div className="flex items-center gap-3">
<img
src={getAvatarUrl(discordData.discord_user)}
alt="Discord avatar"
width={48}
height={48}
className="h-12 w-12 flex-shrink-0 rounded-full object-cover"
/>
<div className="flex min-w-0 flex-col">
<p className="truncate text-sm leading-snug font-semibold">
{displayName}
</p>
<p className="text-muted-foreground truncate text-xs">
@{discordData.discord_user.username}
</p>
</div>
</div>
</div>
);
}
<p className="text-muted-foreground/60 truncate text-xs">
{mainActivity ? mainActivity.name : 'No activity'}
</p>
</a>
)
}

View File

@@ -0,0 +1,298 @@
import { useEffect, useRef, useState } from 'react'
import { FaGithub } from 'react-icons/fa'
import { Skeleton } from './ui/skeleton'
interface GithubEvent {
id: string
type: string
repo: {
name: string
}
payload?: {
action?: string
ref_type?: string
head?: string
before?: string
commits?: Array<{ sha?: string; message: string }>
pull_request?: {
title?: string
html_url?: string
}
issue?: {
title?: string
html_url?: string
}
}
}
const EVENT_PRIORITY: Record<string, number> = {
PushEvent: 5,
PullRequestEvent: 4,
IssuesEvent: 3,
IssueCommentEvent: 2,
ReleaseEvent: 2,
CreateEvent: 1,
}
interface ActivityView {
id: string
title: string
detail: string
meta?: string
repo: string
url: string
}
async function parseActivity(event: GithubEvent): Promise<ActivityView> {
const repo = event.repo.name
const repoUrl = `https://github.com/${repo}`
if (event.type === 'PushEvent') {
const headSha = event.payload?.head
const shortSha = headSha?.slice(0, 7)
let detail = `Updated ${repo}`
if (headSha) {
try {
const response = await fetch(
`https://api.github.com/repos/${repo}/commits/${headSha}`,
{
headers: {
Accept: 'application/vnd.github+json',
},
},
)
if (response.ok) {
const commitData: { commit?: { message?: string } } =
await response.json()
const commitMessage = commitData.commit?.message?.split('\n')[0]
if (commitMessage) {
detail = commitMessage
}
}
} catch (error) {
console.error('Error fetching commit details:', error)
}
}
return {
id: event.id,
title: 'Pushed commit',
detail,
meta: shortSha ? shortSha : undefined,
repo,
url: headSha ? `${repoUrl}/commit/${headSha}` : `${repoUrl}/commits`,
}
}
if (event.type === 'PullRequestEvent') {
return {
id: event.id,
title: `${event.payload?.action ?? 'Updated'} pull request`,
detail: event.payload?.pull_request?.title ?? repo,
meta: 'pull request',
repo,
url: event.payload?.pull_request?.html_url ?? repoUrl,
}
}
if (event.type === 'IssuesEvent') {
return {
id: event.id,
title: `${event.payload?.action ?? 'Updated'} issue`,
detail: event.payload?.issue?.title ?? repo,
meta: 'issue',
repo,
url: event.payload?.issue?.html_url ?? repoUrl,
}
}
if (event.type === 'IssueCommentEvent') {
return {
id: event.id,
title: `${event.payload?.action ?? 'Updated'} comment`,
detail: event.payload?.issue?.title ?? repo,
meta: 'comment',
repo,
url: event.payload?.issue?.html_url ?? repoUrl,
}
}
if (event.type === 'CreateEvent') {
return {
id: event.id,
title: 'Created new item',
detail: `${event.payload?.ref_type ?? 'resource'} in ${repo}`,
meta: event.payload?.ref_type,
repo,
url: repoUrl,
}
}
if (event.type === 'ReleaseEvent') {
return {
id: event.id,
title: 'Published release',
detail: `New release in ${repo}`,
meta: 'release',
repo,
url: repoUrl,
}
}
return {
id: event.id,
title: event.type.replace('Event', ''),
detail: `Activity in ${repo}`,
meta: undefined,
repo,
url: repoUrl,
}
}
export default function BentoGithub() {
const CARD_PADDING_X = 32
const LIST_PADDING_X = 16
const cardRef = useRef<HTMLDivElement | null>(null)
const [activity, setActivity] = useState<ActivityView[]>([])
const [isLoading, setIsLoading] = useState(true)
const [visibleCount, setVisibleCount] = useState(1)
useEffect(() => {
const fetchActivity = async () => {
try {
const response = await fetch(
'https://api.github.com/users/SrIzan10/events/public?per_page=20',
{
headers: {
Accept: 'application/vnd.github+json',
},
},
)
const events: GithubEvent[] = await response.json()
if (Array.isArray(events) && events.length > 0) {
const prioritizedEvents = events
.filter((event) => EVENT_PRIORITY[event.type])
.slice(0, 6)
const parsedActivity = await Promise.all(
prioritizedEvents.map((event) => parseActivity(event)),
)
setActivity(parsedActivity)
}
} catch (error) {
console.error('Error fetching GitHub activity:', error)
} finally {
setIsLoading(false)
}
}
fetchActivity()
}, [])
useEffect(() => {
if (isLoading || activity.length === 0) return
const element = cardRef.current
if (!element) return
const updateVisibleCount = () => {
const { width } = element.getBoundingClientRect()
const contentWidth = width - CARD_PADDING_X - LIST_PADDING_X
if (contentWidth >= 470) {
setVisibleCount(3)
return
}
if (contentWidth >= 310) {
setVisibleCount(2)
return
}
setVisibleCount(1)
}
updateVisibleCount()
const observer = new ResizeObserver(updateVisibleCount)
observer.observe(element)
return () => observer.disconnect()
}, [isLoading, activity.length])
if (isLoading) {
return (
<div className="flex h-full w-full flex-col justify-between overflow-hidden rounded-lg p-4">
<div className="flex items-center justify-between">
<Skeleton className="h-3 w-20" />
<Skeleton className="h-4 w-4" />
</div>
<div className="space-y-3">
<div className="space-y-2">
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-3 w-full" />
</div>
<div className="hidden space-y-2 sm:block">
<Skeleton className="h-4 w-2/5" />
<Skeleton className="h-3 w-4/5" />
</div>
<div className="hidden space-y-2 lg:block">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-3 w-3/4" />
</div>
</div>
<Skeleton className="h-3 w-2/3" />
</div>
)
}
if (activity.length === 0)
return <p className="text-muted-foreground p-4 text-sm">Unavailable</p>
const visibleActivity = activity.slice(0, visibleCount)
return (
<div
ref={cardRef}
className="flex h-full w-full flex-col justify-between overflow-hidden rounded-lg p-4"
>
<div className="flex items-center justify-between">
<span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
GitHub Activity
</span>
<FaGithub className="text-muted-foreground/50" size={16} />
</div>
<div className="space-y-2.5 p-2">
{visibleActivity.map((item) => {
return (
<a
key={item.id}
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="hover:bg-accent/40 block min-w-0 rounded-md px-2 py-1.5 transition-colors duration-200"
>
<p className="truncate text-sm leading-snug font-semibold">
{item.title}
</p>
<p className="text-muted-foreground mt-0.5 line-clamp-1 text-xs">
{item.detail}
</p>
<p className="text-muted-foreground/60 mt-1 truncate text-[11px]">
{item.meta ? `${item.meta} in ${item.repo}` : item.repo}
</p>
</a>
)
})}
</div>
<p className="text-muted-foreground/60 truncate text-xs">
github.com/SrIzan10
</p>
</div>
)
}

View File

@@ -1,10 +1,9 @@
// code based on https://github.com/jktrn/enscribe.dev/blob/main/src/components/bento/SpotifyPresence.tsx
// which is under copyright.
import { useEffect, useState } from "react"
import { Skeleton } from "./ui/skeleton"
import { FaSpotify } from 'react-icons/fa'
import { MoveUpRight, User } from "lucide-react"
import { useEffect, useState } from 'react'
import { Skeleton } from './ui/skeleton'
import { FaLastfm } from 'react-icons/fa'
interface Track {
name: string
@@ -34,132 +33,67 @@ export default function BentoSpotify() {
if (isLoading) {
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.green.500)_0%,_transparent_50%)]"></div>
<div className="flex h-full w-full flex-col justify-between rounded-lg p-4">
<div className="flex items-center gap-2">
<Skeleton className="h-3 w-16" />
</div>
{/* Spotify Logo */}
<div className="absolute right-3 top-3 z-10">
<FaSpotify size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header Skeleton */}
<div className="mb-4 flex items-center gap-2">
<Skeleton className="h-2 w-2 rounded-full" />
<Skeleton className="h-3 w-20" />
</div>
{/* Album Art & Info Skeleton */}
<div className="flex flex-1 gap-3 items-center">
<Skeleton className="h-16 w-16 rounded-lg flex-shrink-0" />
<div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
<Skeleton className="h-3 w-2/3" />
</div>
</div>
{/* Footer Skeleton */}
<div className="mt-4 flex items-center justify-between">
<Skeleton className="h-1 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
<div className="flex items-center gap-3">
<Skeleton className="h-12 w-12 flex-shrink-0 rounded-md" />
<div className="flex min-w-0 flex-1 flex-col gap-2">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-3 w-1/2" />
</div>
</div>
<Skeleton className="h-3 w-20" />
</div>
)
}
if (!displayData) return <p>Something absolutely horrible has gone wrong</p>
if (!displayData)
return <p className="text-muted-foreground p-4 text-sm">Unavailable</p>
const { name: song, artist, album, image, url } = displayData
const isNowPlaying = displayData['@attr']?.nowplaying === 'true'
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
</div>
{/* Spotify Logo */}
<div className="absolute right-3 top-3 z-10">
<FaSpotify size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header */}
<div className="mb-4 flex items-center gap-2">
<div className="flex h-2 w-2 rounded-full bg-primary animate-pulse"></div>
<span className="text-xs font-medium text-muted-foreground">
{displayData['@attr']?.nowplaying === 'true'
? 'NOW PLAYING'
: 'LAST PLAYED'}
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="group hover:bg-accent/40 flex h-full w-full flex-col justify-between rounded-lg p-4 transition-colors duration-200"
>
{/* Label */}
<div className="flex items-center justify-between">
<span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
{isNowPlaying ? 'Now Playing' : 'Last Played'}
</span>
<FaLastfm
className="text-muted-foreground/50 group-hover:text-muted-foreground transition-colors"
size={16}
/>
</div>
{/* Album Art & Info */}
<div className="flex flex-1 gap-3 items-center">
<div className="relative flex-shrink-0">
<img
src={image[3]['#text']}
alt="Album art"
width={64}
height={64}
className="h-16 w-16 rounded-lg border shadow-lg"
/>
{displayData['@attr']?.nowplaying === 'true' && (
<div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-primary border-2 border-background"></div>
)}
</div>
<div className="flex min-w-0 flex-1 flex-col justify-center">
<h3 className="mb-1 truncate text-sm font-bold leading-tight">
{song}
</h3>
<p className="truncate text-xs text-muted-foreground">
{/* Track info */}
<div className="flex items-center gap-3">
<img
src={image[3]['#text']}
alt="Album art"
width={48}
height={48}
className="h-12 w-12 flex-shrink-0 rounded-md object-cover"
/>
<div className="flex min-w-0 flex-col">
<p className="truncate text-sm leading-snug font-semibold">{song}</p>
<p className="text-muted-foreground truncate text-xs">
{artist['#text']}
</p>
<p className="truncate text-xs text-muted-foreground/70">
{album['#text']}
</p>
</div>
</div>
{/* Footer */}
<div className="mt-4 flex items-center justify-between gap-2">
<div className="flex items-center gap-1">
<div className="h-1 w-8 rounded-full bg-muted">
<div className="h-full rounded-full bg-primary"></div>
</div>
</div>
<div className="flex-1" />
<a
href={'https://www.last.fm/user/SrIzan10'}
aria-label="View last.fm profile"
title="View last.fm profile"
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary/80 text-muted-foreground transition-all duration-200 hover:bg-secondary hover:text-foreground hover:scale-110"
>
<User size={14} />
</a>
<a
href={url}
aria-label="View on last.fm"
title="View on last.fm"
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary/80 text-muted-foreground transition-all duration-200 hover:bg-secondary hover:text-foreground hover:scale-110"
>
<MoveUpRight size={14} />
</a>
</div>
</div>
</div>
)
{/* Album */}
<p className="text-muted-foreground/60 truncate text-xs">
{album['#text']}
</p>
</a>
)
}

View File

@@ -1,235 +1,173 @@
import { useEffect, useState } from "react";
import { Skeleton } from "./ui/skeleton";
import { Cloud, Sun, CloudRain, CloudSnow, MoveUpRight } from "lucide-react";
import { useEffect, useState } from 'react'
import { Skeleton } from './ui/skeleton'
import { Cloud, Sun, CloudRain, CloudSnow } from 'lucide-react'
export default function BentoWeather() {
const [weatherData, setWeatherData] = useState<WttrResponse | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [weatherData, setWeatherData] = useState<WttrResponse | null>(null)
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
const fetchWeather = async () => {
try {
const res = await fetch("https://wttr.in/Malaga?format=j2");
const data = await res.json();
setWeatherData(data);
setIsLoading(false);
} catch (error) {
console.error('Error fetching weather:', error);
setIsLoading(false);
}
};
fetchWeather();
}, []);
const getWeatherIcon = (description: string) => {
const desc = description.toLowerCase();
if (desc.includes('rain') || desc.includes('drizzle')) return CloudRain;
if (desc.includes('snow')) return CloudSnow;
if (desc.includes('cloud') || desc.includes('overcast')) return Cloud;
return Sun;
};
if (isLoading) {
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
</div>
{/* Weather Icon */}
<div className="absolute right-3 top-3 z-10">
<Cloud size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header Skeleton */}
<div className="mb-4 flex items-center gap-2">
<Skeleton className="h-2 w-2 rounded-full" />
<Skeleton className="h-3 w-24" />
</div>
{/* Weather Info Skeleton */}
<div className="flex flex-1 gap-3 items-center">
<Skeleton className="h-16 w-16 rounded-lg flex-shrink-0" />
<div className="flex min-w-0 flex-1 flex-col justify-center gap-2">
<Skeleton className="h-4 w-2/12" />
<Skeleton className="h-3 w-4/12" />
<Skeleton className="h-3 w-1/3" />
</div>
</div>
{/* Footer Skeleton */}
<div className="mt-4 flex items-center justify-between">
<Skeleton className="h-1 w-8 rounded-full" />
<Skeleton className="h-8 w-8 rounded-full" />
</div>
</div>
</div>
);
useEffect(() => {
const fetchWeather = async () => {
try {
const res = await fetch('https://wttr.in/Malaga?format=j2')
const data = await res.json()
setWeatherData(data)
setIsLoading(false)
} catch (error) {
console.error('Error fetching weather:', error)
setIsLoading(false)
}
}
fetchWeather()
}, [])
if (!weatherData) return <p>Something absolutely horrible has gone wrong</p>;
const current = weatherData.current_condition[0];
const location = weatherData.nearest_area[0];
const WeatherIcon = getWeatherIcon(current.weatherDesc[0].value);
const getWeatherIcon = (description: string) => {
const desc = description.toLowerCase()
if (desc.includes('rain') || desc.includes('drizzle')) return CloudRain
if (desc.includes('snow')) return CloudSnow
if (desc.includes('cloud') || desc.includes('overcast')) return Cloud
return Sun
}
if (isLoading) {
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
</div>
{/* Weather Icon */}
<div className="absolute right-3 top-3 z-10">
<WeatherIcon size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header */}
<div className="mb-4 flex items-center gap-2">
<div className="flex h-2 w-2 rounded-full bg-primary animate-pulse"></div>
<span className="text-xs font-medium text-muted-foreground">
CURRENT WEATHER
</span>
</div>
{/* Weather Info */}
<div className="flex flex-1 gap-3 items-center">
<div className="relative flex-shrink-0">
<div className="h-16 w-16 rounded-lg border shadow-lg bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
<WeatherIcon size={32} className="text-primary" />
</div>
</div>
<div className="flex min-w-0 flex-1 flex-col justify-center">
<h3 className="mb-1 truncate text-sm font-bold leading-tight">
{current.temp_C}°C
</h3>
<p className="truncate text-xs text-muted-foreground">
{current.weatherDesc[0].value}
</p>
<p className="truncate text-xs text-muted-foreground/70">
{location.areaName[0].value}, {location.country[0].value}
</p>
</div>
</div>
{/* Footer */}
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center gap-1">
<div className="h-1 w-8 rounded-full bg-muted">
<div className="h-full rounded-full bg-primary"></div>
</div>
</div>
<a
href={`https://wttr.in/${location.areaName[0].value}`}
aria-label="View detailed weather"
title="View detailed weather"
target="_blank"
rel="noopener noreferrer"
className="flex h-8 w-8 items-center justify-center rounded-full bg-secondary/80 text-muted-foreground transition-all duration-200 hover:bg-secondary hover:text-foreground hover:scale-110"
>
<MoveUpRight size={14} />
</a>
</div>
</div>
<div className="flex h-full w-full flex-col justify-between rounded-lg p-4">
<Skeleton className="h-3 w-24" />
<div className="flex items-end gap-2">
<Skeleton className="h-9 w-20" />
</div>
);
<Skeleton className="h-3 w-32" />
</div>
)
}
if (!weatherData)
return <p className="text-muted-foreground p-4 text-sm">Unavailable</p>
const current = weatherData.current_condition[0]
const location = weatherData.nearest_area[0]
const WeatherIcon = getWeatherIcon(current.weatherDesc[0].value)
const cityName = location.areaName[0].value
return (
<a
href={`https://wttr.in/${cityName}`}
target="_blank"
rel="noopener noreferrer"
className="group hover:bg-accent/40 flex h-full w-full flex-col justify-between rounded-lg p-4 transition-colors duration-200"
>
{/* Label */}
<div className="flex items-center justify-between">
<span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
{cityName}
</span>
<WeatherIcon
size={16}
className="text-muted-foreground/50 group-hover:text-muted-foreground transition-colors"
/>
</div>
{/* Temperature — big and dominant */}
<p className="text-4xl leading-none font-bold tabular-nums">
{current.temp_C}°
</p>
{/* Description */}
<p className="text-muted-foreground truncate text-xs">
{current.weatherDesc[0].value}
</p>
</a>
)
}
// Types generated with AI.
interface WttrResponse {
current_condition: {
FeelsLikeC: string;
FeelsLikeF: string;
cloudcover: string;
humidity: string;
localObsDateTime: string;
observation_time: string;
precipInches: string;
precipMM: string;
pressure: string;
pressureInches: string;
temp_C: string;
temp_F: string;
uvIndex: string;
visibility: string;
visibilityMiles: string;
weatherCode: string;
weatherDesc: Array<{ value: string }>;
weatherIconUrl: Array<{ value: string }>;
winddir16Point: string;
winddirDegree: string;
windspeedKmph: string;
windspeedMiles: string;
}[];
FeelsLikeC: string
FeelsLikeF: string
cloudcover: string
humidity: string
localObsDateTime: string
observation_time: string
precipInches: string
precipMM: string
pressure: string
pressureInches: string
temp_C: string
temp_F: string
uvIndex: string
visibility: string
visibilityMiles: string
weatherCode: string
weatherDesc: Array<{ value: string }>
weatherIconUrl: Array<{ value: string }>
winddir16Point: string
winddirDegree: string
windspeedKmph: string
windspeedMiles: string
}[]
nearest_area: Array<{
areaName: Array<{ value: string }>;
country: Array<{ value: string }>;
latitude: string;
longitude: string;
population: string;
region: Array<{ value: string }>;
weatherUrl: Array<{ value: string }>;
}>;
areaName: Array<{ value: string }>
country: Array<{ value: string }>
latitude: string
longitude: string
population: string
region: Array<{ value: string }>
weatherUrl: Array<{ value: string }>
}>
request: Array<{
query: string;
type: string;
}>;
query: string
type: string
}>
weather: Array<{
astronomy: Array<{
moon_illumination: string;
moon_phase: string;
moonrise: string;
moonset: string;
sunrise: string;
sunset: string;
}>;
avgtempC: string;
avgtempF: string;
date: string;
moon_illumination: string
moon_phase: string
moonrise: string
moonset: string
sunrise: string
sunset: string
}>
avgtempC: string
avgtempF: string
date: string
hourly: Array<{
DewPointC: string;
DewPointF: string;
FeelsLikeC: string;
FeelsLikeF: string;
HeatIndexC: string;
HeatIndexF: string;
WindChillC: string;
WindChillF: string;
WindGustKmph: string;
WindGustMiles: string;
cloudcover: string;
humidity: string;
precipInches: string;
precipMM: string;
pressure: string;
pressureInches: string;
tempC: string;
tempF: string;
time: string;
uvIndex: string;
visibility: string;
visibilityMiles: string;
weatherCode: string;
weatherDesc: Array<{ value: string }>;
weatherIconUrl: Array<{ value: string }>;
winddir16Point: string;
winddirDegree: string;
windspeedKmph: string;
windspeedMiles: string;
}>;
maxtempC: string;
maxtempF: string;
mintempC: string;
mintempF: string;
sunHour: string;
totalSnow_cm: string;
uvIndex: string;
}>;
}
DewPointC: string
DewPointF: string
FeelsLikeC: string
FeelsLikeF: string
HeatIndexC: string
HeatIndexF: string
WindChillC: string
WindChillF: string
WindGustKmph: string
WindGustMiles: string
cloudcover: string
humidity: string
precipInches: string
precipMM: string
pressure: string
pressureInches: string
tempC: string
tempF: string
time: string
uvIndex: string
visibility: string
visibilityMiles: string
weatherCode: string
weatherDesc: Array<{ value: string }>
weatherIconUrl: Array<{ value: string }>
winddir16Point: string
winddirDegree: string
windspeedKmph: string
windspeedMiles: string
}>
maxtempC: string
maxtempF: string
mintempC: string
mintempF: string
sunHour: string
totalSnow_cm: string
uvIndex: string
}>
}

View File

@@ -1,155 +0,0 @@
---
title: 'Album Review - In Rainbows'
description: 'Random notes I took on a listening session'
date: 2025-09-26
tags: ['rating-4', 'music', 'radiohead']
#image: './banner.png'
discogs: '1174296'
authors: ['srizan']
---
This is a dummy post! Here is a long blog post with heavily nested headers, which can be used to test the table of contents:
## Test 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
###### Test 6
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

View File

@@ -1,154 +0,0 @@
---
title: 'Testing post'
description: 'This is a dummy post written in the year 2024 (with multiple authors).'
date: 2025-09-25
tags: ['test']
# image: './banner.png'
authors: ['srizan']
---
This is a dummy post! Here is a long blog post with heavily nested headers, which can be used to test the table of contents:
## Test 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
###### Test 6
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
#### Test 4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
##### Test 5
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
### Test 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

View File

@@ -258,7 +258,7 @@ thankfully, after trying [`shift`](https://www.dcode.fr/shift-cipher) and lettin
thanks to these awesome people for making my experience truly unforgettable!
- rafa, hugo, dario and all other people i got to meet: y'all were awesome! sorry if this list is not very exhaustive, i'm awful at names. praying we can reunite on nasa spaceapps or something
- hackers week organizers: thanks for making it so fun! make more large sized t-shirts next time :'D
- hackers week organizers: thanks for making it so fun! order more large sized t-shirts next time :'D
- eligius hendrix: in case he reads this, you're such a cool professor! in retrospect i feel kind of bad for not letting you know i sneaked in class. hope i can take your classes one day!
- my spanish teacher: thanks for delaying my exam so i could attend

View File

@@ -1,6 +1,5 @@
---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Link from '@/components/Link.astro'
import PageHead from '@/components/PageHead.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Layout from '@/layouts/Layout.astro'
@@ -16,13 +15,7 @@ const projects = await getAllProjects()
<section>
<div class="min-w-full">
<div class="prose mb-8">
Hey! I'm Izan, a <Link href="https://osm.org/go/b7Cn4-?m=" class="text-foreground" external underline>Málaga</Link> based teenage developer and tech nerd!
<br />
I love building applications, learning new technologies and sharing my knowledge with others. I'm also a big fan of open source!
<br />
When I'm not coding, you can find me listening to music, playing osu! or learning Japanese.
<br />
I'll try to post about anything interesting I find on my blog, so stay tuned!
<p>how did we get here??????????</p>
</div>
<h2 class="mb-4 text-2xl font-medium">Projects I'm most proud of</h2>

View File

@@ -1,5 +1,6 @@
---
import BentoDiscord from '@/components/BentoDiscord'
import BentoGithub from '@/components/BentoGithub'
import BentoSpotify from '@/components/BentoSpotify'
import BentoWeather from '@/components/BentoWeather'
import Link from '@/components/Link.astro'
@@ -16,7 +17,7 @@ const allPosts = await getRecentPosts(2)
<PageHead slot="head" title="Home" />
<section class="p-4">
<div
class="grid w-full grid-cols-1 grid-rows-6 gap-4 md:aspect-[3/2] md:grid-cols-2 md:grid-rows-4 lg:aspect-[4/3] lg:grid-cols-3 lg:grid-rows-3"
class="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:aspect-[4/3] lg:grid-cols-3 lg:grid-rows-3"
>
<div
class="bento-item relative flex flex-col items-center justify-center rounded-lg border p-2 *:text-center md:col-span-2 lg:col-span-2"
@@ -45,21 +46,10 @@ const allPosts = await getRecentPosts(2)
</div>
<!-- Spotify -->
<div class="bento-item rounded-lg border">
<div class="bento-item rounded-lg border h-full">
<BentoSpotify client:load />
</div>
<!-- Filler -->
<div
class="bento-item hidden rounded-lg border sm:flex md:row-span-2 lg:row-span-2"
>
<img
src="https://pplx-res.cloudinary.com/image/upload/v1748887970/gpt4o_images/o90mzm7zkejhphtmzh1m.png"
class="rounded-lg object-cover"
style="object-position: -255px center;"
/>
</div>
<!-- Blog -->
<div
class="bento-item from-primary/5 to-primary/10 rounded-lg border bg-gradient-to-br p-4 md:col-span-2 lg:col-span-2"
@@ -127,14 +117,19 @@ const allPosts = await getRecentPosts(2)
</div>
<!-- Weather -->
<div class="bento-item rounded-lg border">
<div class="bento-item rounded-lg border h-full">
<BentoWeather client:load />
</div>
<!-- Discord -->
<div class="bento-item rounded-lg border">
<div class="bento-item rounded-lg border h-full">
<BentoDiscord client:load />
</div>
<!-- GitHub -->
<div class="bento-item rounded-lg border h-full lg:col-span-2">
<BentoGithub client:load />
</div>
</div>
</section>
</Layout>

View File

@@ -51,42 +51,44 @@
font-display: swap;
}
/* Flexoki light — https://stephango.com/flexoki */
:root {
--background: #faf4ed;
--foreground: #575279;
--primary: #286983;
--primary-foreground: #faf4ed;
--secondary: #f2e9e1;
--secondary-foreground: #575279;
--muted: #f2e9e1;
--muted-foreground: #797593;
--accent: #d7827e;
--accent-foreground: #575279;
--additive: #56949f;
--additive-foreground: #faf4ed;
--destructive: #b4637a;
--destructive-foreground: #faf4ed;
--border: #dfdad9;
--ring: #907aa9;
--background: #fffcf0; /* paper */
--foreground: #100f0f; /* black */
--primary: #205ea6; /* blue-600 */
--primary-foreground: #fffcf0;
--secondary: #f2f0e5; /* base-50 */
--secondary-foreground: #100f0f;
--muted: #f2f0e5; /* base-50 */
--muted-foreground: #6f6e69; /* base-600 */
--accent: #e6e4d9; /* base-100 */
--accent-foreground: #100f0f;
--additive: #66800b; /* green-600 */
--additive-foreground: #fffcf0;
--destructive: #af3029; /* red-600 */
--destructive-foreground: #fffcf0;
--border: #dad8ce; /* base-150 */
--ring: #205ea6; /* blue-600 */
}
[data-theme="dark"] {
--background: #191724;
--foreground: #e0def4;
--primary: #c4a7e7;
--primary-foreground: #191724;
--secondary: #26233a;
--secondary-foreground: #e0def4;
--muted: #26233a;
--muted-foreground: #908caa;
--accent: #eb6f92;
--accent-foreground: #e0def4;
--additive: #9ccfd8;
--additive-foreground: #191724;
--destructive: #eb6f92;
--destructive-foreground: #e0def4;
--border: #403d52;
--ring: #6e6a86;
/* Flexoki dark */
[data-theme='dark'] {
--background: #1c1b1a; /* base-950 */
--foreground: #cecdc3; /* base-200 */
--primary: #4385be; /* blue-400 */
--primary-foreground: #1c1b1a;
--secondary: #282726; /* base-900 */
--secondary-foreground: #cecdc3;
--muted: #282726; /* base-900 */
--muted-foreground: #878580; /* base-500 */
--accent: #343331; /* base-850 */
--accent-foreground: #cecdc3;
--additive: #879a39; /* green-400 */
--additive-foreground: #1c1b1a;
--destructive: #d14d41; /* red-400 */
--destructive-foreground: #1c1b1a;
--border: #403e3c; /* base-800 */
--ring: #4385be; /* blue-400 */
}
@layer base {