personal website (jaspermayone.com)
jaspermayone.com
1/* Home.module.css */
2
3.container {
4 position: relative;
5 min-height: 100vh; /* Full viewport height */
6 width: 100vw; /* Full viewport width */
7 max-width: 100%; /* Prevent overflow */
8 overflow-x: hidden; /* Prevent horizontal scroll */
9 display: flex;
10 flex-direction: column; /* Stack elements vertically */
11 justify-content: space-between; /* Space header and footer */
12 align-items: center; /* Center content horizontally */
13 padding: 0;
14 margin: 0;
15 background: light-dark(#f8fbf8, #151922);
16 backdrop-filter: blur(10px);
17}
18
19.contentBox {
20 flex-grow: 1; /* Allow content to grow and fill available space */
21 display: flex;
22 flex-direction: column;
23 align-items: flex-start; /* Align content to the left */
24 margin-left: 4vw;
25 margin-right: 4vw;
26 border-radius: 10px; /* Rounded corners */
27 padding: 20px;
28}
29
30.top {
31 width: 100vw; /* Full width */
32 text-align: center; /* Center the header text */
33 padding-top: 2vh;
34 margin-bottom: 3.5vh;
35}
36
37.footer {
38 width: 100%; /* Full width footer */
39 text-align: center;
40 padding: 1rem;
41 background: light-dark(#f8fbf8, #151922);
42 box-shadow: light-dark(
43 0 -2px 5px rgba(0, 0, 0, 0.1),
44 0 -2px 5px rgba(255, 255, 255, 0.1)
45 );
46}
47
48.title {
49 margin: 0; /* Remove default margin */
50 font-size: 3.5em;
51 font-family: "Cute Notes", sans-serif;
52}
53
54.menu {
55 display: flex;
56 justify-content: center;
57 gap: 0.5vw; /* Space between menu items */
58 font-size: 0.8em;
59 font-style: italic;
60}
61
62.menuItemContainer {
63 position: relative;
64 display: flex;
65 flex-direction: column;
66 align-items: center;
67}
68
69.menuItem {
70 position: relative;
71 cursor: pointer;
72 padding-bottom: 0.5vh; /* Add space for the underline */
73 transition: color 0.3s ease;
74}
75
76.menuItem:hover {
77 color: #56ba8e; /* Change text color when hovered */
78}
79
80.activeIndicator {
81 position: absolute;
82 bottom: -3px;
83 left: 0;
84 width: 100%;
85 height: 2px;
86 background-color: #56ba8e;
87 transform-origin: center;
88 animation: underlineAnimation 0.3s ease forwards;
89}
90
91@keyframes underlineAnimation {
92 0% {
93 transform: scaleX(0);
94 }
95 100% {
96 transform: scaleX(1);
97 }
98}
99
100.profilePhoto {
101 border-radius: 50%;
102}
103
104.hidden {
105 display: none;
106}
107
108.menuContainer {
109 display: flex;
110 justify-content: center; /* Center both menus horizontally */
111 align-items: center; /* Align menus vertically */
112 gap: 1.5vw; /* Space between the main menu and menu2 */
113 width: 100%;
114 margin-bottom: 1rem;
115}
116
117.menu2 {
118 display: flex;
119 gap: 0.25rem;
120 align-items: center;
121}
122
123.footerLink {
124 color: #56ba8e; /* Link color */
125 text-decoration: underline wavy; /* Add an underline */
126 transition: color 0.3s ease; /* Smooth color transition on hover */
127}