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