mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +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
|
||||
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%)]"
|
||||
class="w-full h-fit pb-40 flex flex-col justify-center items-center relative"
|
||||
>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@ import Line from "./NetworkLine.astro";
|
|||
<hr class="w-full mb-3" />
|
||||
<h3 class="mb-1 font-bold text-lg">Achievements</h3>
|
||||
<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>Vice President of Diploma Union</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -101,11 +101,11 @@
|
|||
src="/images/pfp_transparent_square.png"
|
||||
alt="Ryan"
|
||||
width="100"
|
||||
class="rounded-full max-w-full bg-[#404040]"
|
||||
class="rounded-full max-w-full bg-[#505050]"
|
||||
/>
|
||||
</div>
|
||||
<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">
|
||||
{roleState}<span class="animate-pulse">|</span>
|
||||
</div>
|
||||
|
|
@ -114,13 +114,19 @@
|
|||
<div class="text-2xl font-bold mt-10">
|
||||
Good {greeting}, I'm Ryan!
|
||||
</div>
|
||||
<p class="mt-3">
|
||||
I am an undergraduate student, passionate in frontend web
|
||||
development. I built this website using Astro, Svelte, TailwindCSS
|
||||
and Typescript!
|
||||
<p class="text-left lg:text-justify">
|
||||
I'm passionate in developing open source projects to benefit others,
|
||||
with vast experience in leadership roles.
|
||||
<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 class="mt-1">I hope you enjoy your stay here!</p>
|
||||
<div class="flex flex-row justify-center items-center mt-10">
|
||||
<div class="flex flex-row justify-center items-center mt-5">
|
||||
<a href="https://github.com/liyunze-coding" target="_blank">
|
||||
<div
|
||||
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;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -224,15 +224,18 @@
|
|||
// });
|
||||
</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>
|
||||
|
||||
<div class="mt-10 w-full">
|
||||
<div class="mt-10 w-full max-w-[1440px]">
|
||||
<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
|
||||
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
|
||||
src="/images/projects/coworking-guide.webp"
|
||||
|
|
@ -241,19 +244,19 @@
|
|||
top-1/2 left-1/2
|
||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
||||
border-2 border-solid border-white rounded-xl"
|
||||
width="600"
|
||||
width="700"
|
||||
/>
|
||||
<img
|
||||
src="/images/projects/coworking-guide.webp"
|
||||
alt="coworking guide"
|
||||
width="600"
|
||||
width="700"
|
||||
class="absolute max-w-full
|
||||
top-1/2 left-1/2
|
||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
||||
border-2 border-solid border-white rounded-xl"
|
||||
/>
|
||||
<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
|
||||
rounded-xl
|
||||
[transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||
|
|
@ -270,7 +273,7 @@
|
|||
</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>
|
||||
<p class="text-xl">
|
||||
|
|
@ -290,9 +293,10 @@
|
|||
Chat-Task-Tic Widget
|
||||
</h2>
|
||||
<p class="text-xl lg:text-right">
|
||||
A widget for Coworking and Study Twitch streamers, allows
|
||||
the streamer and the chatters to add their tasks to the
|
||||
widget, to be displayed on stream!
|
||||
Used by 100+ Twitch streamers, allow viewers and streamers
|
||||
to add their own tasks to the widget for accountability!
|
||||
Easy to setup and the customization possibilities are
|
||||
endless!
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@ import Line from "../components/NetworkLine.astro";
|
|||
</p>
|
||||
<div class="w-full flex flex-row flex-wrap justify-center">
|
||||
<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
|
||||
</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
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@ import Line from "../components/NetworkLine.astro";
|
|||
Javascript
|
||||
</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
|
||||
</div>
|
||||
|
|
@ -47,12 +47,12 @@ import Line from "../components/NetworkLine.astro";
|
|||
Express
|
||||
</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
|
||||
</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
|
||||
</div>
|
||||
|
|
@ -72,7 +72,7 @@ import Line from "../components/NetworkLine.astro";
|
|||
TailwindCSS
|
||||
</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
|
||||
</div>
|
||||
|
|
@ -103,7 +103,7 @@ import Line from "../components/NetworkLine.astro";
|
|||
Python
|
||||
</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
|
||||
</div>
|
||||
|
|
@ -119,25 +119,25 @@ import Line from "../components/NetworkLine.astro";
|
|||
SAS
|
||||
</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
|
||||
</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
|
||||
</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
|
||||
</div>
|
||||
<div
|
||||
class="w-fit bg-blue-500 text-white rounded-full px-3 py-1 mr-1 my-1"
|
||||
>
|
||||
Pandas
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,24 @@
|
|||
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="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
|
||||
>
|
||||
<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
|
||||
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="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"
|
||||
>
|
||||
<Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
|
||||
<div class="card-content">
|
||||
<h2 class="font-bold text-xl text-center">Web Development</h2>
|
||||
<h2 class="font-bold text-xl text-center">
|
||||
Web Development
|
||||
</h2>
|
||||
<hr class="w-full" />
|
||||
<p class="text-center">
|
||||
I like to code things for the web, particularly on the
|
||||
frontend. I enjoy bringing ideas to life in the browser.
|
||||
Bringing ideas to life on the web is my passion. I enjoy
|
||||
bringing my imagination to life through web development.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -24,25 +29,29 @@ import Card from "../components/Card.astro";
|
|||
<h2 class="font-bold text-xl text-center">Data Science</h2>
|
||||
<hr class="w-full" />
|
||||
<p class="text-center">
|
||||
I possess knowledge of data science and machine learning,
|
||||
particularly interested in Computer Vision.
|
||||
Using data to make decisions is a powerful tool. I am
|
||||
experienced in analyzing data and make decisions based
|
||||
on data.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
|
||||
<div class="card-content">
|
||||
<h2 class="font-bold text-xl text-center">Content Creation</h2>
|
||||
<h2 class="font-bold text-xl text-center">
|
||||
Content Creation
|
||||
</h2>
|
||||
<hr class="w-full" />
|
||||
<p class="text-center">
|
||||
I am experienced in streaming on Twitch, experienced in
|
||||
customizing settings in OBS, and aim to improve my video
|
||||
editing skills.
|
||||
Everyone has something to give, something to share. I
|
||||
amassed a loyal following as a streamer on Twitch, and I
|
||||
strive to help smaller creators grow their brand.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-content {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Card from "../components/Card.astro";
|
|||
<Layout title="Ryan's Portfolio">
|
||||
<NavBar />
|
||||
<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}>
|
||||
<Intro client:load />
|
||||
</Card>
|
||||
|
|
@ -22,7 +22,7 @@ import Card from "../components/Card.astro";
|
|||
</div>
|
||||
|
||||
<div id="what-i-do">
|
||||
<NetworkLine height="100px" />
|
||||
<NetworkLine height="70px" />
|
||||
<WhatIDo />
|
||||
</div>
|
||||
<div id="projects">
|
||||
|
|
|
|||
Loading…
Reference in a new issue