add "print" button

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",
         }}
       >
+        <div
+          css={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            width: "100%",
+            position: "absolute",
+          }}
+        >
+          <button
+            className="floating-print-btn"
+            // css={{
+            //   fontSize: "1em",
+            //   margin: "1em",
+            //   padding: "0.5em",
+            //   border: "1px solid black",
+            //   borderRadius: "0.5em",
+            //   backgroundColor: "lavender",
+            // }}
+            onClick={() => {
+              window.print();
+            }}
+          >
+            {/* Print */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 640"
+              width="24"
+              height="24"
+            >
+              {/*Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.*/}
+              <path d="M128 128C128 92.7 156.7 64 192 64L405.5 64C422.5 64 438.8 70.7 450.8 82.7L493.3 125.2C505.3 137.2 512 153.5 512 170.5L512 208L128 208L128 128zM64 320C64 284.7 92.7 256 128 256L512 256C547.3 256 576 284.7 576 320L576 416C576 433.7 561.7 448 544 448L512 448L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 448L96 448C78.3 448 64 433.7 64 416L64 320zM192 480L192 512L448 512L448 416L192 416L192 480zM520 336C520 322.7 509.3 312 496 312C482.7 312 472 322.7 472 336C472 349.3 482.7 360 496 360C509.3 360 520 349.3 520 336z" />
+            </svg>
+          </button>
+        </div>
         <Employment />
         <ProjectsHobbies />
         <Education />

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;
+  }
+}