2023-07-09 03:27:52 +00:00
|
|
|
import { library } from "@fortawesome/fontawesome-svg-core";
|
|
|
|
import { fab } from "@fortawesome/free-brands-svg-icons";
|
|
|
|
import { far } from "@fortawesome/free-regular-svg-icons";
|
|
|
|
import { fas } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-07-02 11:02:11 +00:00
|
|
|
import Image from "next/image";
|
2023-07-02 13:55:18 +00:00
|
|
|
import Config from "../../config.json";
|
2023-07-01 21:08:39 +00:00
|
|
|
|
2023-07-09 18:28:50 +00:00
|
|
|
library.add(fab, far, fas); // Loading in the icons from FontAwesome
|
2023-07-09 03:27:52 +00:00
|
|
|
|
2023-07-01 20:43:53 +00:00
|
|
|
export default function Home() {
|
2023-07-10 02:54:12 +00:00
|
|
|
const {
|
|
|
|
background,
|
|
|
|
infoCard,
|
|
|
|
avatar,
|
|
|
|
name,
|
|
|
|
links,
|
|
|
|
options,
|
|
|
|
description,
|
|
|
|
theme = "dark", // Fallback to dark if no theme was found
|
|
|
|
} = Config; // All of the settings pulled from the config file
|
|
|
|
|
|
|
|
// Theme colors to use when using the selected theme
|
|
|
|
const themeColors: {
|
|
|
|
[key: string]: {
|
|
|
|
background: string;
|
|
|
|
textColor: string;
|
|
|
|
};
|
|
|
|
} = {
|
|
|
|
dark: {
|
|
|
|
background: "bg-neutral-900",
|
|
|
|
textColor: "text-white",
|
|
|
|
},
|
|
|
|
light: {
|
|
|
|
background: "bg-white",
|
|
|
|
textColor: "text-black",
|
|
|
|
},
|
|
|
|
};
|
|
|
|
const selectedTheme = themeColors[theme]; // The theme to use
|
2023-07-09 06:19:08 +00:00
|
|
|
|
2023-07-01 20:43:53 +00:00
|
|
|
return (
|
2023-07-09 06:19:08 +00:00
|
|
|
<>
|
2023-07-10 02:54:12 +00:00
|
|
|
<main
|
|
|
|
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
|
|
|
|
>
|
2023-07-09 06:19:08 +00:00
|
|
|
<div
|
|
|
|
className={`absolute inset-0 filter ${
|
|
|
|
background.blur && "blur-sm"
|
|
|
|
} w-screen h-screen`}
|
|
|
|
style={
|
|
|
|
background.showBackground
|
|
|
|
? {
|
|
|
|
zIndex: 0,
|
|
|
|
background: background.darken.enabled
|
|
|
|
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
|
|
|
|
url(${background.backgroundImage})`
|
|
|
|
: `url(${background.backgroundImage})`,
|
|
|
|
backgroundSize: "cover",
|
|
|
|
backgroundBlendMode: "multiply",
|
|
|
|
}
|
|
|
|
: {}
|
|
|
|
}
|
|
|
|
></div>
|
|
|
|
<div
|
2023-07-10 02:54:12 +00:00
|
|
|
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
|
2023-07-09 06:19:08 +00:00
|
|
|
style={{
|
|
|
|
zIndex: 1,
|
|
|
|
opacity: infoCard.transparency,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="m-5">
|
|
|
|
<div className="flex flex-col items-center justify-center">
|
|
|
|
<Image
|
|
|
|
src={avatar}
|
|
|
|
alt="Avatar"
|
|
|
|
width={120}
|
|
|
|
height={120}
|
|
|
|
className="rounded-full"
|
|
|
|
/>
|
|
|
|
<div className="mb-3"></div>
|
|
|
|
<h1 className="text-4xl font-bold">{name}</h1>
|
|
|
|
</div>
|
2023-07-01 21:08:39 +00:00
|
|
|
|
2023-07-09 06:19:08 +00:00
|
|
|
<p className="mt-4 text-lg max-w-lg">{description}</p>
|
2023-07-01 20:43:53 +00:00
|
|
|
|
2023-07-09 06:19:08 +00:00
|
|
|
<div className="flex flex-col items-center">
|
|
|
|
{links.map((link, index) => {
|
|
|
|
const icons: any = link.icon?.split(" ");
|
2023-07-09 03:27:52 +00:00
|
|
|
|
2023-07-09 06:19:08 +00:00
|
|
|
return (
|
|
|
|
<a
|
2023-07-01 21:08:39 +00:00
|
|
|
key={index}
|
2023-07-09 06:19:08 +00:00
|
|
|
href={link.url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2023-07-01 21:08:39 +00:00
|
|
|
>
|
2023-07-09 06:19:08 +00:00
|
|
|
<div
|
|
|
|
key={index}
|
2023-07-10 02:54:12 +00:00
|
|
|
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded text-white ${link.color.normal} hover:brightness-75 transition`}
|
2023-07-09 06:19:08 +00:00
|
|
|
>
|
|
|
|
{link.icon && (
|
|
|
|
<>
|
|
|
|
<FontAwesomeIcon icon={icons} />
|
|
|
|
<div className="ml-2"></div>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
<p>{link.title}</p>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
2023-07-01 21:08:39 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-07-02 19:09:05 +00:00
|
|
|
|
2023-07-09 06:19:08 +00:00
|
|
|
<div className="absolute bottom-0 right-0 mb-5 mr-5">
|
|
|
|
{options.showSourceLink && (
|
|
|
|
<h1 className="mt-5 text-blue-300">
|
|
|
|
<a
|
|
|
|
href="https://git.fascinated.cc/Fascinated/simple-links"
|
|
|
|
target="_blank"
|
|
|
|
>
|
|
|
|
Website Source
|
|
|
|
</a>
|
|
|
|
</h1>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</>
|
2023-07-01 20:43:53 +00:00
|
|
|
);
|
|
|
|
}
|