jaspermayone.com
Personal Website for @jaspermayone.com
jaspermayone.com
style work
+80
-78
+69
-69
src/styles/Home.module.css
+69
-69
src/styles/Home.module.css
···
1
+
/* Home.module.css */
2
+
1
3
.container {
2
-
position: relative;
3
-
min-height: 100vh; /* Full viewport height */
4
-
width: 100vw; /* Full viewport width */
5
-
max-width: 100%; /* Prevent overflow */
6
-
overflow-x: hidden; /* Prevent horizontal scroll */
7
-
display: flex;
8
-
flex-direction: column; /* Stack elements vertically */
9
-
justify-content: space-between; /* Space header and footer */
10
-
align-items: center; /* Center content horizontally */
11
-
padding: 0;
12
-
margin: 0;
13
-
background: rgba(255, 255, 255, 0.2); /* Slight white background */
14
-
backdrop-filter: blur(10px);
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: rgba(255, 255, 255, 0.2); /* Slight white background */
16
+
backdrop-filter: blur(10px);
15
17
}
16
18
17
19
.contentBox {
18
-
flex-grow: 1; /* Allow content to grow and fill available space */
19
-
display: flex;
20
-
flex-direction: column;
21
-
align-items: flex-start; /* Align content to the left */
22
-
margin-left: 4vw;
23
-
margin-right: 4vw;
24
-
border-radius: 10px; /* Rounded corners */
25
-
padding: 20px;
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;
26
28
}
27
29
28
30
.top {
29
-
width: 100vw; /* Full width */
30
-
text-align: center; /* Center the header text */
31
-
padding-top: 2vh;
32
-
margin-bottom: 3.5vh;
31
+
width: 100vw; /* Full width */
32
+
text-align: center; /* Center the header text */
33
+
padding-top: 2vh;
34
+
margin-bottom: 3.5vh;
33
35
}
34
36
35
37
.footer {
36
-
width: 100%; /* Full width footer */
37
-
text-align: center;
38
-
padding: 1rem;
39
-
background-color: rgba(255, 255, 255, 0.8);
40
-
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
38
+
width: 100%; /* Full width footer */
39
+
text-align: center;
40
+
padding: 1rem;
41
+
background-color: rgba(255, 255, 255, 0.8);
42
+
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
41
43
}
42
44
43
45
.title {
44
-
margin: 0; /* Remove default margin */
45
-
font-size: 3.5em;
46
-
font-family: "Cute Notes", sans-serif;
46
+
margin: 0; /* Remove default margin */
47
+
font-size: 3.5em;
48
+
font-family: "Cute Notes", sans-serif;
47
49
}
48
50
49
51
.menu {
50
-
display: flex;
51
-
justify-content: center;
52
-
gap: 1vw; /* Space between menu items */
53
-
font-size: 0.8em;
54
-
font-style: italic;
52
+
display: flex;
53
+
justify-content: center;
54
+
gap: 1vw; /* Space between menu items */
55
+
font-size: 0.8em;
56
+
font-style: italic;
55
57
}
56
58
57
59
.menu p {
58
-
position: relative;
59
-
cursor: pointer;
60
-
padding-bottom: 1vh; /* Add space for the underline */
61
-
transition:
62
-
color 0.3s ease,
63
-
text-decoration 0.3s ease;
60
+
position: relative;
61
+
cursor: pointer;
62
+
padding-bottom: 1vh; /* Add space for the underline */
63
+
transition: color 0.3s ease, text-decoration 0.3s ease;
64
64
}
65
65
66
66
.menu p:hover {
67
-
color: #4299e1; /* Change text color when hovered (adjust to desired color) */
67
+
color: #4299e1; /* Change text color when hovered (adjust to desired color) */
68
68
}
69
69
70
70
.menu p.selected {
71
-
text-decoration: underline wavy;
72
-
text-decoration-color: #4299e1; /* Wavy underline for selected items */
71
+
text-decoration: underline wavy;
72
+
text-decoration-color: #4299e1; /* Wavy underline for selected items */
73
73
}
74
74
75
75
.profilePhoto {
76
-
border-radius: 50%;
76
+
border-radius: 50%;
77
77
}
78
78
79
79
.overlay {
80
-
border: 1px solid rgba(255, 255, 255, 0.2);
81
-
border-radius: 10px;
80
+
border: 1px solid rgba(255, 255, 255, 0.2);
81
+
border-radius: 10px;
82
82
}
83
83
84
84
.title {
85
-
font-size: 3.5em;
86
-
font-family: "Cute Notes", sans-serif;
85
+
font-size: 3.5em;
86
+
font-family: "Cute Notes", sans-serif;
87
87
}
88
88
89
89
.hidden {
90
-
display: none;
90
+
display: none;
91
91
}
92
92
93
93
.menuContainer {
94
-
display: flex;
95
-
justify-content: center; /* Center both menus horizontally */
96
-
align-items: center; /* Align menus vertically */
97
-
gap: 1.5vw; /* Space between the main menu and menu2 */
94
+
display: flex;
95
+
justify-content: center; /* Center both menus horizontally */
96
+
align-items: center; /* Align menus vertically */
97
+
gap: 1.5vw; /* Space between the main menu and menu2 */
98
98
}
99
99
100
100
.menu2 {
101
-
display: flex;
102
-
gap: 0.5rem;
103
-
margin-top: -1vh;
104
-
align-items: center; /* Add this line */
101
+
display: flex;
102
+
gap: 0.5rem;
103
+
margin-top: -1vh;
104
+
align-items: center; /* Add this line */
105
105
}
106
106
107
107
.footerLink {
108
-
color: #4299e1; /* Link color */
109
-
text-decoration: underline wavy; /* Add an underline */
110
-
transition: color 0.3s ease; /* Smooth color transition on hover */
108
+
color: #4299e1; /* Link color */
109
+
text-decoration: underline wavy; /* Add an underline */
110
+
transition: color 0.3s ease; /* Smooth color transition on hover */
111
111
}
112
112
113
113
.lnk {
114
-
color: #4299e1; /* Link color */
115
-
text-decoration: underline wavy; /* Add an underline */
116
-
transition: color 0.3s ease; /* Smooth color transition on hover */
114
+
color: #4299e1; /* Link color */
115
+
text-decoration: underline wavy; /* Add an underline */
116
+
transition: color 0.3s ease; /* Smooth color transition on hover */
117
117
}
118
118
119
119
.lnk:hover {
120
-
color: #003e73; /* Change color on hover */
120
+
color: #003e73; /* Change color on hover */
121
121
}
122
122
123
123
.footerLink:hover {
124
-
color: #003e73; /* Change color on hover */
124
+
color: #003e73; /* Change color on hover */
125
125
}
+11
-9
src/styles/Misc.module.css
+11
-9
src/styles/Misc.module.css
···
1
+
/* Misc.module.css */
2
+
1
3
.lightUl {
2
-
/* make a light underline */
3
-
text-decoration: underline;
4
-
text-decoration-color: rgba(66, 153, 225, 0.9);
5
-
text-decoration-thickness: 2.25px;
6
-
text-decoration-style: dashed;
7
-
font-weight: 325;
8
-
font-size: 1.25rem; /* 20px */
9
-
line-height: 1.75rem; /* 28px */
10
-
padding-bottom: 0.5rem;
4
+
/* make a light underline */
5
+
text-decoration: underline;
6
+
text-decoration-color: rgba(66, 153, 225, 0.9);
7
+
text-decoration-thickness: 2.25px;
8
+
text-decoration-style: dashed;
9
+
font-weight: 325;
10
+
font-size: 1.25rem; /* 20px */
11
+
line-height: 1.75rem; /* 28px */
12
+
padding-bottom: 0.5rem;
11
13
}
12
14
13
15
/* "font-medium text-xl mb-4 " */