Merge pull request #178 from Jaewoook/feature/blur-effect

Apply blur effect on Window component
Jaewoook · Apr 6, 2024 · 5c7c38c · 5c7c38c
2 parents 0c3da92 + d4b6a26
commit 5c7c38c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/app/components/Resume/index.tsx b/app/components/Resume/index.tsx
@@ -35,9 +35,7 @@ export const Resume = () => {
 
   return (
     <Window x="200px" y="100px" title="Resume">
-      <div>
-        <canvas className={css.resumeCanvas} ref={pdfCanvasRef} />
-      </div>
+      <canvas className={css.resumeCanvas} ref={pdfCanvasRef} />
     </Window>
   );
 };
diff --git a/app/components/Window/Window.css.ts b/app/components/Window/Window.css.ts
@@ -16,10 +16,11 @@ export const frame = style({
 export const wrapper = style({
   color: "#fff",
   boxShadow: "rgba(0, 0, 0, 0.55) 0px 20px 68px",
-  backgroundColor: "#333",
+  backgroundColor: "rgba(51, 51, 51, 0.85)",
   border: "1px solid #5c5c5c",
   borderRadius: 12,
   overflow: "hidden",
+  backdropFilter: "blur(32px)",
 });
 
 export const header = style({