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

added colours to theme

Browse source
This commit is contained in:
liyunze 2025-06-06 21:50:52 +10:00
parent fd5db0121a
commit 5095a79758
7 changed files with 142 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
src/components/elements/Card.astro
View file

@ -1,80 +1,94 @@
--- ---
interface Props { interface Props {
primaryColor: string; primaryColor: string;
bgColor?: string; bgColor?: string;
scaleOnHover?: boolean; scaleOnHover?: boolean;
pixelHeight?: string; pixelHeight?: string;
className?: string; className?: string;
} }
const { const {
primaryColor, primaryColor,
bgColor = "#282828", bgColor = "#282828",
scaleOnHover = false, scaleOnHover = false,
pixelHeight = "70px", pixelHeight = "70px",
className = "", className = "",
} = Astro.props; } = Astro.props;
--- ---
<div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}> <div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
<slot /> <div class="card-content">
<slot />
</div>
</div> </div>
<style define:vars={{ primaryColor, bgColor, pixelHeight }}> <style define:vars={{ primaryColor, bgColor, pixelHeight }}>
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
h1, h1,
h2, h2,
h3, h3,
p { p {
margin: 0rem; margin: 0rem;
} }
.card { .card {
height: inherit; height: inherit;
position: relative; position: relative;
background-color: var(--bgColor); background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414; box-shadow: 0px 5px 5px 5px #141414;
} }
.card:after { .card:after {
content: ""; content: "";
height: var(--pixelHeight); height: var(--pixelHeight);
width: 1px; width: 1px;
position: absolute; position: absolute;
left: -1px; left: -1px;
top: 65%; top: 65%;
transition: top, opacity; transition: top, opacity;
transition-duration: 600ms; transition-duration: 600ms;
transition-timing-function: ease; transition-timing-function: ease;
background: linear-gradient( background: linear-gradient(
transparent, transparent,
var(--primaryColor), var(--primaryColor),
transparent transparent
); );
opacity: 0; opacity: 0;
} }
.card:after { .card:after {
top: 65%; top: 65%;
opacity: 0; opacity: 0;
} }
.card:hover:after { .card:hover:after {
top: 25%; top: 25%;
opacity: 1; opacity: 1;
} }
.card.scale { .card.scale {
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.card.scale:hover { .card.scale:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
}
</style> </style>

21
src/components/sections/ExperienceComponent.astro
View file

@ -8,7 +8,7 @@ import Line from "../elements/NetworkLine.astro";
<div class="flex flex-col items-center pt-10"> <div class="flex flex-col items-center pt-10">
<div class="w-[90%] md:w-[600px]"> <div class="w-[90%] md:w-[600px]">
<Card primaryColor="#F6DFD8"> <Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8"> <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"> <div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold"> <h2 class="text-xl font-bold">
Bachelor of Computer Science student Bachelor of Computer Science student
@ -39,7 +39,7 @@ import Line from "../elements/NetworkLine.astro";
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#F6DFD8"> <Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8"> <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"> <div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold"> <h2 class="text-xl font-bold">
Lead Full Stack Developer Lead Full Stack Developer
@ -65,7 +65,7 @@ import Line from "../elements/NetworkLine.astro";
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#F6DFD8"> <Card primaryColor="#F6DFD8">
<div class="card-content px-4 py-4 md:px-8 md:py-8"> <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"> <div class="mb-3 flex w-full flex-col justify-start gap-1">
<h2 class="text-xl font-bold"> <h2 class="text-xl font-bold">
Frontend Web Developer Intern Frontend Web Developer Intern
@ -98,18 +98,3 @@ import Line from "../elements/NetworkLine.astro";
</div> </div>
</div> </div>
</div> </div>
<style>
.card-content {
display: flex;
flex-direction: column;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

2
src/components/sections/IntroComponent.svelte
View file

@ -107,7 +107,7 @@
h-fit h-fit
flex-col text-white" flex-col text-white"
> >
<div class="card-content w-full px-5 pb-2 pt-10 lg:px-10"> <div class="card-content w-full px-5 pt-10 pb-2 lg:px-10">
<div class="flex h-20 flex-row"> <div class="flex h-20 flex-row">
<div class="mr-1 flex w-20 items-center justify-center"> <div class="mr-1 flex w-20 items-center justify-center">
<img <img

10
src/components/sections/ProjectsComponent.astro
View file

@ -109,7 +109,7 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
> >
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300" class="bg-html my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
> >
HTML HTML
</div> </div>
@ -199,12 +199,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
> >
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300" class="bg-react my-1 mr-1 w-fit rounded-full px-3 py-1 text-black transition-colors duration-300"
> >
React React
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300" class="bg-typescript my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
> >
Typescript Typescript
</div> </div>
@ -232,12 +232,12 @@ import TwitchPlays from "./images/projects/twitchplays.webp";
class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end" class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
> >
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300" class="bg-python my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
> >
Python Python
</div> </div>
<div <div
class="my-1 mr-1 w-fit rounded-full bg-[#0078D4] px-3 py-1 text-white transition-colors duration-300" class="bg-win32api my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
> >
win32API win32API
</div> </div>

84
src/components/sections/SkillsComponent.astro
View file

@ -8,11 +8,11 @@ import Line from "../elements/NetworkLine.astro";
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div class="w-[90%] pt-10 md:w-[600px]"> <div class="w-[90%] pt-10 md:w-[600px]">
<Card primaryColor="#19a7ce"> <Card primaryColor="#19a7ce">
<div class="card-content"> <div class="px-8 py-8">
<div class="justify-left flex w-full flex-col"> <div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Frontend Development</h2> <h2 class="text-2xl font-bold">Frontend Development</h2>
</div> </div>
<hr class="w-full" /> <hr class="my-5 w-full" />
<p class="text-left"> <p class="text-left">
I started my web development journey by building I started my web development journey by building
websites and widgets using vanilla HTML, CSS, Javascript websites and widgets using vanilla HTML, CSS, Javascript
@ -20,9 +20,11 @@ import Line from "../elements/NetworkLine.astro";
web development, I delved into frontend frameworks such web development, I delved into frontend frameworks such
as Svelte, React and Astro. as Svelte, React and Astro.
</p> </p>
<div class="flex w-full flex-row flex-wrap justify-start"> <div
class="mt-4 flex w-full flex-row flex-wrap justify-start"
>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="bg-html hover:bg-html my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
HTML HTML
</div> </div>
@ -37,17 +39,17 @@ import Line from "../elements/NetworkLine.astro";
Javascript Javascript
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3178C6] md:bg-gray-500 md:text-white md:hover:text-white" class="bg-typescript hover:bg-typescript my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-white"
> >
TypeScript TypeScript
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="hover:bg-svelte bg-svelte my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Svelte Svelte
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#00D8FF] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#00D8FF] md:bg-gray-500 md:text-white md:hover:text-black" class="bg-react hover:bg-react my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-black"
> >
React React
</div> </div>
@ -57,7 +59,7 @@ import Line from "../elements/NetworkLine.astro";
Vue Vue
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#21759B] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#21759B] md:bg-gray-500" class="bg-wordpress hover:bg-wordpress my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
WordPress WordPress
</div> </div>
@ -67,12 +69,12 @@ import Line from "../elements/NetworkLine.astro";
Astro Astro
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3366CC] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3366CC] hover:text-white md:bg-gray-500" class="bg-htmx hover:bg-htmx my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 hover:text-white md:bg-gray-500"
> >
HTMX HTMX
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#07B6D4] px-3 py-1 text-black transition-colors duration-300 hover:bg-[#07B6D4] md:bg-gray-500 md:text-white md:hover:text-black" class="bg-tailwind hover:bg-tailwind my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-black transition-colors duration-300 md:bg-gray-500 md:text-white md:hover:text-black"
> >
TailwindCSS TailwindCSS
</div> </div>
@ -81,65 +83,67 @@ import Line from "../elements/NetworkLine.astro";
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#474F7A"> <Card primaryColor="#474F7A">
<div class="card-content"> <div class="px-8 py-8">
<div class="justify-left flex w-full flex-col"> <div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Backend Development</h2> <h2 class="text-2xl font-bold">Backend Development</h2>
</div> </div>
<hr class="w-full" /> <hr class="my-5 w-full" />
<p class="text-left"> <p class="text-left">
With experience in various programming languages, I With experience in various programming languages, I
learnt to setup databases, implement routing and learnt to setup databases, implement routing and
organized my code to ensure maintainability and organized my code to ensure maintainability and
scalability. scalability.
</p> </p>
<div class="flex w-full flex-row flex-wrap justify-start"> <div
class="mt-4 flex w-full flex-row flex-wrap justify-start"
>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500" class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Python Python
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#672079] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#672079] md:bg-gray-500" class="bg-csharp hover:bg-csharp my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
C# C#
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#ED8B00] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#ED8B00] md:bg-gray-500" class="bg-java hover:bg-java my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Java Java
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#7F52FF] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#7F52FF] md:bg-gray-500" class="bg-kotlin hover:bg-kotlin my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Kotlin Kotlin
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3D5694] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3D5694] md:bg-gray-500" class="bg-php hover:bg-php my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
PHP PHP
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#006080] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#006080] md:bg-gray-500" class="bg-go hover:bg-go my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-30 md:bg-gray-500"
> >
Go Go
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#B11700] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#B11700] md:bg-gray-500" class="bg-rust hover:bg-rust my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Rust Rust
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#316192] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="bg-postgresql hover:bg-postgresql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
PostgreSQL PostgreSQL
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
MySQL MySQL
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#09934E] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#09934E] md:bg-gray-500" class="bg-mongodb hover:bg-mongodb my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
MongoDB MongoDB
</div> </div>
@ -148,11 +152,11 @@ import Line from "../elements/NetworkLine.astro";
</Card> </Card>
<Line height="50px" /> <Line height="50px" />
<Card primaryColor="#a1eebd"> <Card primaryColor="#a1eebd">
<div class="card-content"> <div class="px-8 py-8">
<div class="justify-left flex w-full flex-col"> <div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Data Science</h2> <h2 class="text-2xl font-bold">Data Science</h2>
</div> </div>
<hr class="w-full" /> <hr class="my-5 w-full" />
<p class="text-left"> <p class="text-left">
My first exposure to data science was through learning My first exposure to data science was through learning
Computer Vision. I learn how to use OpenCV in Python to Computer Vision. I learn how to use OpenCV in Python to
@ -162,9 +166,11 @@ import Line from "../elements/NetworkLine.astro";
as extracting, transforming and loading data, as well as as extracting, transforming and loading data, as well as
data visualisation. data visualisation.
</p> </p>
<div class="flex w-full flex-row flex-wrap justify-start"> <div
class="mt-4 flex w-full flex-row flex-wrap justify-start"
>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#3776AB] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#3776AB] md:bg-gray-500" class="bg-python hover:bg-python my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
Python Python
</div> </div>
@ -174,7 +180,7 @@ import Line from "../elements/NetworkLine.astro";
R R
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#10652F] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#10652F] md:bg-gray-500" class="bg-opencv hover:bg-opencv my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
OpenCV OpenCV
</div> </div>
@ -184,7 +190,7 @@ import Line from "../elements/NetworkLine.astro";
SAS SAS
</div> </div>
<div <div
class="my-1 mr-1 w-fit cursor-default rounded-full bg-[#4479A1] px-3 py-1 text-white transition-colors duration-300 hover:bg-[#4479A1] md:bg-gray-500" class="bg-mysql hover:bg-mysql my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 text-white transition-colors duration-300 md:bg-gray-500"
> >
MySQL MySQL
</div> </div>
@ -209,23 +215,3 @@ import Line from "../elements/NetworkLine.astro";
</div> </div>
</div> </div>
</div> </div>
<style>
.card-content {
display: flex;
flex-direction: column;
gap: 1rem;
background-image: radial-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
);
background-position: 50% 50%;
background-size: 1.1rem 1.1rem;
padding-top: 2rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 0.5rem;
border-radius: 1.25rem;
overflow: hidden;
}
</style>

24
src/styles/global.css
View file

@ -1 +1,23 @@
@import "tailwindcss"; @import "tailwindcss";
@theme {
--color-html: #B11700;
--color-typescript: #3178C6;
--color-svelte: #B11700;
--color-react: #00D8FF;
--color-wordpress: #21759B;
--color-htmx: #3366CC;
--color-tailwind: #07B6D4;
--color-python: #3776AB;
--color-csharp: #672079;
--color-java: #ED8B00;
--color-kotlin: #7F52FF;
--color-php: #3D5694;
--color-go: #006080;
--color-rust: #B11700;
--color-postgresql: #4479A1;
--color-mysql: #1D6998;
--color-mongodb: #09934E;
--color-opencv: #10652F;
--color-win32api: #0078D4;
}

2
svelte.config.js
View file

@ -1,7 +1,7 @@
import { vitePreprocess } from "@astrojs/svelte"; import { vitePreprocess } from "@astrojs/svelte";
export default { export default {
preprocess: vitePreprocess({script:true}), preprocess: vitePreprocess(),
compilerOptions: { compilerOptions: {
}, },