ahmed/portfolio-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Fix broken PC UI on iOS
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2025-05-02 22:44:35 -04:00
parent 01ac4d61cf
commit 2a1258a820
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/scene/Scene.tsx
View File

@@ -244,7 +244,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
currentView === View.PCView ? "auto" : "none" currentView === View.PCView ? "auto" : "none"
} }
occlude="blending" occlude="blending"
className="w-[1452px] h-[810px] bg-neutral-400" className="w-[1452px] h-[810px] bg-[#0e1838]"
scale={10} scale={10}
position={[0, 170, 0.25]} position={[0, 170, 0.25]}
raycast={ raycast={
@@ -253,12 +253,8 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
: undefined : undefined
} }
distanceFactor={10} distanceFactor={10}
style={{
backgroundImage: "url(/assets/pc-bg.webp)",
backgroundColor: "#111535",
}}
> >
<div className="w-full h-full backdrop-blur-md"> <div className="size-full">
<PCUI /> <PCUI />
</div> </div>
</Html> </Html>

26
src/components/ui/PCUI.tsx
View File

@@ -308,11 +308,11 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
<div className="flex h-full space-x-1"> <div className="flex h-full space-x-1">
<Icon <Icon
path={mdiFolder} path={mdiFolder}
className="text-neutral-400 h-full w-fit rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5" className="text-neutral-400 size-8 rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
/> />
<Icon <Icon
path={mdiPin} path={mdiPin}
className="text-neutral-400 h-full w-fit rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5" className="text-neutral-400 size-8 rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
/> />
</div> </div>
<p className="absolute left-1/2 transform -translate-x-1/2 text-white"> <p className="absolute left-1/2 transform -translate-x-1/2 text-white">
@@ -321,21 +321,21 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
<div className="flex h-full space-x-1 ml-auto justify-end"> <div className="flex h-full space-x-1 ml-auto justify-end">
<Icon <Icon
path={mdiWindowMinimize} path={mdiWindowMinimize}
className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5" className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
/> />
<Icon <Icon
path={mdiWindowRestore} path={mdiWindowRestore}
className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5" className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
/> />
<Icon <Icon
path={mdiWindowClose} path={mdiWindowClose}
className="text-neutral-100 h-full w-fit rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5" className="text-neutral-100 size-8 rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
/> />
</div> </div>
</div> </div>
<div className="flex bg-neutral-950 size-full rounded-b-lg text-white"> <div className="flex bg-neutral-950 size-full rounded-b-lg text-white">
<div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg"> <div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg">
<div className="h-14 p-2 pr-1 flex justify-center w-fit space-x-1"> <div className="h-14 p-2 pr-1 flex justify-center w-36 space-x-1">
<Icon <Icon
path={mdiArrowLeft} path={mdiArrowLeft}
className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2" className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -402,7 +402,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
> >
<Icon <Icon
path={mdiHelp} path={mdiHelp}
className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2" className="text-neutral-100 size-11 rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
/> />
</button> </button>
</div> </div>
@@ -417,7 +417,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
defaultValue="/home/ahmed/Desktop/projects" defaultValue="/home/ahmed/Desktop/projects"
/> />
</div> </div>
<div className="flex justify-center h-full w-fit space-x-1"> <div className="flex justify-center h-full w-36 space-x-1">
<Icon <Icon
path={mdiBackspace} path={mdiBackspace}
className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2" className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -446,7 +446,7 @@ const Taskbar = () => {
<div className="flex space-x-4 h-full w-fit items-center"> <div className="flex space-x-4 h-full w-fit items-center">
<SiArchlinux <SiArchlinux
color={SiArchlinuxHex} color={SiArchlinuxHex}
className="h-full w-fit transition-transform hover:scale-110" className="size-10 transition-transform hover:scale-110"
/> />
<div className="w-8 h-full"> <div className="w-8 h-full">
<div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" /> <div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" />
@@ -454,19 +454,19 @@ const Taskbar = () => {
</div> </div>
<Icon <Icon
path={mdiFolder} path={mdiFolder}
className="text-blue-500 h-full w-fit transition-transform hover:scale-110 border-b-2" className="text-blue-500 size-10 transition-transform hover:scale-110 border-b-2"
/> />
<SiVscodium <SiVscodium
color={SiVscodiumHex} color={SiVscodiumHex}
className="h-full w-fit transition-transform hover:scale-110" className="size-10 transition-transform hover:scale-110"
/> />
<Icon <Icon
path={mdiConsole} path={mdiConsole}
className="text-neutral-400 h-full w-fit transition-transform hover:scale-110" className="text-neutral-400 size-10 transition-transform hover:scale-110"
/> />
<SiFirefoxbrowser <SiFirefoxbrowser
color={SiFirefoxbrowserHex} color={SiFirefoxbrowserHex}
className="h-full w-fit transition-transform hover:scale-110" className="size-10 transition-transform hover:scale-110"
/> />
</div> </div>
<div className="flex space-x-2 h-full w-fit items-center"> <div className="flex space-x-2 h-full w-fit items-center">