added colours to theme

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

View file

@ -1,80 +1,94 @@
---
interface Props {
primaryColor: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
className?: string;
primaryColor: string;
bgColor?: string;
scaleOnHover?: boolean;
pixelHeight?: string;
className?: string;
}
const {
primaryColor,
bgColor = "#282828",
scaleOnHover = false,
pixelHeight = "70px",
className = "",
primaryColor,
bgColor = "#282828",
scaleOnHover = false,
pixelHeight = "70px",
className = "",
} = Astro.props;
---
<div class="card z-10" class:list={[{ scale: scaleOnHover }, className]}>
<slot />
<div class="card-content">
<slot />
</div>
</div>
<style define:vars={{ primaryColor, bgColor, pixelHeight }}>
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
p {
margin: 0rem;
}
h1,
h2,
h3,
p {
margin: 0rem;
}
.card {
height: inherit;
position: relative;
background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem;
padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414;
}
.card {
height: inherit;
position: relative;
background-color: var(--bgColor);
border: 1px solid rgb(255 255 255 / 5%);
border-radius: 1.5rem;
padding: 0.5rem;
box-shadow: 0px 5px 5px 5px #141414;
}
.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: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:after {
top: 65%;
opacity: 0;
}
.card:after {
top: 65%;
opacity: 0;
}
.card:hover:after {
top: 25%;
opacity: 1;
}
.card:hover:after {
top: 25%;
opacity: 1;
}
.card.scale {
transition: transform 0.5s ease;
}
.card.scale {
transition: transform 0.5s ease;
}
.card.scale:hover {
transform: scale(1.05);
}
.card.scale:hover {
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>

View file

@ -8,7 +8,7 @@ import Line from "../elements/NetworkLine.astro";
<div class="flex flex-col items-center pt-10">
<div class="w-[90%] md:w-[600px]">
<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">
<h2 class="text-xl font-bold">
Bachelor of Computer Science student
@ -39,7 +39,7 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<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">
<h2 class="text-xl font-bold">
Lead Full Stack Developer
@ -65,7 +65,7 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<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">
<h2 class="text-xl font-bold">
Frontend Web Developer Intern
@ -98,18 +98,3 @@ import Line from "../elements/NetworkLine.astro";
</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>

View file

@ -107,7 +107,7 @@
h-fit
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="mr-1 flex w-20 items-center justify-center">
<img

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"
>
<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
</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"
>
<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
</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
</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"
>
<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
</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
</div>

View file

@ -8,11 +8,11 @@ import Line from "../elements/NetworkLine.astro";
<div class="flex flex-col items-center">
<div class="w-[90%] pt-10 md:w-[600px]">
<Card primaryColor="#19a7ce">
<div class="card-content">
<div class="px-8 py-8">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Frontend Development</h2>
</div>
<hr class="w-full" />
<hr class="my-5 w-full" />
<p class="text-left">
I started my web development journey by building
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
as Svelte, React and Astro.
</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
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
</div>
@ -37,17 +39,17 @@ import Line from "../elements/NetworkLine.astro";
Javascript
</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
</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
</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
</div>
@ -57,7 +59,7 @@ import Line from "../elements/NetworkLine.astro";
Vue
</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
</div>
@ -67,12 +69,12 @@ import Line from "../elements/NetworkLine.astro";
Astro
</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
</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
</div>
@ -81,65 +83,67 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<Card primaryColor="#474F7A">
<div class="card-content">
<div class="px-8 py-8">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Backend Development</h2>
</div>
<hr class="w-full" />
<hr class="my-5 w-full" />
<p class="text-left">
With experience in various programming languages, I
learnt to setup databases, implement routing and
organized my code to ensure maintainability and
scalability.
</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
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
</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#
</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
</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
</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
</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
</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
</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
</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
</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
</div>
@ -148,11 +152,11 @@ import Line from "../elements/NetworkLine.astro";
</Card>
<Line height="50px" />
<Card primaryColor="#a1eebd">
<div class="card-content">
<div class="px-8 py-8">
<div class="justify-left flex w-full flex-col">
<h2 class="text-2xl font-bold">Data Science</h2>
</div>
<hr class="w-full" />
<hr class="my-5 w-full" />
<p class="text-left">
My first exposure to data science was through learning
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
data visualisation.
</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
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
</div>
@ -174,7 +180,7 @@ import Line from "../elements/NetworkLine.astro";
R
</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
</div>
@ -184,7 +190,7 @@ import Line from "../elements/NetworkLine.astro";
SAS
</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
</div>
@ -209,23 +215,3 @@ import Line from "../elements/NetworkLine.astro";
</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>

View file

@ -1 +1,23 @@
@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;
}

View file

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