mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
improved mobile responsiveness
This commit is contained in:
liyunze
parent
2184a7ca9f
commit
2bd51de3ad
2 changed files with 6802 additions and 6734 deletions
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "dev-portfolio",
|
||||
"version": "0.0.1",
|
||||
"version": "2.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dev-portfolio",
|
||||
"version": "0.0.1",
|
||||
"version": "2.0.0",
|
||||
"dependencies": {
|
||||
"@astrojs/svelte": "^4.0.2",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
|
|
@ -1480,9 +1480,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001541",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz",
|
||||
"integrity": "sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==",
|
||||
"version": "1.0.30001606",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001606.tgz",
|
||||
"integrity": "sha512-LPbwnW4vfpJId225pwjZJOgX1m9sGfbw/RKJvw/t0QhYOOaTXHvkjVGFGPpvwEzufrjvTlsULnVTxdy4/6cqkg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
|
|||
|
|
@ -270,16 +270,33 @@
|
|||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
transition-colors duration-300
|
||||
hidden lg:block
|
||||
hover:bg-white hover:text-blue-500
|
||||
">Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||
<a
|
||||
href="https://coworking-guide.vercel.app/"
|
||||
target="_blank"
|
||||
class="
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5 text-center">
|
||||
Coworking Guide
|
||||
</h2>
|
||||
<p
|
||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
|
||||
<p class="text-xl">
|
||||
A guide to coworking streams for Twitch streamers, covers
|
||||
wide range of topics from tips on how to get started with
|
||||
setting up stream to how to grow your audience!
|
||||
|
|
@ -290,18 +307,32 @@
|
|||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||
>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5 lg:text-right">
|
||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||
Chat-Task-Tic Widget
|
||||
</h2>
|
||||
<p class="text-xl lg:text-right">
|
||||
<p
|
||||
class="text-xl lg:text-right text-center lg:max-w-none max-w-lg"
|
||||
>
|
||||
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 class="lg:hidden flex justify-center items-center mb-10">
|
||||
<a
|
||||
href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
|
||||
target="_blank"
|
||||
class="
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="image-container lg:w-1/2 aspect-video [perspective:200px] relative mb-3 lg:mb-0 md:mr-5 mr-0 lg:mr-0 ml-0 lg:ml-1"
|
||||
>
|
||||
|
|
@ -410,6 +441,7 @@
|
|||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
hidden lg:block
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
|
|
@ -417,6 +449,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20 mt-5 lg:mt-0"
|
||||
>
|
||||
|
|
@ -455,18 +488,35 @@
|
|||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
hidden lg:block
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">Visit site</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||
<a
|
||||
href="https://hex-guess.vercel.app/"
|
||||
target="_blank"
|
||||
class="
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5">HexGuess</h2>
|
||||
<p class="text-xl">
|
||||
Decode colours in 5 attempts. Guess the hexadecimal code and receive instant feedback! Built with Next.JS, TailwindCSS and TypeScript.
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5 text-center">HexGuess</h2>
|
||||
<p
|
||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg"
|
||||
>
|
||||
Decode colours in 5 attempts. Guess the hexadecimal code and
|
||||
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||
and TypeScript.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -474,17 +524,32 @@
|
|||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||
>
|
||||
<div
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
|
||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center"
|
||||
>
|
||||
<h2 class="text-3xl font-bold mb-5 lg:text-right">
|
||||
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||
ProductiVue
|
||||
</h2>
|
||||
<p class="text-xl lg:text-right">
|
||||
Boost your productivity streaming with ProductiVue,
|
||||
a sleek minimalism-focused desktop app for Twitch streamers.
|
||||
Built using Vue, Tauri, Typescript and TailwindCSS.
|
||||
<p
|
||||
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg"
|
||||
>
|
||||
Boost your productivity streaming with ProductiVue, a sleek
|
||||
minimalism-focused desktop app for Twitch streamers. Built
|
||||
using Vue, Tauri, Typescript and TailwindCSS.
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:hidden flex justify-center items-center mb-10">
|
||||
<a
|
||||
href="https://www.github.com/liyunze-coding/ProductiVue"
|
||||
target="_blank"
|
||||
class="
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
hidden lg:block
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||
>
|
||||
|
|
@ -519,6 +584,7 @@
|
|||
class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
hidden lg:block
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View Repo</a
|
||||
|
|
@ -534,10 +600,11 @@
|
|||
.image-container .task-widget {
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
@media (min-width: 1025px) {
|
||||
.image-container:hover > img,
|
||||
.image-container:hover > .task-widget {
|
||||
transform: rotateY(0deg) rotateX(0deg) translateZ(0px) translateX(-50%)
|
||||
translateY(-50%);
|
||||
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
||||
translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.image-container:hover > .visit-div {
|
||||
|
|
@ -545,6 +612,7 @@
|
|||
transition: opacity 0.3s ease-in-out;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
animation: primary 30s linear infinite;
|
||||
|
|
|
|||
Loading…
Reference in a new issue