diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx
index 84494fa..57f493f 100644
--- a/pages/index/+Page.tsx
+++ b/pages/index/+Page.tsx
@@ -1,6 +1,7 @@
import { useData } from "vike-react/useData";
import type { Data } from "./+data";
import "../../styles.css";
+import "./print-button.css";
import resumeImage from "../../assets/resume-image.jpg";
export default function Page() {
@@ -11,7 +12,7 @@ export default function Page() {
fontOpticalSizing: "auto",
fontWeight: 400,
fontStyle: "normal",
- fontSize: "0.9em",
+ fontSize: "0.85em",
display: "flex",
flexDirection: "row",
@@ -38,8 +39,44 @@ export default function Page() {
flexDirection: "column",
width: "70%",
padding: "1em",
+ position: "relative",
}}
>
+
+
+
diff --git a/pages/index/print-button.css b/pages/index/print-button.css
new file mode 100644
index 0000000..ce20768
--- /dev/null
+++ b/pages/index/print-button.css
@@ -0,0 +1,43 @@
+.floating-print-btn {
+
+ /* position: fixed;
+ bottom: 24px;
+ right: 24px; */
+ position: absolute;
+
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ background: #f8f9fa;
+ /* border: none; */
+ border: 1px solid #e0e0e0;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ z-index: 1000;
+}
+
+.floating-print-btn:hover {
+ background: #f0f2f5;
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.floating-print-btn:active {
+ background: #f8f9fa;
+ transform: translateY(0);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.floating-print-btn {
+ color: #444444;
+}
+
+@media print {
+ .floating-print-btn {
+ display: none;
+ }
+}