Skip to content

Commit

Permalink
try to optimize
Browse files Browse the repository at this point in the history
  • Loading branch information
Stef-00012 committed Jan 4, 2025
1 parent bd49add commit fcd46d3
Show file tree
Hide file tree
Showing 15 changed files with 583 additions and 555 deletions.
187 changes: 96 additions & 91 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,18 @@ import { alterativeLinks } from "@/data/alternativeLinks";

import { getCodeBlock } from "@/scripts/aboutMeHighlight";
import { rabbitImages } from "@/data/rabbitImages";
import { mainContentId } from "@/data/constants";
import { mainLinks } from "@/data/mainLinks";
import { catVariants } from "@/data/oneko";

import "react-responsive-carousel/lib/styles/carousel.min.css";
import "@/styles/home.css";

interface Data {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function Home({
searchParams
}: Data) {
export default async function Home({ searchParams }: Data) {
let currentVariant = ((await searchParams).neko || "maia") as string;

if (!catVariants.includes(currentVariant)) currentVariant = "maia";
Expand All @@ -40,96 +39,102 @@ export default async function Home({
<div>
<Loading />

<CustomSelect
options={catVariants.map((variant) => ({
label: variant.charAt(0).toUpperCase() + variant.slice(1),
value: variant,
default: currentVariant
? variant === currentVariant
: variant === "maia",
icon: `/images/oneko/heads/${variant}.png`,
}))}
type="link"
query="neko"
className="absolute top-2 left-2"
placeholder="Cat Variant"
/>

<NamePic />

<Socials />

<MusicPlayer />

<DiscordStatus />

<AboutMeCollapsible
codeBlock={getCodeBlock()}
/>

<RabbitCollapsible
rabbitImages={rabbitImages}
/>
<div
id={mainContentId}
style={{
display: "none",
}}
>
<CustomSelect
options={catVariants.map((variant) => ({
label: variant.charAt(0).toUpperCase() + variant.slice(1),
value: variant,
default: currentVariant
? variant === currentVariant
: variant === "maia",
icon: `/images/oneko/heads/${variant}.png`,
lazy: true,
}))}
type="link"
query="neko"
className="absolute top-2 left-2"
placeholder="Cat Variant"
/>

<Collapsible title="Alternative Links">
<div>
{alterativeLinks.map((link) => (
<div key={link.name} className="flex">
<Image
src={link.image}
alt={`${link.name} Logo`}
width={15}
height={15}
className="rounded-[4px] mr-[5px] object-contain"
/>
<p>
<span className="font-bold">{link.name}</span>:{" "}
<Link
href={link.type === "mail" ? `mailto:${link.url}` : link.url}
target="_parent"
rel="noopener"
className="font-bold hover:brightness-[0.8]"
style={link.style}
>
{link.url}
</Link>
</p>
</div>
))}
</div>
</Collapsible>

<Collapsible title="GitHub Stats">
<div className="flex flex-wrap items-center justify-center">
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
type="text/html"
src="https://github-stats-stef-00012.vercel.app/api?username=Stef-00012&show_icons=true&theme=tokyonight"
/>
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
type="text/html"
src="https://github-stats-stef-00012.vercel.app/api/top-langs/?username=Stef-00012&theme=tokyonight"
/>
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
src="https://github-readme-streak-stats-stef-00012.vercel.app/?user=Stef-00012&theme=radical"
<NamePic />

<Socials />

<MusicPlayer />

<DiscordStatus />

<AboutMeCollapsible codeBlock={getCodeBlock()} />

<RabbitCollapsible rabbitImages={rabbitImages} />

<Collapsible title="Alternative Links">
<div>
{alterativeLinks.map((link) => (
<div key={link.name} className="flex">
<Image
src={link.image}
alt={`${link.name} Logo`}
width={15}
height={15}
className="rounded-[4px] mr-[5px] object-contain"
/>
<p>
<span className="font-bold">{link.name}</span>:{" "}
<Link
href={
link.type === "mail" ? `mailto:${link.url}` : link.url
}
target="_parent"
rel="noopener"
className="font-bold hover:brightness-[0.8]"
style={link.style}
>
{link.url}
</Link>
</p>
</div>
))}
</div>
</Collapsible>

<Collapsible title="GitHub Stats">
<div className="flex flex-wrap items-center justify-center">
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
type="text/html"
src="https://github-stats-stef-00012.vercel.app/api?username=Stef-00012&show_icons=true&theme=tokyonight"
/>
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
type="text/html"
src="https://github-stats-stef-00012.vercel.app/api/top-langs/?username=Stef-00012&theme=tokyonight"
/>
<embed
className="p-[5px] w-auto align-top rounded-xl max-md:w-[100%]"
src="https://github-readme-streak-stats-stef-00012.vercel.app/?user=Stef-00012&theme=radical"
/>
</div>
</Collapsible>

<TopReposCollapsible />

{mainLinks.map((link) => (
<MainLinkButton
key={link.url}
title={link.name}
href={link.url}
alt={link.name}
/>
</div>
</Collapsible>

<TopReposCollapsible />

{mainLinks.map((link) => (
<MainLinkButton
key={link.url}
title={link.name}
href={link.url}
alt={link.name}
/>
))}
))}

<Footer />
<Footer />
</div>

<link
rel="stylesheet"
Expand Down
82 changes: 41 additions & 41 deletions src/components/DiscordStatus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,47 @@ import Image from "next/image";
import Link from "next/link";

export default function DiscordStatus() {
return (
<div className="flex flex-col items-center justify-center mt-4">
<div className="inline-flex flex-wrap items-center justify-center gap-2">
<Image
src="https://api.statusbadges.me/badge/status/694986201739952229?label=Currently&labelColor=5865F2"
alt="Discord Status"
width={0}
height={0}
className="w-auto h-auto"
/>
return (
<div className="flex flex-col items-center justify-center mt-4">
<div className="inline-flex flex-wrap items-center justify-center gap-2">
<Image
src="https://api.statusbadges.me/badge/status/694986201739952229?label=Currently&labelColor=5865F2"
alt="Discord Status"
width={0}
height={0}
className="w-auto h-auto"
/>

<Image
src="https://api.statusbadges.me/badge/playing/694986201739952229?label=Currently&labelColor=5865F2"
alt="Currently Playing"
width={0}
height={0}
className="w-auto h-auto"
/>
<Image
src="https://api.statusbadges.me/badge/playing/694986201739952229?label=Currently&labelColor=5865F2"
alt="Currently Playing"
width={0}
height={0}
className="w-auto h-auto"
/>

<Image
src="https://api.statusbadges.me/badge/vscode/694986201739952229?label=Currently&labelColor=5865F2"
alt="Currently Coding"
width={0}
height={0}
className="w-auto h-auto"
/>
<Image
src="https://api.statusbadges.me/badge/vscode/694986201739952229?label=Currently&labelColor=5865F2"
alt="Currently Coding"
width={0}
height={0}
className="w-auto h-auto"
/>

<Link
href="https://api.statusbadges.me/openspotify/694986201739952229"
target="_blank"
rel="noopener"
>
<Image
src="https://api.statusbadges.me/badge/spotify/694986201739952229?label=Listening%20to"
alt="Currently Listening to..."
width={0}
height={0}
className="w-auto h-auto"
/>
</Link>
</div>
</div>
)
}
<Link
href="https://api.statusbadges.me/openspotify/694986201739952229"
target="_blank"
rel="noopener"
>
<Image
src="https://api.statusbadges.me/badge/spotify/694986201739952229?label=Listening%20to"
alt="Currently Listening to..."
width={0}
height={0}
className="w-auto h-auto"
/>
</Link>
</div>
</div>
);
}
16 changes: 8 additions & 8 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export default function Footer() {
return (
<footer className="text-center bg-[#000000a1] text-white mt-5">
<p className="mb-0 p-[15px]">
© {new Date().getFullYear()} Stefano Del Prete. All rights reserved.
</p>
</footer>
)
}
return (
<footer className="text-center bg-[#000000a1] text-white mt-5">
<p className="mb-0 p-[15px]">
© {new Date().getFullYear()} Stefano Del Prete. All rights reserved.
</p>
</footer>
);
}
15 changes: 11 additions & 4 deletions src/components/Loading.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
"use client"
"use client";

import TypeIt from "typeit-react";

import { mainContentId } from "@/data/constants";
import handleTyping from "@/scripts/Loading";
import { useEffect, useState } from "react";

export default function Loading() {
const [loadingVisible, setLoadingVisible] = useState<boolean>(true);

function handleKeyPress(event: KeyboardEvent) {
if (event.key === "Shift") hideLoading();
if (event.key === "Shift") setLoadingVisible(false);
}

function hideLoading() {
setLoadingVisible(false);
const mainContent = document.getElementById(mainContentId);

if (mainContent) mainContent.style.display = "block";

document.removeEventListener("keydown", handleKeyPress);
}
Expand All @@ -26,6 +29,10 @@ export default function Loading() {
};
}, []);

useEffect(() => {
if (!loadingVisible) hideLoading();
}, [loadingVisible])

return (
<div>
<div
Expand All @@ -41,7 +48,7 @@ export default function Loading() {
/>
<button
type="button"
onClick={hideLoading}
onClick={() => setLoadingVisible(false)}
className={`${loadingVisible ? "" : "hidden"} text-[large] absolute bottom-[50px] left-[50%] translate-x-[-50%] bg-transparent text-[#0F0] border-none cursor-pointer font-mono`}
>
Skip Animation
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainLinkButton.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from "next/link";
import ExternalLinkSVG from "@/components/images/external-link";
import Link from "next/link";

interface Data {
href: string;
Expand Down
Loading

0 comments on commit fcd46d3

Please sign in to comment.