rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

removed borders

Browse source
This commit is contained in:
liyunze 2023-11-18 19:12:41 +08:00
parent 8dd3662cec
commit 64463e2c59
3 changed files with 49 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/NavBar.astro
View file

@ -7,65 +7,66 @@
<input type="checkbox" aria-label="Toggle menu" /> <input type="checkbox" aria-label="Toggle menu" />
<span class="bottom-bun"></span> <span class="bottom-bun"></span>
</label> </label>
<aside class="sidebar flex z-20 border-l border-white"> <aside class="sidebar flex z-20">
<nav class="flex flex-col capitalize" role="navigation"> <nav class="flex flex-col capitalize" role="navigation">
<a <a
class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#home">Home</a href="#home">Home</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#what-i-do">What I Do</a href="#what-i-do">What I Do</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#projects">Projects</a href="#projects">Projects</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#skills">Skills</a href="#skills">Skills</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#education">Education</a href="#education">Education</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="#contact">Contact</a href="#contact">Contact</a
> >
</nav> </nav>
</aside> </aside>
<div <div
id="navbar" id="navbar"
class="fixed z-50 top-0 w-full hidden md:flex justify-center bg-[#202020] border-b border-solid border-white" class="fixed z-50 top-0 w-full hidden md:flex justify-center
bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]"
> >
<div <div
id="navbar-div" id="navbar-div"
class="py-4 uppercase w-full flex flex-row justify-center items-center" class="py-4 uppercase w-full flex flex-row justify-center items-center"
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#home">home</a href="#home">home</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#what-i-do">What I Do</a href="#what-i-do">What I Do</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#projects">projects</a href="#projects">projects</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#skills">skills</a href="#skills">skills</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#education">education</a href="#education">education</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="#contact">contact</a href="#contact">contact</a
> >
</div> </div>

15
src/components/Projects.svelte
View file

@ -268,7 +268,10 @@
target="_blank" target="_blank"
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2 class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
px-5 py-3 bg-blue-500 rounded-xl opacity-1 px-5 py-3 bg-blue-500 rounded-xl opacity-1
font-bold">Visit site</a font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500
">Visit site</a
> >
</div> </div>
</div> </div>
@ -406,7 +409,10 @@
target="_blank" target="_blank"
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2 class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
px-5 py-3 bg-blue-500 rounded-xl opacity-1 px-5 py-3 bg-blue-500 rounded-xl opacity-1
font-bold">View repository</a font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500
">View repository</a
> >
</div> </div>
</div> </div>
@ -448,7 +454,10 @@
target="_blank" target="_blank"
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2 class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
px-5 py-3 bg-blue-500 rounded-xl opacity-1 px-5 py-3 bg-blue-500 rounded-xl opacity-1
font-bold">Visit site</a font-bold
transition-colors duration-300
hover:bg-white hover:text-blue-500
">Visit site</a
> >
</div> </div>
</div> </div>

44
src/components/Skills.astro
View file

@ -24,84 +24,84 @@ import Line from "../components/NetworkLine.astro";
<div <div
class="w-fit text-white bg-gray-500 hover:bg-orange-700 class="w-fit text-white bg-gray-500 hover:bg-orange-700
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
HTML HTML
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-blue-700 class="w-fit text-white bg-gray-500 hover:bg-blue-700
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
CSS CSS
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Javascript Javascript
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
TypeScript TypeScript
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-[#617CBE] class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
PHP PHP
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Express Express
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-orange-500 class="w-fit text-white bg-gray-500 hover:bg-orange-500
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Svelte Svelte
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
React React
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Astro Astro
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-purple-400 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-purple-400 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Qwik Qwik
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
TailwindCSS TailwindCSS
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-[#8500C7] class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Vite Vite
</div> </div>
@ -126,58 +126,58 @@ import Line from "../components/NetworkLine.astro";
</p> </p>
<div class="w-full flex flex-row flex-wrap justify-start"> <div class="w-full flex flex-row flex-wrap justify-start">
<div <div
class="w-fit text-white bg-gray-500 hover:text-black hover:bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)] class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Python Python
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-cyan-500 class="w-fit text-white bg-gray-500 hover:bg-cyan-500
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
R R
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-green-600 hover:bg-[linear-gradient(_90deg,_#BB0000_0%,_#BB0000_32%,_#00AA00_33%,_#00AA00_65%,_#0000BB_66%,_#0000BB_100%_)] class="w-fit text-white bg-gray-500 hover:bg-green-600
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
OpenCV OpenCV
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
SAS SAS
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-orange-700 class="w-fit text-white bg-gray-500 hover:bg-orange-700
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
MySQL MySQL
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-blue-800 class="w-fit text-white bg-gray-500 hover:bg-blue-800
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Pandas Pandas
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-green-700 class="w-fit text-white bg-gray-500 hover:bg-green-700
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
Selenium Selenium
</div> </div>
<div <div
class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
rounded-full px-3 py-1 mr-1 my-1 rounded-full px-3 py-1 mr-1 my-1
transition-colors duration-500" transition-colors duration-300"
> >
BeautifulSoup4 BeautifulSoup4
</div> </div>