mirror of
https://github.com/liyunze-coding/socials.git
synced 2026-09-22 07:24:27 +00:00
599 lines
16 KiB
Text
599 lines
16 KiB
Text
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import StreamScheduleComponent from "../components/socials/StreamSchedule.svelte";
|
|
import Footer from "@/components/global/FooterComponent.astro";
|
|
import { Image } from "astro:assets";
|
|
import profile from "./_images/profile.webp";
|
|
import WebsiteIcon from "./_images/website-icon.svg";
|
|
import ArrowIcon from "./_images/arrow-icon.svg";
|
|
import TwitchIcon from "./_images/twitch.svg";
|
|
import YouTubeIcon from "./_images/youtube.svg";
|
|
import InstagramIcon from "./_images/instagram.svg";
|
|
import GithubIcon from "./_images/github.svg";
|
|
import CodePenIcon from "./_images/codepen.svg";
|
|
import LocationIcon from "./_images/location.svg";
|
|
import DateTimeIcon from "./_images/date-time.svg";
|
|
import DiscordIcon from "./_images/discord.svg";
|
|
---
|
|
|
|
<Layout
|
|
title="Socials"
|
|
description="Check out Ryan's socials"
|
|
thumbnail="/images/socials.webp"
|
|
>
|
|
<div class="flex flex-col items-center justify-center px-0 py-10">
|
|
<div class="w-[calc(100%-20px)] max-w-5xl">
|
|
<div
|
|
id="cards"
|
|
class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4"
|
|
>
|
|
<div
|
|
id="intro"
|
|
class="social-card col-span-2 h-5xl md:col-span-3 md:h-100 lg:col-span-4"
|
|
>
|
|
<div
|
|
class="social-card-content flex flex-col bg-cover bg-top md:flex-row md:justify-between md:gap-3"
|
|
>
|
|
<div
|
|
class="mt-auto flex flex-col items-start justify-start gap-3 md:h-1/2 md:flex-row md:items-center md:gap-10"
|
|
>
|
|
<div
|
|
class="mb-5 flex aspect-square w-32 items-center justify-center overflow-hidden rounded-full border-2 border-solid border-white bg-[rgb(20,20,20)] md:mb-0 md:w-72"
|
|
>
|
|
<Image
|
|
src={profile}
|
|
alt="Ryan"
|
|
width="176"
|
|
class="aspect-square w-32 md:w-44"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h1 class="mb-2 text-4xl font-bold">
|
|
RythonDev
|
|
</h1>
|
|
<p class="text-lg text-[#ccc]">
|
|
I am a Malaysian Chinese content creator
|
|
based in Australia! I mainly stream
|
|
co-working and software development, known
|
|
for developing the Multi-Task widget!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Website -->
|
|
<a href="https://rython.dev/" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div id="website-icon" class="icon-box h-12 w-12">
|
|
<WebsiteIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Website</h2>
|
|
<p class="text-[#ccc]">rython.dev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Twitch -->
|
|
<a href="https://twitch.tv/RythonDev/" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div id="twitch-icon" class="icon-box">
|
|
<TwitchIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Twitch</h2>
|
|
<p class="text-[#ccc]">RythonDev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- YouTube -->
|
|
<a href="https://youtube.com/@RythonDev/" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div id="youtube-icon" class="icon-box">
|
|
<YouTubeIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">YouTube</h2>
|
|
<p class="text-[#ccc]">@RythonDev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Instagram -->
|
|
<a href="https://instagram.com/RythonDev" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div id="instagram-icon" class="icon-box">
|
|
<InstagramIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Instagram</h2>
|
|
<p class="text-[#ccc]">@RythonDev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Github -->
|
|
<a href="https://github.com/liyunze-coding" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
class="relative z-20 h-12 w-12 rounded-full border-8 border-solid border-black bg-white"
|
|
>
|
|
<div
|
|
id="github-icon"
|
|
class="icon-box 2-10 absolute top-1/2 left-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full"
|
|
>
|
|
<GithubIcon />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Github</h2>
|
|
<p class="text-[#ccc]">liyunze-coding</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Codepen -->
|
|
<a href="https://codepen.io/RythonDev" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
id="codepen-icon"
|
|
class="icon-box h-12 w-12 rounded-full"
|
|
>
|
|
<CodePenIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Codepen</h2>
|
|
<p class="text-[#ccc]">RythonDev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Stream Schedule -->
|
|
<div class="social-card col-span-2 h-fit">
|
|
<div
|
|
class="social-card-content flex flex-col items-center justify-center p-0 md:p-3"
|
|
>
|
|
<h2 class="mb-1 text-xl font-bold">Stream Schedule</h2>
|
|
<StreamScheduleComponent client:load />
|
|
</div>
|
|
</div>
|
|
<!-- Location -->
|
|
<div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
|
|
<div
|
|
class="social-card-content flex flex-col items-start justify-center gap-5"
|
|
>
|
|
<div
|
|
class="flex flex-row items-center justify-center gap-3"
|
|
>
|
|
<LocationIcon />
|
|
<div>
|
|
<h2 class="text-xl font-bold">Location</h2>
|
|
<p class="text-[#ccc]">Melbourne, Australia</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center justify-center gap-3"
|
|
>
|
|
<DateTimeIcon />
|
|
|
|
<div>
|
|
<h2 class="text-xl font-bold">Date & Time</h2>
|
|
<p class="text-[#ccc]">
|
|
<div id="display-date" class="text-[#ccc]">
|
|
</div>
|
|
<span
|
|
id="time-in-aus"
|
|
class="text-[#ccc] uppercase"></span>
|
|
<span
|
|
id="time-difference"
|
|
class="text-[#ccc]"
|
|
>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Ko-fi -->
|
|
<a href="https://ko-fi.com/rython" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
id="kofi-icon"
|
|
class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[#00BCF2]"
|
|
>
|
|
<img
|
|
src="/images/socials/kofi_s_logo_nolabel.webp"
|
|
alt="ko-fi logo"
|
|
width="28"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Ko-fi</h2>
|
|
<p class="text-[#ccc]">Rython</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- Discord -->
|
|
<a href="https://rython.dev/discord" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div id="discord-icon" class="icon-box">
|
|
<DiscordIcon />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Discord</h2>
|
|
<p class="text-[#ccc]">
|
|
rython.dev/<wbr />discord
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="hidden opacity-0 lg:block"></div>
|
|
<!-- Tiktok -->
|
|
<a href="https://tiktok.com/@RythonDev" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
id="tiktok-icon"
|
|
class="icon-box flex h-12 w-12 items-center justify-center rounded-full bg-[#111]"
|
|
>
|
|
<img
|
|
src="/images/socials/tiktok.webp"
|
|
alt="tiktok logo"
|
|
width="24"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Tiktok</h2>
|
|
<p class="text-[#ccc]">@RythonDev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="hidden opacity-0 md:block lg:hidden"></div>
|
|
<!-- Bluesky -->
|
|
<a href="https://bsky.app/profile/rython.dev" target="_blank">
|
|
<div class="social-card">
|
|
<div
|
|
class="social-card-content group flex flex-col items-start justify-between"
|
|
>
|
|
<div
|
|
class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
|
|
>
|
|
<ArrowIcon />
|
|
</div>
|
|
<div
|
|
id="bluesky-icon"
|
|
class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(0deg,rgba(86,183,254,1)_0%,rgba(13,125,253,1)_100%)]"
|
|
>
|
|
<img
|
|
src="/images/socials/bluesky.webp"
|
|
alt="bluesky logo"
|
|
width="35"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Bluesky</h2>
|
|
<p class="text-[#ccc]">@rython.dev</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="mx-auto mt-10 w-fit md:ml-auto">
|
|
Hover Light effect by
|
|
<a
|
|
class="text-white underline hover:text-blue-500"
|
|
href="https://www.youtube.com/watch?v=htGfnF1zN4g"
|
|
target="_blank"
|
|
>
|
|
Hyperplexed
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</Layout>
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: rgb(20, 20, 20);
|
|
--card-color: rgb(23, 23, 23);
|
|
}
|
|
|
|
#cards:hover .social-card::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
#intro .social-card-content {
|
|
background-image:
|
|
linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(20, 20, 20, 1) 70%
|
|
),
|
|
url("/images/socials/landscape.webp");
|
|
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.social-card {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 3rem;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.social-card:not(#intro) {
|
|
height: 220px;
|
|
}
|
|
|
|
.social-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.social-card::before,
|
|
.social-card::after {
|
|
border-radius: inherit;
|
|
content: "";
|
|
height: 100%;
|
|
left: 0px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
transition: opacity 500ms;
|
|
width: 100%;
|
|
}
|
|
|
|
.social-card::before {
|
|
background: radial-gradient(
|
|
800px circle at var(--mouse-x) var(--mouse-y),
|
|
rgba(255, 255, 255, 0.06),
|
|
transparent 40%
|
|
);
|
|
z-index: 3;
|
|
}
|
|
|
|
.social-card::after {
|
|
background: radial-gradient(
|
|
600px circle at var(--mouse-x) var(--mouse-y),
|
|
rgba(255, 255, 255, 0.5),
|
|
transparent 40%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
.social-card > .social-card-content {
|
|
background-color: var(--card-color);
|
|
border-radius: inherit;
|
|
/* flex-grow: 1; */
|
|
inset: 1px;
|
|
position: absolute;
|
|
padding: 1.75rem;
|
|
z-index: 3;
|
|
}
|
|
|
|
.icon-box {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
.icon-box::before {
|
|
content: "";
|
|
z-index: -2;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
--box-shadow-values: 0px 0px 20px 2px;
|
|
}
|
|
|
|
#website-icon::before,
|
|
#github-icon::before,
|
|
#codepen-icon::before,
|
|
#tiktok-icon::before {
|
|
box-shadow: var(--box-shadow-values) #888;
|
|
}
|
|
|
|
#twitch-icon::before {
|
|
box-shadow: var(--box-shadow-values) #8c44f7;
|
|
}
|
|
|
|
#youtube-icon::before {
|
|
box-shadow: var(--box-shadow-values) #ff0000;
|
|
}
|
|
|
|
#instagram-icon::before {
|
|
box-shadow: var(--box-shadow-values) #f56040;
|
|
}
|
|
|
|
#kofi-icon::before {
|
|
box-shadow: var(--box-shadow-values) #00bcf2;
|
|
}
|
|
|
|
#discord-icon::before {
|
|
box-shadow: var(--box-shadow-values) #5865f2;
|
|
}
|
|
|
|
#bluesky-icon::before {
|
|
box-shadow: var(--box-shadow-values) #56b7fe;
|
|
}
|
|
</style>
|
|
<script is:inline>
|
|
const MY_TIMEZONE = "Australia/Melbourne";
|
|
document.getElementById("cards").onmousemove = (e) => {
|
|
for (const card of document.getElementsByClassName("social-card")) {
|
|
const rect = card.getBoundingClientRect(),
|
|
x = e.clientX - rect.left,
|
|
y = e.clientY - rect.top;
|
|
|
|
card.style.setProperty("--mouse-x", `${x}px`);
|
|
card.style.setProperty("--mouse-y", `${y}px`);
|
|
}
|
|
};
|
|
|
|
function getTimezoneDifference(timezone1, timezone2) {
|
|
// Create two dates: one in each time zone
|
|
const date1 = new Date().toLocaleString("en-US", {
|
|
timeZone: timezone1,
|
|
});
|
|
const date2 = new Date().toLocaleString("en-US", {
|
|
timeZone: timezone2,
|
|
});
|
|
|
|
// Convert the dates to Date objects
|
|
const dateObj1 = new Date(date1);
|
|
const dateObj2 = new Date(date2);
|
|
|
|
// Get the difference in minutes between the two dates
|
|
const diffMinutes =
|
|
(dateObj2.getTime() - dateObj1.getTime()) / (1000 * 60);
|
|
|
|
// Convert the difference in minutes to hours and minutes
|
|
const diffHours = Math.floor(diffMinutes / 60);
|
|
const diffMinutesRemaining = Math.floor(diffMinutes % 60);
|
|
|
|
return { hours: diffHours, minutes: diffMinutesRemaining };
|
|
}
|
|
|
|
function displayTimeDifference(hour, minutes) {
|
|
let ahead = false;
|
|
if (hour < 0) {
|
|
hour = 24 + hour;
|
|
} else {
|
|
ahead = true;
|
|
}
|
|
|
|
if (hour === 0 && minutes === 0) {
|
|
return "";
|
|
}
|
|
|
|
let differenceDisplay = ahead ? "ahead" : "behind";
|
|
|
|
if (hour === 0) {
|
|
return `( ${minutes} minutes ${differenceDisplay} )`;
|
|
}
|
|
|
|
if (minutes === 0) {
|
|
return `( ${hour} hours ${differenceDisplay} )`;
|
|
}
|
|
|
|
return `( ${hour} hours and ${minutes} minutes ${differenceDisplay} )`;
|
|
}
|
|
|
|
let { hours, minutes } = getTimezoneDifference(
|
|
Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
MY_TIMEZONE
|
|
);
|
|
|
|
let timeDifference = displayTimeDifference(hours, minutes);
|
|
|
|
let time = new Date().toLocaleTimeString("en-UK", {
|
|
timeZone: MY_TIMEZONE,
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
hour12: true,
|
|
});
|
|
|
|
let displayDate = new Date().toLocaleDateString("en-UK", {
|
|
timeZone: MY_TIMEZONE,
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
|
|
setInterval(() => {
|
|
time = new Date().toLocaleTimeString("en-UK", {
|
|
timeZone: MY_TIMEZONE,
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
hour12: true,
|
|
});
|
|
|
|
document.getElementById("time-in-aus").innerText = time;
|
|
}, 2000);
|
|
|
|
document.querySelector("#time-difference").innerText = timeDifference;
|
|
document.querySelector("#display-date").innerText = displayDate;
|
|
document.getElementById("time-in-aus").innerText = time;
|
|
</script>
|