mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
text content update
This commit is contained in:
liyunze
parent
4b43bcc578
commit
f542b11d41
3 changed files with 282 additions and 280 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -19,3 +19,6 @@ pnpm-debug.log*
|
||||||
|
|
||||||
# macOS-specific files
|
# macOS-specific files
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
# Other files
|
||||||
|
todo.md
|
||||||
|
|
@ -4,107 +4,108 @@ import Line from "../elements/NetworkLine.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="Experience" class="h-fit">
|
<div id="Experience" class="h-fit">
|
||||||
<h1 class="text-center text-5xl">Experience</h1>
|
<h1 class="text-center text-5xl">Experience</h1>
|
||||||
<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="card-content 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
|
||||||
</h2>
|
</h2>
|
||||||
<h3>July 2024 - Present</h3>
|
<h3>July 2024 - Present</h3>
|
||||||
</div>
|
</div>
|
||||||
<hr class="mb-3 w-full" />
|
<hr class="mb-3 w-full" />
|
||||||
<p class="mb-3">
|
<p class="mb-3">
|
||||||
Currently pursuing my Bachelor's degree in Computer
|
Currently pursuing my Bachelor's degree in Computer
|
||||||
Science in Melbourne as a Vice-Chancellor 50%
|
Science in Australia as a 50% Vice-Chancellor Scholar.
|
||||||
Scholarship Awardee.
|
</p>
|
||||||
</p>
|
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
<div
|
||||||
<div
|
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
>
|
||||||
>
|
<ul class="list-inside list-disc">
|
||||||
<ul class="list-inside list-disc">
|
<li>Java</li>
|
||||||
<li>C#</li>
|
<li>Kotlin</li>
|
||||||
<li>Vue.JS</li>
|
<li>C#</li>
|
||||||
</ul>
|
<li>Vue.JS</li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
<Line height="50px" />
|
</Card>
|
||||||
<Card primaryColor="#F6DFD8">
|
<Line height="50px" />
|
||||||
<div class="card-content px-4 py-4 md:px-8 md:py-8">
|
<Card primaryColor="#F6DFD8">
|
||||||
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
<div class="card-content px-4 py-4 md:px-8 md:py-8">
|
||||||
<h2 class="text-xl font-bold">
|
<div class="mb-3 flex w-full flex-col justify-start gap-1">
|
||||||
Lead Frontend Web Developer
|
<h2 class="text-xl font-bold">
|
||||||
</h2>
|
Lead Frontend Web Developer
|
||||||
<h3 class="font-bold">@ JW BizTech</h3>
|
</h2>
|
||||||
<h3>Dec 2024 - Present</h3>
|
<h3 class="font-bold">@ JW BizTech</h3>
|
||||||
</div>
|
<h3>Dec 2024 - Present</h3>
|
||||||
<hr class="mb-3 w-full" />
|
</div>
|
||||||
<p class="mb-3">
|
<hr class="mb-3 w-full" />
|
||||||
Led implementation of frontend technology stack for
|
<p class="mb-3">
|
||||||
websites. Worked closely with UI/UX designers to
|
Led implementation of frontend technology stack for
|
||||||
translate designs into code, and with backend developers
|
websites. Worked closely with UI/UX designers to
|
||||||
to ensure smooth integration with CMS.
|
translate designs into code, and with backend developers
|
||||||
</p>
|
to ensure smooth integration with CMS.
|
||||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
</p>
|
||||||
|
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||||
|
|
||||||
<ul class="list-inside list-disc">
|
<ul class="list-inside list-disc">
|
||||||
<li>Astro</li>
|
<li>Astro</li>
|
||||||
<li>Typescript</li>
|
<li>Typescript</li>
|
||||||
<li>TailwindCSS</li>
|
<li>TailwindCSS</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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="card-content 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
|
||||||
</h2>
|
</h2>
|
||||||
<h3>Jan 2024 - April 2024</h3>
|
<h3>Jan 2024 - April 2024</h3>
|
||||||
</div>
|
</div>
|
||||||
<hr class="mb-3 w-full" />
|
<hr class="mb-3 w-full" />
|
||||||
<p class="mb-3">
|
<p class="mb-3">
|
||||||
During my internship, I learnt how to build WordPress
|
During my internship, I learnt how to build WordPress
|
||||||
sites and further enhance my skills in PHP. I also
|
sites and further enhance my skills in PHP. I also
|
||||||
learnt how to closely work with UI/UX designers and pay
|
learnt how to closely work with UI/UX designers and pay
|
||||||
close attention to details with the designs I am given.
|
close attention to details with the designs I am given.
|
||||||
</p>
|
</p>
|
||||||
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
|
||||||
>
|
>
|
||||||
<ul class="list-inside list-disc">
|
<ul class="list-inside list-disc">
|
||||||
<li>WordPress & PHP</li>
|
<li>WordPress & PHP</li>
|
||||||
<li>Typescript</li>
|
<li>Typescript</li>
|
||||||
<li>TailwindCSS</li>
|
<li>TailwindCSS</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="list-inside list-disc">
|
<ul class="list-inside list-disc">
|
||||||
<li>Adobe XD</li>
|
<li>Adobe XD</li>
|
||||||
<li>NextJS & React</li>
|
<li>NextJS & React</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-content {
|
.card-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-image: radial-gradient(
|
background-image: radial-gradient(
|
||||||
rgba(255, 255, 255, 0.1) 1px,
|
rgba(255, 255, 255, 0.1) 1px,
|
||||||
transparent 1px
|
transparent 1px
|
||||||
);
|
);
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-size: 1.1rem 1.1rem;
|
background-size: 1.1rem 1.1rem;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -8,202 +8,200 @@ import Footer from "../components/sections/FooterComponent.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="What I Do"
|
title="What I Do"
|
||||||
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
|
description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
|
||||||
>
|
>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="what-i-do" class="mt-10 pb-20 pt-20">
|
<div id="what-i-do" class="mt-10 pb-20 pt-20">
|
||||||
<WhatIDoComponent />
|
<WhatIDoComponent />
|
||||||
|
|
||||||
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
|
<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
|
||||||
<Card primaryColor="#19a7ce">
|
<Card primaryColor="#19a7ce">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h2
|
<h2
|
||||||
id="web-dev"
|
id="web-dev"
|
||||||
class="animate-gradient text-2xl font-bold"
|
class="animate-gradient text-2xl font-bold"
|
||||||
>
|
>
|
||||||
Web Development
|
Web Development
|
||||||
</h2>
|
</h2>
|
||||||
<hr class="mb-3 mt-3 w-full" />
|
<hr class="mb-3 mt-3 w-full" />
|
||||||
<div class="mb-5">
|
<div class="mb-5">
|
||||||
<h3 class="text-xl font-bold">Websites</h3>
|
<h3 class="text-xl font-bold">Websites</h3>
|
||||||
<p class="mt-1 text-left">
|
<p class="mt-1 text-left">
|
||||||
I go beyond coding; I'm a developer who translates
|
I am beyond just a programmer; I'm a developer who
|
||||||
your vision into a captivating online presence.
|
can turn your vision into a clickable product.
|
||||||
Through custom designs, intuitive user experiences,
|
Through custom designs, intuitive user experiences,
|
||||||
and special attention to detail, I bring your brand
|
and special attention to detail, I can bring your
|
||||||
to life online.
|
brand to life online.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-5">
|
<div class="mb-5">
|
||||||
<h3 class="text-xl font-bold">Web Apps</h3>
|
<h3 class="text-xl font-bold">Web Apps</h3>
|
||||||
<p class="mt-1 text-left">
|
<p class="mt-1 text-left">
|
||||||
I craft solutions that streamline workflows, boost
|
With a growing dislike against tools with premium
|
||||||
efficiency, and empower your users to achieve more.
|
features stuck behind a subscription service, I
|
||||||
With a focus on intuitive interfaces, powerful
|
design and craft solutions that solves problems and
|
||||||
functionality, and data-driven optimization, I
|
improves my workflow.
|
||||||
design and develop robust, scalable applications
|
</p>
|
||||||
that align with your business objectives.
|
</div>
|
||||||
</p>
|
<div>
|
||||||
</div>
|
<h3 class="text-xl font-bold">Widgets</h3>
|
||||||
<div>
|
<p class="mt-1 text-left">
|
||||||
<h3 class="text-xl font-bold">Widgets</h3>
|
Leveraging my web development skills, I built stream
|
||||||
<p class="mt-1 text-left">
|
widgets to level up livestreams on Twitch and
|
||||||
Leveraging my web development skills, I built stream
|
YouTube. Easy to use and customize, my work have
|
||||||
widgets to level up livestreams on Twitch and
|
been used by 100+ Twitch streamers!
|
||||||
YouTube. Easy to use and customize, my work have
|
</p>
|
||||||
been used by 100+ Twitch streamers!
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
<Line height="50px" />
|
||||||
</Card>
|
<Card primaryColor="#a1eebd">
|
||||||
<Line height="50px" />
|
<div class="card-content">
|
||||||
<Card primaryColor="#a1eebd">
|
<h2
|
||||||
<div class="card-content">
|
id="data-science"
|
||||||
<h2
|
class="animate-gradient text-2xl font-bold"
|
||||||
id="data-science"
|
>
|
||||||
class="animate-gradient text-2xl font-bold"
|
Data Science
|
||||||
>
|
</h2>
|
||||||
Data Science
|
<hr class="mb-3 mt-3 w-full" />
|
||||||
</h2>
|
<div class="mb-5">
|
||||||
<hr class="mb-3 mt-3 w-full" />
|
<h3 class="text-xl font-bold">
|
||||||
<div class="mb-5">
|
Data Analysis and Visualization
|
||||||
<h3 class="text-xl font-bold">
|
</h3>
|
||||||
Data Analysis and Visualization
|
<p class="mt-1 text-left">
|
||||||
</h3>
|
Translating numbers into works of art that inform,
|
||||||
<p class="mt-1 text-left">
|
inspire, and guide decision-making. I can create
|
||||||
Translating numbers into works of art that inform,
|
visually compelling narratives that turn dry
|
||||||
inspire, and guide decision-making. I can create
|
statistics into captivating stories.
|
||||||
visually compelling narratives that turn dry
|
</p>
|
||||||
statistics into captivating stories.
|
</div>
|
||||||
</p>
|
<div class="mb-5">
|
||||||
</div>
|
<h3 class="text-xl font-bold">
|
||||||
<div class="mb-5">
|
Statistics and Probability
|
||||||
<h3 class="text-xl font-bold">
|
</h3>
|
||||||
Statistics and Probability
|
<p class="mt-1 text-left">
|
||||||
</h3>
|
Every number tells a story, but it takes the
|
||||||
<p class="mt-1 text-left">
|
language of statistics and probability to truly
|
||||||
Every number tells a story, but it takes the
|
understand it. Our world is full of data, but it's
|
||||||
language of statistics and probability to truly
|
only through powerful tools that we can transform it
|
||||||
understand it. Our world is full of data, but it's
|
into meaningful insights and actionable
|
||||||
only through powerful tools that we can transform it
|
intelligence.
|
||||||
into meaningful insights and actionable
|
</p>
|
||||||
intelligence.
|
</div>
|
||||||
</p>
|
<div>
|
||||||
</div>
|
<h3 class="text-xl font-bold">Machine Learning</h3>
|
||||||
<div>
|
<p class="mt-1 text-left">
|
||||||
<h3 class="text-xl font-bold">Machine Learning</h3>
|
Machine learning isn't just about mimicking human
|
||||||
<p class="mt-1 text-left">
|
intelligence, it's about surpassing it. We push the
|
||||||
Machine learning isn't just about mimicking human
|
boundaries of what's possible, collaborating with
|
||||||
intelligence, it's about surpassing it. We push the
|
code to solve problems beyond human capabilities.
|
||||||
boundaries of what's possible, collaborating with
|
</p>
|
||||||
code to solve problems beyond human capabilities.
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
<Line height="50px" />
|
||||||
</Card>
|
<Card primaryColor="#9D76C1">
|
||||||
<Line height="50px" />
|
<div class="card-content">
|
||||||
<Card primaryColor="#9D76C1">
|
<h2
|
||||||
<div class="card-content">
|
id="content-creation"
|
||||||
<h2
|
class="animate-gradient text-2xl font-bold"
|
||||||
id="content-creation"
|
>
|
||||||
class="animate-gradient text-2xl font-bold"
|
Content Creation
|
||||||
>
|
</h2>
|
||||||
Content Creation
|
<hr class="mb-3 mt-3 w-full" />
|
||||||
</h2>
|
<div class="mb-5">
|
||||||
<hr class="mb-3 mt-3 w-full" />
|
<h3 class="text-xl font-bold">Streaming</h3>
|
||||||
<div class="mb-5">
|
<p class="mt-1 text-left">
|
||||||
<h3 class="text-xl font-bold">Streaming</h3>
|
Streaming isn't just about entertainment, it's about
|
||||||
<p class="mt-1 text-left">
|
building a brand that resonates and inspires.
|
||||||
Streaming isn't just about entertainment, it's about
|
Streaming allows me to engage with viewers in real
|
||||||
building a brand that resonates and inspires.
|
time, developing their trust and allows me to build
|
||||||
Streaming allows me to engage with viewers in real
|
a community of like-minded people.
|
||||||
time, developing their trust and allows me to build
|
</p>
|
||||||
a community of like-minded people.
|
</div>
|
||||||
</p>
|
<div class="mb-5">
|
||||||
</div>
|
<h3 class="text-xl font-bold">Video Marketing</h3>
|
||||||
<div class="mb-5">
|
<p class="mt-1 text-left">
|
||||||
<h3 class="text-xl font-bold">Video Editing</h3>
|
In this world where brand marketing centres around
|
||||||
<p class="mt-1 text-left">
|
short videos (Instagram reels, Tiktok videos,
|
||||||
I may be at the beginning of my video editing
|
YouTube shorts...), I aim to craft and produce
|
||||||
adventure, but I'm committed to making your vision a
|
videos that will engage with your targeted audience
|
||||||
reality. I'll learn, adapt, and work tirelessly to
|
while maintaining a brand friendly identity.
|
||||||
translate your ideas into compelling videos that
|
</p>
|
||||||
resonate with your audience.
|
</div>
|
||||||
</p>
|
<div>
|
||||||
</div>
|
<h3 class="text-xl font-bold">Personality</h3>
|
||||||
<div>
|
<p class="mt-1 text-left">
|
||||||
<h3 class="text-xl font-bold">Personality</h3>
|
I believe content should be an adventure, not a
|
||||||
<p class="mt-1 text-left">
|
formula. My livestreams revolve around unscripted
|
||||||
I believe content should be an adventure, not a
|
interactions, quirky challenges, and raw emotional
|
||||||
formula. My livestreams revolve around unscripted
|
moments. It's messy, it's exhilarating, and it's
|
||||||
interactions, quirky challenges, and raw emotional
|
uniquely me.
|
||||||
moments. It's messy, it's exhilarating, and it's
|
</p>
|
||||||
uniquely me.
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
<Footer />
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-content {
|
.card-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-image: radial-gradient(
|
background-image: radial-gradient(
|
||||||
rgba(255, 255, 255, 0.1) 1px,
|
rgba(255, 255, 255, 0.1) 1px,
|
||||||
transparent 1px
|
transparent 1px
|
||||||
);
|
);
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-size: 1.1rem 1.1rem;
|
background-size: 1.1rem 1.1rem;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#web-dev {
|
#web-dev {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
#afd3e2 0%,
|
#afd3e2 0%,
|
||||||
#19a7ce 45%,
|
#19a7ce 45%,
|
||||||
#a5d7e8 100%
|
#a5d7e8 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
background-size: 300%;
|
background-size: 300%;
|
||||||
|
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#data-science {
|
#data-science {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
#a1eebd 0%,
|
#a1eebd 0%,
|
||||||
#7bd3ea 45%,
|
#7bd3ea 45%,
|
||||||
#f6f7c4 100%
|
#f6f7c4 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
background-size: 300%;
|
background-size: 300%;
|
||||||
|
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-creation {
|
#content-creation {
|
||||||
background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
|
background: linear-gradient(90deg, #d09dff 40%, #ff6868 90%);
|
||||||
|
|
||||||
background-size: 300%;
|
background-size: 300%;
|
||||||
|
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue