improvements
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m34s
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m34s
This commit is contained in:
parent
1b4e893bfa
commit
0b3745bc88
@ -3,6 +3,14 @@ const nextConfig = {
|
||||
output: "standalone",
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "cdn.rainnny.club",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "bonfire.wtf",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "img.icons8.com",
|
||||
@ -10,5 +18,4 @@ const nextConfig = {
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.5",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.0",
|
||||
"@radix-ui/react-scroll-area": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tooltip": "^1.1.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ReactElement } from "react";
|
||||
|
||||
const HomelabContent = (): ReactElement => (
|
||||
<ul>
|
||||
<ul className="text-sm sm:text-base pointer-events-none">
|
||||
<li>
|
||||
<b>Server Rack:</b> 22U, 32" Depth
|
||||
</li>
|
||||
|
||||
@ -1,98 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { MagicCard } from "@/components/ui/magic-card";
|
||||
import moment, { Moment } from "moment";
|
||||
import moment from "moment";
|
||||
import { useTheme } from "next-themes";
|
||||
import { UseThemeProps } from "next-themes/dist/types";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
type Project = {
|
||||
name: string;
|
||||
link?: string | undefined;
|
||||
previewContent: ReactElement;
|
||||
startDate: Moment;
|
||||
endDate?: Moment | undefined;
|
||||
};
|
||||
import Project from "@/types/project";
|
||||
import Image from "next/image";
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
name: "This Website!",
|
||||
description: "This website!",
|
||||
icon: "/me.png",
|
||||
link: "https://github.com/Rainnny7/rainnny.club",
|
||||
previewContent: <div>This website!</div>,
|
||||
startDate: moment([2024, 7, 29]),
|
||||
},
|
||||
{
|
||||
name: "WildNetwork",
|
||||
description:
|
||||
"WildNetwork is a Minecraft server that contains multiple gamemodes, one of which is Prison, which is the most popular. I first joined the server as a Developer where I would work behind the scenes to create new features, now I'm currently working as a System Administrator.",
|
||||
icon: "https://cdn.rainnny.club/x6m1QENM9gZz.png",
|
||||
link: "https://discord.gg/WildPrison",
|
||||
previewContent: (
|
||||
<p>
|
||||
WildNetwork is a Minecraft server that contains multiple
|
||||
gamemodes, one of which is Prison, which is the most popular. I
|
||||
first joined the server as a Developer where I would work behind
|
||||
the scenes to create new features, now I'm currently
|
||||
working as a System Administrator.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
},
|
||||
{
|
||||
name: "Bonfire",
|
||||
description:
|
||||
"Bonfire is a platform similar to Discord that a friend and I are working on together in our free time. Bonfire is perfect for connecting with friends or building a global community. Personalize your space to chat, and hang out.",
|
||||
icon: "https://bonfire.wtf/media/logo.png",
|
||||
link: "https://bonfire.wtf",
|
||||
previewContent: (
|
||||
<p>
|
||||
Bonfire is a platform similar to Discord that a friend and I are
|
||||
working on together in our free time. Bonfire is perfect for
|
||||
connecting with friends or building a global community.
|
||||
Personalize your space to chat, and hang out.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2024, 3, 30]),
|
||||
},
|
||||
{
|
||||
name: "Lucity",
|
||||
description:
|
||||
"Lucity was a minigame network for the game Minecraft, and was owned by the YouTuber iamLucid. When I worked at Lucity, I was the development lead, I focused mainly on infrastructure, databases, and monitoring systems. A few things that I have made - a dynamically managed server system, proxy rotation via the TCPShield API, and an API that can interact with the entire network from a normal Java app.",
|
||||
icon: "https://cdn.rainnny.club/UWdilkRUqTYl.png",
|
||||
link: "https://youtube.com/@iamLucid",
|
||||
previewContent: (
|
||||
<p>
|
||||
Lucity was a minigame network for the game Minecraft, and was
|
||||
owned by the YouTuber iamLucid. When I worked at Lucity, I was
|
||||
the development lead, I focused mainly on infrastructure,
|
||||
databases, and monitoring systems. A few things that I have made
|
||||
- a dynamically managed server system, proxy rotation via the
|
||||
TCPShield API, and an API that can interact with the entire
|
||||
network from a normal Java app.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
endDate: moment([2022, 10, 30]),
|
||||
},
|
||||
{
|
||||
name: "Rainplex",
|
||||
previewContent: (
|
||||
<p>
|
||||
Rainplex was a remake of the once popular Minecraft server,
|
||||
Mineplex. Rainplex initially came to light using the plugin,
|
||||
Skript where it just contained a Hub. After some time, the
|
||||
entirety of the network was re-coded in the Java programming
|
||||
from the ground up. Rainplex went through numerous re-codes over
|
||||
the time it was active, however I have since abandoned
|
||||
development due to lack of free time.
|
||||
</p>
|
||||
),
|
||||
description:
|
||||
"Rainplex was a remake of the once popular Minecraft server, Mineplex. Rainplex initially came to light using the plugin, Skript where it just contained a Hub. After some time, the entirety of the network was re-coded in the Java programming from the ground up. Rainplex went through numerous re-codes over the time it was active, however I have since abandoned development due to lack of free time.",
|
||||
icon: "https://cdn.rainnny.club/QC742YfKVcyI.png",
|
||||
startDate: moment([2018, 8, 1]),
|
||||
endDate: moment([2021, 6, 11]),
|
||||
},
|
||||
{
|
||||
name: "Arcane Client",
|
||||
description:
|
||||
"Arcane is the all-in-one Minecraft mod pack. This client was built to be similar to LunarClient for portfolio and experience sake. I have since abandoned development due to lack of free time.",
|
||||
icon: "https://cdn.rainnny.club/MT45sXzZtah4.png",
|
||||
link: "https://github.com/ArcaneClientNET",
|
||||
previewContent: (
|
||||
<p>
|
||||
Arcane is the all-in-one Minecraft mod pack. This client was
|
||||
built to be similar to LunarClient for portfolio and experience
|
||||
sake. I have since abandoned development due to lack of free
|
||||
time.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2021, 6, 1]),
|
||||
endDate: moment([2021, 10, 1]),
|
||||
},
|
||||
@ -101,25 +64,47 @@ const projects: Project[] = [
|
||||
const MyWork = (): ReactElement => {
|
||||
const { theme }: UseThemeProps = useTheme();
|
||||
return (
|
||||
<div className="max-w-[50rem] flex flex-wrap gap-3 justify-center">
|
||||
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
|
||||
{projects.map((project, index) => (
|
||||
<Link key={index} href={project.link || "#"} target="_blank">
|
||||
<MagicCard
|
||||
className="w-[15rem] p-3.5"
|
||||
gradientColor={
|
||||
theme === "dark" ? "#262626" : "#D9D9D955"
|
||||
}
|
||||
className="w-[25rem] p-2.5 cursor-default opacity-95"
|
||||
gradientColor={theme === "dark" ? "#262626" : "#D9D9D9"}
|
||||
>
|
||||
<h1 className="font-bold select-none pointer-events-none">
|
||||
{project.name}
|
||||
</h1>
|
||||
{/* Icon, Name & Years Active */}
|
||||
<div className="flex gap-2.5 items-center">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={project.icon}
|
||||
alt={`The ${project.name} Project Icon`}
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
|
||||
{/* Years Active */}
|
||||
<h2>
|
||||
{project.startDate.format("MMM YYYY")}
|
||||
{project.endDate &&
|
||||
` - ${project.endDate.format("MMM YYYY")}`}
|
||||
</h2>
|
||||
<h1 className="font-semibold select-none pointer-events-none">
|
||||
{project.name}
|
||||
</h1>
|
||||
<div className="flex gap-1">
|
||||
<span className="text-green-400/80">
|
||||
{project.startDate.format("MMM YYYY")}
|
||||
</span>
|
||||
-
|
||||
{project.endDate ? (
|
||||
<span className="text-red-400/80">
|
||||
{project.endDate.format("MMM YYYY")}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-green-400/80">
|
||||
Present
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-2.5 line-clamp-3 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
|
||||
{project.description}
|
||||
</p>
|
||||
</MagicCard>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
@ -2,12 +2,7 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
import SimpleTooltip from "@/components/ui/simple-tooltip";
|
||||
|
||||
type Skill = {
|
||||
name: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
};
|
||||
import Skill from "@/types/skill";
|
||||
|
||||
const skillset: Skill[] = [
|
||||
// Languages
|
||||
@ -132,6 +127,7 @@ const Skills = (): ReactElement => (
|
||||
>
|
||||
<SimpleTooltip content={skill.name}>
|
||||
<Image
|
||||
className="select-none"
|
||||
src={skill.icon}
|
||||
alt={`${skill.name} Skill Logo`}
|
||||
width={36}
|
||||
|
||||
@ -33,7 +33,7 @@ const Navbar = (): ReactElement => (
|
||||
|
||||
const Branding = (): ReactElement => (
|
||||
<Link
|
||||
className="flex gap-3 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
|
||||
className="flex gap-3 items-center hover:opacity-75 cursor-default select-none transition-all transform-gpu"
|
||||
href="/"
|
||||
>
|
||||
<Image
|
||||
@ -68,7 +68,10 @@ const Links = (): ReactElement => (
|
||||
passHref
|
||||
>
|
||||
<NavigationMenuLink
|
||||
className={cn(navigationMenuTriggerStyle(), "gap-2")}
|
||||
className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"gap-2 select-none"
|
||||
)}
|
||||
target="_blank"
|
||||
>
|
||||
<span className="hidden sm:flex">Buy me a Coffee</span>
|
||||
@ -86,7 +89,7 @@ const Links = (): ReactElement => (
|
||||
);
|
||||
|
||||
const UsefulLinksContent = (): ReactElement => (
|
||||
<div className="p-3 flex gap-5">
|
||||
<div className="w-[15.5rem] p-3 flex flex-wrap gap-5">
|
||||
{/* Git */}
|
||||
<Link href="https://git.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
|
||||
@ -12,14 +12,9 @@ import BlurFade from "@/components/ui/blur-fade";
|
||||
import HomelabContent from "./nav-content/homelab";
|
||||
import Skills from "./nav-content/skills";
|
||||
import MyWork from "./nav-content/my-work";
|
||||
import NavigationItem from "@/types/navigation";
|
||||
|
||||
type Item = {
|
||||
name: string;
|
||||
icon: ReactElement;
|
||||
content: ReactElement;
|
||||
};
|
||||
|
||||
const items: Item[] = [
|
||||
const items: NavigationItem[] = [
|
||||
{
|
||||
name: "My Work",
|
||||
icon: <BriefcaseIcon width={22} height={22} />,
|
||||
@ -38,7 +33,9 @@ const items: Item[] = [
|
||||
];
|
||||
|
||||
const Navigation = (): ReactElement => {
|
||||
const [selected, setSelected] = useState<Item | undefined>(undefined);
|
||||
const [selected, setSelected] = useState<NavigationItem | undefined>(
|
||||
undefined
|
||||
);
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Selection Buttons */}
|
||||
@ -54,9 +51,7 @@ const Navigation = (): ReactElement => {
|
||||
)}
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
active
|
||||
? setSelected(undefined)
|
||||
: setSelected(item)
|
||||
setSelected(active ? undefined : item)
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
@ -70,7 +65,7 @@ const Navigation = (): ReactElement => {
|
||||
{/* Selected Content */}
|
||||
{selected && (
|
||||
<BlurFade key={selected.name} delay={0.05} inView>
|
||||
<div className="mt-5">{selected.content}</div>
|
||||
<div className="mt-7">{selected.content}</div>
|
||||
</BlurFade>
|
||||
)}
|
||||
</div>
|
||||
|
||||
8
src/types/navigation.ts
Normal file
8
src/types/navigation.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { ReactElement } from "react";
|
||||
|
||||
type NavigationItem = {
|
||||
name: string;
|
||||
icon: ReactElement;
|
||||
content: ReactElement;
|
||||
};
|
||||
export default NavigationItem;
|
||||
13
src/types/project.ts
Normal file
13
src/types/project.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { ReactElement } from "react";
|
||||
import { Moment } from "moment/moment";
|
||||
|
||||
type Project = {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
previewContent?: ReactElement | undefined;
|
||||
link?: string | undefined;
|
||||
startDate: Moment;
|
||||
endDate?: Moment | undefined;
|
||||
};
|
||||
export default Project;
|
||||
6
src/types/skill.ts
Normal file
6
src/types/skill.ts
Normal file
@ -0,0 +1,6 @@
|
||||
type Skill = {
|
||||
name: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
};
|
||||
export default Skill;
|
||||
@ -1,16 +1,14 @@
|
||||
import type {Config} from "tailwindcss"
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
content: ["./src/**/*.{ts,tsx}"],
|
||||
prefix: "",
|
||||
theme: {
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
xs: "475px",
|
||||
...defaultTheme.screens,
|
||||
},
|
||||
container: {
|
||||
@ -63,12 +61,12 @@ const config = {
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {height: "0"},
|
||||
to: {height: "var(--radix-accordion-content-height)"},
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {height: "var(--radix-accordion-content-height)"},
|
||||
to: {height: "0"},
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
@ -78,6 +76,6 @@ const config = {
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
} satisfies Config
|
||||
} satisfies Config;
|
||||
|
||||
export default config
|
||||
export default config;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user