rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 07:44:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated site including discord

Browse source
This commit is contained in:
liyunze 2025-11-01 01:32:44 +11:00
parent a7f3531b9c
commit 389b1388be
8 changed files with 221 additions and 270 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/experience/ExperienceComponent.astro
View file

@ -10,19 +10,16 @@ import Line from "../global/NetworkLine.astro";
<Card primaryColor="#F6DFD8" className="animate-fadeIn">
<div class="px-4 py-4 md:px-8 md:py-8">
<div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold">
Full Stack Developer (Contract)
</h2>
<h2 class="text-xl font-bold">Full Stack Developer</h2>
<h3 class="font-bold">@ Hyson Horizon</h3>
<h3>Dec 2024 - Present</h3>
</div>
<hr class="mb-3 w-full" />
<p class="mb-3">
Led implementation of frontend development of websites.
Efficiently translated designs into code, while ensuring
maintainability, accessibility and performance. Actively
researching and developing for LLM integration into
product.
Led implementation of frontend development, while also
developing and intergating a CMS on the backend for
website development. Actively contributing to LLM
product research and development.
</p>
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
<div
@ -31,9 +28,10 @@ import Line from "../global/NetworkLine.astro";
<ul class="list-inside list-disc">
<li>NextJS</li>
<li>React</li>
<li>Astro</li>
<li>Payload CMS</li>
</ul>
<ul class="list-inside list-disc">
<li>Astro</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
@ -94,12 +92,13 @@ import Line from "../global/NetworkLine.astro";
>
<ul class="list-inside list-disc">
<li>WordPress & PHP</li>
<li>Typescript</li>
<li>TailwindCSS</li>
<li>NextJS</li>
<li>React</li>
</ul>
<ul class="list-inside list-disc">
<li>Adobe XD</li>
<li>NextJS & React</li>
<li>Typescript</li>
<li>TailwindCSS</li>
</ul>
</div>
</div>

61
src/components/global/Card.astro
View file

@ -1,7 +1,8 @@
---
type Props = {
href?: string;
primaryColor: string;
primaryColor?: string;
shadowColor?: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
@ -11,6 +12,7 @@ type Props = {
const {
href,
primaryColor,
shadowColor = "rgb(12,12,12)",
bgColor = "var(--color-secondary)",
scaleOnHover = false,
pixelHeight = "70px",
@ -36,7 +38,7 @@ const {
{
!href && (
<div
class="card z-10 mb-0"
class="card z-10 mb-0 rounded-xl shadow-xl"
class:list={[{ scale: scaleOnHover }, className]}
>
<div class="card-content">
@ -47,7 +49,7 @@ const {
}
</>
<style define:vars={{ primaryColor, bgColor, pixelHeight }}>
<style define:vars={{ bgColor, pixelHeight, shadowColor }}>
* {
box-sizing: border-box;
}
@ -60,50 +62,15 @@ const {
}
.card {
height: inherit;
position: relative;
background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 10%);
border-radius: 1.5rem;
background: #1c1c1c;
background: linear-gradient(
135deg,
rgba(18, 18, 18, 1) 0%,
rgba(30, 30, 30, 1) 33%,
rgba(25, 25, 25, 1) 66%,
rgba(19, 19, 19, 1) 100%
);
--tw-shadow-color: var(--shadowColor);
padding: 0.5rem;
}
.card:after {
content: "";
height: var(--pixelHeight);
width: 1px;
position: absolute;
left: -1px;
top: 65%;
transition: top, opacity;
transition-duration: 600ms;
transition-timing-function: ease;
background: linear-gradient(
transparent,
var(--primaryColor),
transparent
);
opacity: 0;
}
/* .card:hover:after {
top: 25%;
opacity: 1;
} */
.card.scale {
transition: transform 0.5s ease;
}
.card.scale:hover {
transform: scale(1.05);
}
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
}
</style>

2
src/components/home/Intro.astro
View file

@ -7,7 +7,7 @@ import { Image } from "astro:assets";
---
<div class="w-[90%] md:w-[600px] lg:w-1/2">
<Card primaryColor="#BEADFA" className="animate-fadeIn">
<Card shadowColor="rgb(4, 57, 57)" className="animate-fadeIn">
<div id="intro" class="flex h-fit flex-col text-white">
<div class="w-full px-5 pt-10 pb-2 lg:px-10">
<div class="flex h-20 flex-row">

6
src/components/projects/Project.astro
View file

@ -115,11 +115,7 @@ const leftProject = position == "left";
{
tags.map((tag) => (
<div
class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
style={`
background-color: ${tag.bgColor || "black"};
color: ${tag.textColor || "white"};
`}
class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300 text-white bg-secondary"
>
{tag.text}
</div>

10
src/components/projects/VideoProject.svelte
View file

@ -133,13 +133,9 @@
>
{#each tags as tag}
<div
class="my-1 mr-1 w-fit
rounded-full px-3 py-1
transition-colors duration-300"
style={`
background-color: ${tag.bgColor || "black"};
color: ${tag.textColor || "white"};
`}
class="bg-secondary my-1 mr-1
w-fit rounded-full px-3
py-1 text-white transition-colors duration-300"
>
{tag.text}
</div>

11
src/components/skills/Skill.astro
View file

@ -33,9 +33,7 @@ const { title, tags, primaryColor, className = "" } = Astro.props;
{
tags?.map((tag, index) => (
<div
class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 transition-colors duration-300`}
style={`--tag-bg: ${tag.bgColor || "#000"}; --tag-text: ${tag.textColor || "#ffffff"};
--tag-hover-text: ${tag.hoverTextColor || "#ffffff"}`}
class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full bg-[#303030] px-3 py-1 text-white transition-colors duration-300`}
>
{tag.text}
</div>
@ -45,10 +43,3 @@ const { title, tags, primaryColor, className = "" } = Astro.props;
</div>
</Card>
</div>
<style>
[class*="tag-"] {
background-color: var(--tag-bg);
color: var(--tag-text);
}
</style>

2
src/pages/discord.astro
View file

@ -9,5 +9,5 @@ import InfoLayout from "../layouts/InfoLayout.astro";
/>
<script is:inline>
window.location.href = "https://discord.gg/UnHyHkhbga";
window.location.href = "https://discord.gg/F5efU63Prz";
</script>

2
src/styles/global.css
View file

@ -27,6 +27,8 @@
--animate-fadeUp: fadeUp 0.5s ease-in-out;
--animate-glow: glow 2s ease infinite;
/* --gradient-primary: */
@keyframes fadeIn {
0% {
opacity: 0;