mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
better accessibility + content
This commit is contained in:
liyunze
parent
4f0494db40
commit
e50c7772c6
7 changed files with 111 additions and 74 deletions
|
|
@ -1,6 +1,5 @@
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit pb-40 flex flex-col justify-center items-center relative
|
class="w-full h-fit pb-40 flex flex-col justify-center items-center relative"
|
||||||
bg-[rgb(32,32,32)] bg-[linear-gradient(180deg,_rgba(32,32,32,1)_0%,_rgba(30,30,30,1)_10%)]"
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-col justify-center items-center">
|
<div class="flex flex-col justify-center items-center">
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,10 @@ import Line from "./NetworkLine.astro";
|
||||||
<hr class="w-full mb-3" />
|
<hr class="w-full mb-3" />
|
||||||
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
|
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
|
||||||
<ul class="list-disc list-inside">
|
<ul class="list-disc list-inside">
|
||||||
<li>3-time Dean's List recipient</li>
|
<li>
|
||||||
|
3-time Dean's List Award recipient (>3.5 GPA)
|
||||||
|
</li>
|
||||||
|
<li>3.77 CGPA</li>
|
||||||
<li>President of Computer Programming Club</li>
|
<li>President of Computer Programming Club</li>
|
||||||
<li>Vice President of Diploma Union</li>
|
<li>Vice President of Diploma Union</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -101,11 +101,11 @@
|
||||||
src="/images/pfp_transparent_square.png"
|
src="/images/pfp_transparent_square.png"
|
||||||
alt="Ryan"
|
alt="Ryan"
|
||||||
width="100"
|
width="100"
|
||||||
class="rounded-full max-w-full bg-[#404040]"
|
class="rounded-full max-w-full bg-[#505050]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-center items-start ml-2">
|
<div class="flex flex-col justify-center items-start ml-2">
|
||||||
<div class="text-2xl font-bold">RythonDev</div>
|
<div id="name" class="text-2xl font-bold">RythonDev</div>
|
||||||
<div class="text-xl w-full">
|
<div class="text-xl w-full">
|
||||||
{roleState}<span class="animate-pulse">|</span>
|
{roleState}<span class="animate-pulse">|</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -114,13 +114,19 @@
|
||||||
<div class="text-2xl font-bold mt-10">
|
<div class="text-2xl font-bold mt-10">
|
||||||
Good {greeting}, I'm Ryan!
|
Good {greeting}, I'm Ryan!
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-3">
|
<p class="text-left lg:text-justify">
|
||||||
I am an undergraduate student, passionate in frontend web
|
I'm passionate in developing open source projects to benefit others,
|
||||||
development. I built this website using Astro, Svelte, TailwindCSS
|
with vast experience in leadership roles.
|
||||||
and Typescript!
|
<br /><br />
|
||||||
|
I'm also
|
||||||
|
<b
|
||||||
|
>well networked with various Twitch streamers and content
|
||||||
|
creators</b
|
||||||
|
>, with prominent projects that positively impacted the streaming
|
||||||
|
community. Strongly motivated in the fields of
|
||||||
|
<b> web development, computer vision and data science</b>.
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-1">I hope you enjoy your stay here!</p>
|
<div class="flex flex-row justify-center items-center mt-5">
|
||||||
<div class="flex flex-row justify-center items-center mt-10">
|
|
||||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||||
<div
|
<div
|
||||||
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
|
class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
|
||||||
|
|
@ -184,4 +190,20 @@
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#31e1f7 0%,
|
||||||
|
#00ffab 45%,
|
||||||
|
#14c38e 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
background-size: 300%;
|
||||||
|
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -224,15 +224,18 @@
|
||||||
// });
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="projects" class="h-fit pt-20 pb-10 [perspective:1000px]">
|
<div
|
||||||
|
id="projects"
|
||||||
|
class="h-fit pt-20 [perspective:1000px] flex flex-col items-center"
|
||||||
|
>
|
||||||
<h1 class="text-5xl text-center">Projects</h1>
|
<h1 class="text-5xl text-center">Projects</h1>
|
||||||
|
|
||||||
<div class="mt-10 w-full">
|
<div class="mt-10 w-full max-w-[1440px]">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col lg:flex-row justify-between h-fit w-full px-10 lg:px-20"
|
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="image-container w-full lg:w-1/2 mb-3 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-3 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/images/projects/coworking-guide.webp"
|
src="/images/projects/coworking-guide.webp"
|
||||||
|
|
@ -241,19 +244,19 @@
|
||||||
top-1/2 left-1/2
|
top-1/2 left-1/2
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
||||||
border-2 border-solid border-white rounded-xl"
|
border-2 border-solid border-white rounded-xl"
|
||||||
width="600"
|
width="700"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="/images/projects/coworking-guide.webp"
|
src="/images/projects/coworking-guide.webp"
|
||||||
alt="coworking guide"
|
alt="coworking guide"
|
||||||
width="600"
|
width="700"
|
||||||
class="absolute max-w-full
|
class="absolute max-w-full
|
||||||
top-1/2 left-1/2
|
top-1/2 left-1/2
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
||||||
border-2 border-solid border-white rounded-xl"
|
border-2 border-solid border-white rounded-xl"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="visit-div absolute w-[600px] bg-[rgba(0,0,0,0.5)] opacity-0
|
class="visit-div absolute w-[700px] bg-[rgba(0,0,0,0.5)] opacity-0
|
||||||
aspect-video
|
aspect-video
|
||||||
rounded-xl
|
rounded-xl
|
||||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||||
|
|
@ -270,7 +273,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:pr-20"
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
||||||
>
|
>
|
||||||
<h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
|
<h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
|
||||||
<p class="text-xl">
|
<p class="text-xl">
|
||||||
|
|
@ -290,9 +293,10 @@
|
||||||
Chat-Task-Tic Widget
|
Chat-Task-Tic Widget
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl lg:text-right">
|
<p class="text-xl lg:text-right">
|
||||||
A widget for Coworking and Study Twitch streamers, allows
|
Used by 100+ Twitch streamers, allow viewers and streamers
|
||||||
the streamer and the chatters to add their tasks to the
|
to add their own tasks to the widget for accountability!
|
||||||
widget, to be displayed on stream!
|
Easy to setup and the customization possibilities are
|
||||||
|
endless!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -22,12 +22,12 @@ import Line from "../components/NetworkLine.astro";
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-center">
|
<div class="w-full flex flex-row flex-wrap justify-center">
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-orange-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
HTML
|
HTML
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
CSS
|
CSS
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -37,7 +37,7 @@ import Line from "../components/NetworkLine.astro";
|
||||||
Javascript
|
Javascript
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
TypeScript
|
TypeScript
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,12 +47,12 @@ import Line from "../components/NetworkLine.astro";
|
||||||
Express
|
Express
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-orange-600 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-orange-700 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
Svelte
|
Svelte
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-cyan-700 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
React
|
React
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -72,7 +72,7 @@ import Line from "../components/NetworkLine.astro";
|
||||||
TailwindCSS
|
TailwindCSS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-purple-400 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-purple-700 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
Vite
|
Vite
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,7 +103,7 @@ import Line from "../components/NetworkLine.astro";
|
||||||
Python
|
Python
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-cyan-400 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
R
|
R
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -119,25 +119,25 @@ import Line from "../components/NetworkLine.astro";
|
||||||
SAS
|
SAS
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-purple-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-purple-600 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
Machine Learning
|
Machine Learning
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-blue-600 text-white rounded-full px-3 py-1 mr-1 my-1"
|
||||||
|
>
|
||||||
|
Pandas
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-blue-600 rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
BeautifulSoup4
|
BeautifulSoup4
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-green-500 text-white rounded-full px-3 py-1 mr-1 my-1"
|
class="w-fit bg-green-700 text-white rounded-full px-3 py-1 mr-1 my-1"
|
||||||
>
|
>
|
||||||
Selenium
|
Selenium
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="w-fit bg-blue-500 text-white rounded-full px-3 py-1 mr-1 my-1"
|
|
||||||
>
|
|
||||||
Pandas
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -2,45 +2,54 @@
|
||||||
import Card from "../components/Card.astro";
|
import Card from "../components/Card.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="w-full h-fit flex justify-center items-center flex-col">
|
<div class="w-full flex flex-col justify-center items-center">
|
||||||
<div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
|
|
||||||
<h1 class="text-center text-5xl mb-10">What I Do</h1>
|
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-1 w-[400px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
|
class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
|
||||||
>
|
>
|
||||||
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
|
<div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
|
||||||
<div class="card-content">
|
<h1 class="text-center text-5xl mb-10">What I Do</h1>
|
||||||
<h2 class="font-bold text-xl text-center">Web Development</h2>
|
<div
|
||||||
<hr class="w-full" />
|
class="grid grid-cols-1 w-4/5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
|
||||||
<p class="text-center">
|
>
|
||||||
I like to code things for the web, particularly on the
|
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
|
||||||
frontend. I enjoy bringing ideas to life in the browser.
|
<div class="card-content">
|
||||||
</p>
|
<h2 class="font-bold text-xl text-center">
|
||||||
</div>
|
Web Development
|
||||||
</Card>
|
</h2>
|
||||||
|
<hr class="w-full" />
|
||||||
|
<p class="text-center">
|
||||||
|
Bringing ideas to life on the web is my passion. I enjoy
|
||||||
|
bringing my imagination to life through web development.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
|
<Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h2 class="font-bold text-xl text-center">Data Science</h2>
|
<h2 class="font-bold text-xl text-center">Data Science</h2>
|
||||||
<hr class="w-full" />
|
<hr class="w-full" />
|
||||||
<p class="text-center">
|
<p class="text-center">
|
||||||
I possess knowledge of data science and machine learning,
|
Using data to make decisions is a powerful tool. I am
|
||||||
particularly interested in Computer Vision.
|
experienced in analyzing data and make decisions based
|
||||||
</p>
|
on data.
|
||||||
</div>
|
</p>
|
||||||
</Card>
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
|
<Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h2 class="font-bold text-xl text-center">Content Creation</h2>
|
<h2 class="font-bold text-xl text-center">
|
||||||
<hr class="w-full" />
|
Content Creation
|
||||||
<p class="text-center">
|
</h2>
|
||||||
I am experienced in streaming on Twitch, experienced in
|
<hr class="w-full" />
|
||||||
customizing settings in OBS, and aim to improve my video
|
<p class="text-center">
|
||||||
editing skills.
|
Everyone has something to give, something to share. I
|
||||||
</p>
|
amassed a loyal following as a streamer on Twitch, and I
|
||||||
</div>
|
strive to help smaller creators grow their brand.
|
||||||
</Card>
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import Card from "../components/Card.astro";
|
||||||
<Layout title="Ryan's Portfolio">
|
<Layout title="Ryan's Portfolio">
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<div id="home" class="pt-20 flex justify-center items-center">
|
<div id="home" class="pt-20 flex justify-center items-center">
|
||||||
<div class="w-[90%] lg:w-1/2">
|
<div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
|
||||||
<Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
|
<Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
|
||||||
<Intro client:load />
|
<Intro client:load />
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -22,7 +22,7 @@ import Card from "../components/Card.astro";
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="what-i-do">
|
<div id="what-i-do">
|
||||||
<NetworkLine height="100px" />
|
<NetworkLine height="70px" />
|
||||||
<WhatIDo />
|
<WhatIDo />
|
||||||
</div>
|
</div>
|
||||||
<div id="projects">
|
<div id="projects">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue