Skip to content

Commit 1818326

Browse files
liyunze-codingliyunze-coding
committed
updated skills section and gradients
1 parent 4640e89 commit 1818326

5 files changed

Lines changed: 81 additions & 69 deletions

File tree

‎src/components/contact/ContactComponent.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import Card from "../global/Card.astro";
88

99
<div class="relative flex w-full items-center justify-center">
1010
<div class="w-[90%] md:w-[600px] lg:w-2/3">
11-
<Card shadowColor="rgb(4, 57, 57)" className="animate-fadeIn">
11+
<Card
12+
shadowColor="rgb(4, 57, 57)"
13+
className="animate-fadeIn bg-gradient-to-br from-[#101010] via-[#252525] to-[#101010]"
14+
>
1215
<div class="flex flex-col items-center justify-center gap-2 py-10">
1316
<div class="mb-1 px-5">
1417
<Image

‎src/components/experience/ExperienceComponent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ export default function Experience() {
1515
</TabsList>
1616
<TabsContent
1717
value="experience"
18-
className="bg-secondary rounded-md px-5 py-5"
18+
className="rounded-md bg-gradient-to-bl from-[#101010] via-[#272727] to-[#181818] px-5 py-5"
1919
>
2020
{ExperienceTabContent()}
2121
</TabsContent>
2222
<TabsContent
2323
value="education"
24-
className="bg-secondary rounded-md px-5 py-5"
24+
className="bg-secondary rounded-md bg-gradient-to-bl from-[#101010] via-[#272727] to-[#181818] px-5 py-5"
2525
>
2626
{EducationTabContent()}
2727
</TabsContent>
2828
<TabsContent
2929
value="extracurricular"
30-
className="bg-secondary rounded-md px-5 py-5"
30+
className="bg-secondary rounded-md bg-gradient-to-bl from-[#101010] via-[#272727] to-[#181818] px-5 py-5"
3131
>
3232
{ExtracurricularTabContent()}
3333
</TabsContent>

‎src/components/global/Card.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ const {
6161
}
6262

6363
.card {
64-
background: #1c1c1c;
65-
background: linear-gradient(135deg, #101010 20%, rgb(38, 38, 38) 100%);
64+
/* background: #1c1c1c; */
65+
/* background: linear-gradient(135deg, rgb(38, 38, 38)#101010 20%, 100%); */
6666
box-shadow: 0 20px 25px 0px var(--shadowColor);
6767
padding: 0.5rem;
6868
}

‎src/components/home/Intro.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { Image } from "astro:assets";
77
---
88

99
<div class="w-[90%] md:w-[600px] lg:w-1/2">
10-
<Card shadowColor="rgb(4, 57, 57)" className="animate-fadeIn">
10+
<Card
11+
shadowColor="rgb(4, 57, 57)"
12+
className="animate-fadeIn bg-gradient-to-br from-[#101010] to-[#202020]"
13+
>
1114
<div id="intro" class="flex h-fit flex-col text-white">
1215
<div class="w-full px-5 pt-10 pb-2 lg:px-10">
1316
<div class="flex h-20 flex-row">

‎src/components/skills/SkillsComponent.astro‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,84 @@
11
---
22
import Card from "../global/Card.astro";
3-
import Line from "../global/NetworkLine.astro";
4-
import Skill from "./Skill.astro";
53
---
64

75
<div class="flex h-fit flex-col items-center justify-center pt-20">
86
<h1 class="mb-5 text-center text-5xl">Skills</h1>
97

10-
<div
11-
class="flex w-[90%] flex-col items-start justify-center gap-x-10 md:w-[600px] lg:w-2/3 lg:flex-row"
12-
>
13-
<div
14-
class="flex flex-col items-start justify-start gap-2 px-5 py-2 text-left"
8+
<div class="grid w-[90%] grid-cols-3 gap-x-10 md:w-[600px] lg:w-2/3">
9+
<Card
10+
shadowColor="rgb(4, 57, 57)"
11+
className="bg-gradient-to-br from-[#101010] to-[#202020]"
1512
>
16-
<div>
17-
<div class="text-xl font-bold">Frontend</div>
18-
<div
19-
class="flex flex-row flex-wrap items-center justify-start gap-2 text-sm"
20-
>
21-
<div>Typescript,</div>
22-
<div>React,</div>
23-
<div>TailwindCSS</div>
13+
<div
14+
class="flex flex-col items-start justify-start gap-2 px-5 py-2 text-left"
15+
>
16+
<div>
17+
<div class="text-xl font-bold">Frontend</div>
18+
<div
19+
class="flex flex-row flex-wrap items-center justify-start gap-2 text-sm"
20+
>
21+
<div>Typescript,</div>
22+
<div>React,</div>
23+
<div>TailwindCSS</div>
24+
</div>
2425
</div>
25-
</div>
26-
<div>
27-
<div class="text-xl font-bold">Backend</div>
28-
<div
29-
class="flex flex-row flex-wrap items-center justify-start gap-x-2 text-sm"
30-
>
31-
<div>Node.js,</div>
32-
<div>PHP,</div>
33-
<div>Go,</div>
34-
<div>Rust</div>
26+
<div>
27+
<div class="text-xl font-bold">Backend</div>
28+
<div
29+
class="flex flex-row flex-wrap items-center justify-start gap-x-2 text-sm"
30+
>
31+
<div>Node.js,</div>
32+
<div>PHP,</div>
33+
<div>Go,</div>
34+
<div>Rust</div>
35+
</div>
3536
</div>
36-
</div>
37-
<div>
38-
<div class="text-xl font-bold">Tools</div>
39-
<div
40-
class="flex flex-row flex-wrap items-center justify-start gap-x-2 text-sm"
41-
>
42-
<div>Git,</div>
43-
<div>Github,</div>
44-
<div>Codeberg,</div>
45-
<div>Visual Studio Code</div>
37+
<div>
38+
<div class="text-xl font-bold">Tools</div>
39+
<div
40+
class="flex flex-row flex-wrap items-center justify-start gap-x-2 text-sm"
41+
>
42+
<div>Git,</div>
43+
<div>Github,</div>
44+
<div>Codeberg,</div>
45+
<div>Visual Studio Code</div>
46+
</div>
4647
</div>
4748
</div>
48-
</div>
49-
<div class="w-full px-5 py-2 lg:w-1/2">
50-
<div class="mb-6">
51-
<p class="mb-3">
52-
I primarily work on websites on both the frontend and the
53-
backend.
54-
</p>
55-
<p class="mb-3">
56-
Other projects I work on include Python scripts, Discord
57-
bots, and Streamer.bot C# scripts.
58-
</p>
59-
<p class="mb-3">
60-
Full resume available upon requests via
49+
</Card>
50+
<Card
51+
shadowColor="rgb(4, 57, 57)"
52+
className="col-span-2 bg-gradient-to-br from-[#202020] to-[#101010]"
53+
>
54+
<div class="w-full px-5 py-5 lg:w-4/5">
55+
<div class="mb-6">
56+
<p class="mb-3">
57+
I primarily work on websites on both the frontend and
58+
the backend.
59+
</p>
60+
<p class="mb-3">
61+
Other projects I work on include Python scripts, Discord
62+
bots, and Streamer.bot C# scripts.
63+
</p>
64+
<p class="mb-3">
65+
Full resume available upon requests via
66+
<a
67+
href="mailto:rythondev@gmail.com"
68+
class="underline hover:text-blue-400">Email</a
69+
>.
70+
</p>
71+
</div>
72+
<div class="text-center lg:text-left">
6173
<a
62-
href="mailto:rythondev@gmail.com"
63-
class="underline hover:text-blue-400">Email</a
64-
>.
65-
</p>
66-
</div>
67-
<div class="text-center lg:text-left">
68-
<a
69-
href="./RyanLee_SoftwareDeveloper_Resume.pdf"
70-
target="_blank"
71-
class="bg-primary text-secondary hover:bg-accent rounded-full px-5 py-2 font-semibold transition-colors duration-150"
72-
>
73-
View Resume
74-
</a>
74+
href="./RyanLee_SoftwareDeveloper_Resume.pdf"
75+
target="_blank"
76+
class="bg-primary text-secondary hover:bg-accent rounded-full px-5 py-2 font-semibold transition-colors duration-150"
77+
>
78+
View Resume
79+
</a>
80+
</div>
7581
</div>
76-
</div>
82+
</Card>
7783
</div>
7884
</div>

0 commit comments

Comments
 (0)