trude/web
1
0
Fork 0
mirror of https://github.com/TrudeEH/web.git synced 2025-12-06 16:33:37 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
8cd58f6b2eb93fc2db971b9a8cf083644da1047e
web/static/portfolio/css/hero.css

951 lines
18 KiB
CSS
Raw Blame History

/* ------------- HERO PAGE ---------- */
h1,
h2 {
margin: 0;
padding: 0;
cursor: default;
}
h2 {
font-size: 1.5rem;
margin-bottom: 4rem;
color: #ffffffbc;
}
h1 a {
font-family: Yellowtail, sans-serif;
color: white;
text-decoration: none;
display: inline-block;
-webkit-mask-image: linear-gradient(
-75deg,
rgba(0, 0, 0, 0.6) 30%,
#000 50%,
rgba(0, 0, 0, 0.6) 70%
);
-webkit-mask-size: 200%;
animation: shine 3s linear infinite;
cursor: default;
width: 100%;
font-size: 4rem;
}
@keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
}
.hero-container {
height: 100vh;
min-height: 50rem;
overflow: hidden;
}
.hero {
text-align: center;
background: url(../img/herobg.webp);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero-logo {
position: relative;
display: flex;
width: 90vw;
height: 90vw;
max-width: 35rem;
max-height: 35rem;
padding: 2rem;
}
.hero-logo-image {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(
43.966% 2.098%,
43.966% 2.098%,
45.087% 1.411%,
46.265% 0.876%,
47.486% 0.494%,
48.736% 0.265%,
50% 0.188%,
51.264% 0.265%,
52.514% 0.494%,
53.735% 0.876%,
54.913% 1.411%,
56.034% 2.098%,
56.034% 2.098%,
56.034% 2.098%,
56.751% 2.56%,
57.498% 2.96%,
58.271% 3.297%,
59.066% 3.569%,
59.879% 3.777%,
60.706% 3.92%,
61.542% 3.995%,
62.385% 4.004%,
63.229% 3.944%,
64.072% 3.815%,
64.072% 3.815%,
64.072% 3.815%,
65.374% 3.645%,
66.666% 3.638%,
67.936% 3.788%,
69.171% 4.089%,
70.357% 4.536%,
71.481% 5.122%,
72.53% 5.842%,
73.491% 6.691%,
74.351% 7.661%,
75.096% 8.747%,
75.096% 8.747%,
75.096% 8.747%,
75.564% 9.462%,
76.085% 10.132%,
76.655% 10.756%,
77.271% 11.33%,
77.929% 11.852%,
78.627% 12.32%,
79.36% 12.731%,
80.127% 13.083%,
80.922% 13.373%,
81.744% 13.6%,
81.744% 13.6%,
81.744% 13.6%,
83.002% 13.976%,
84.186% 14.498%,
85.286% 15.154%,
86.292% 15.934%,
87.194% 16.827%,
87.984% 17.822%,
88.65% 18.909%,
89.185% 20.076%,
89.578% 21.314%,
89.819% 22.61%,
89.819% 22.61%,
89.819% 22.61%,
89.957% 23.455%,
90.161% 24.281%,
90.43% 25.083%,
90.76% 25.859%,
91.15% 26.605%,
91.598% 27.317%,
92.102% 27.993%,
92.659% 28.627%,
93.268% 29.218%,
93.927% 29.761%,
93.927% 29.761%,
93.927% 29.761%,
94.925% 30.619%,
95.795% 31.579%,
96.534% 32.628%,
97.137% 33.752%,
97.6% 34.936%,
97.918% 36.168%,
98.088% 37.433%,
98.103% 38.718%,
97.961% 40.009%,
97.657% 41.292%,
97.657% 41.292%,
97.657% 41.292%,
97.441% 42.121%,
97.294% 42.958%,
97.214% 43.801%,
97.201% 44.645%,
97.256% 45.486%,
97.377% 46.32%,
97.563% 47.143%,
97.816% 47.95%,
98.133% 48.739%,
98.516% 49.504%,
98.516% 49.504%,
98.516% 49.504%,
99.079% 50.695%,
99.485% 51.928%,
99.736% 53.189%,
99.832% 54.461%,
99.776% 55.733%,
99.568% 56.988%,
99.21% 58.213%,
98.704% 59.393%,
98.052% 60.515%,
97.254% 61.562%,
97.254% 61.562%,
97.254% 61.562%,
96.722% 62.231%,
96.248% 62.936%,
95.834% 63.673%,
95.481% 64.439%,
95.19% 65.229%,
94.963% 66.041%,
94.801% 66.869%,
94.704% 67.71%,
94.675% 68.56%,
94.715% 69.415%,
94.715% 69.415%,
94.715% 69.415%,
94.747% 70.734%,
94.619% 72.026%,
94.338% 73.28%,
93.911% 74.482%,
93.344% 75.62%,
92.646% 76.682%,
91.824% 77.655%,
90.884% 78.527%,
89.834% 79.284%,
88.681% 79.915%,
88.681% 79.915%,
88.681% 79.915%,
87.924% 80.309%,
87.206% 80.759%,
86.529% 81.263%,
85.897% 81.819%,
85.311% 82.422%,
84.775% 83.07%,
84.292% 83.76%,
83.863% 84.489%,
83.493% 85.254%,
83.182% 86.051%,
83.182% 86.051%,
83.182% 86.051%,
82.678% 87.269%,
82.038% 88.398%,
81.274% 89.428%,
80.397% 90.352%,
79.418% 91.16%,
78.351% 91.845%,
77.206% 92.398%,
75.994% 92.81%,
74.728% 93.073%,
73.42% 93.178%,
73.42% 93.178%,
73.42% 93.178%,
72.569% 93.228%,
71.731% 93.346%,
70.908% 93.53%,
70.106% 93.779%,
69.326% 94.091%,
68.574% 94.464%,
67.853% 94.897%,
67.167% 95.388%,
66.519% 95.935%,
65.913% 96.536%,
65.913% 96.536%,
65.913% 96.536%,
64.959% 97.443%,
63.917% 98.212%,
62.802% 98.841%,
61.627% 99.326%,
60.406% 99.665%,
59.153% 99.855%,
57.884% 99.892%,
56.61% 99.773%,
55.347% 99.496%,
54.109% 99.057%,
54.109% 99.057%,
54.109% 99.057%,
53.311% 98.755%,
52.498% 98.52%,
51.672% 98.353%,
50.838% 98.252%,
50% 98.218%,
49.162% 98.252%,
48.328% 98.353%,
47.502% 98.52%,
46.689% 98.755%,
45.891% 99.057%,
45.891% 99.057%,
45.891% 99.057%,
44.653% 99.496%,
43.39% 99.773%,
42.116% 99.892%,
40.847% 99.855%,
39.594% 99.665%,
38.373% 99.326%,
37.198% 98.841%,
36.083% 98.212%,
35.041% 97.443%,
34.087% 96.536%,
34.087% 96.536%,
34.087% 96.536%,
33.481% 95.935%,
32.833% 95.388%,
32.147% 94.897%,
31.426% 94.464%,
30.674% 94.091%,
29.894% 93.779%,
29.092% 93.53%,
28.269% 93.346%,
27.431% 93.228%,
26.58% 93.178%,
26.58% 93.178%,
26.58% 93.178%,
25.272% 93.073%,
24.006% 92.81%,
22.794% 92.398%,
21.649% 91.845%,
20.582% 91.16%,
19.603% 90.352%,
18.726% 89.428%,
17.962% 88.398%,
17.322% 87.269%,
16.817% 86.051%,
16.817% 86.051%,
16.817% 86.051%,
16.507% 85.254%,
16.137% 84.489%,
15.708% 83.76%,
15.225% 83.07%,
14.689% 82.422%,
14.103% 81.819%,
13.471% 81.263%,
12.794% 80.759%,
12.076% 80.309%,
11.319% 79.915%,
11.319% 79.915%,
11.319% 79.915%,
10.166% 79.284%,
9.116% 78.527%,
8.176% 77.655%,
7.354% 76.682%,
6.656% 75.62%,
6.089% 74.482%,
5.662% 73.28%,
5.381% 72.026%,
5.253% 70.734%,
5.285% 69.415%,
5.285% 69.415%,
5.285% 69.415%,
5.325% 68.56%,
5.296% 67.71%,
5.199% 66.869%,
5.037% 66.041%,
4.81% 65.229%,
4.519% 64.439%,
4.166% 63.673%,
3.752% 62.936%,
3.278% 62.231%,
2.746% 61.562%,
2.746% 61.562%,
2.746% 61.562%,
1.948% 60.515%,
1.296% 59.393%,
0.79% 58.213%,
0.432% 56.988%,
0.225% 55.733%,
0.168% 54.461%,
0.264% 53.189%,
0.515% 51.928%,
0.921% 50.695%,
1.484% 49.504%,
1.484% 49.504%,
1.484% 49.504%,
1.867% 48.739%,
2.184% 47.95%,
2.437% 47.143%,
2.624% 46.32%,
2.744% 45.486%,
2.799% 44.645%,
2.786% 43.801%,
2.706% 42.958%,
2.559% 42.121%,
2.343% 41.292%,
2.343% 41.292%,
2.343% 41.292%,
2.039% 40.009%,
1.897% 38.718%,
1.912% 37.433%,
2.082% 36.168%,
2.4% 34.936%,
2.863% 33.752%,
3.466% 32.628%,
4.205% 31.579%,
5.075% 30.619%,
6.072% 29.761%,
6.072% 29.761%,
6.072% 29.761%,
6.731% 29.218%,
7.341% 28.627%,
7.898% 27.993%,
8.402% 27.317%,
8.85% 26.605%,
9.24% 25.859%,
9.57% 25.083%,
9.839% 24.281%,
10.043% 23.455%,
10.181% 22.61%,
10.181% 22.61%,
10.181% 22.61%,
10.422% 21.314%,
10.815% 20.076%,
11.35% 18.909%,
12.016% 17.822%,
12.806% 16.827%,
13.708% 15.934%,
14.714% 15.154%,
15.814% 14.498%,
16.998% 13.976%,
18.256% 13.6%,
18.256% 13.6%,
18.256% 13.6%,
19.078% 13.373%,
19.873% 13.083%,
20.64% 12.731%,
21.373% 12.32%,
22.071% 11.852%,
22.729% 11.33%,
23.345% 10.756%,
23.915% 10.132%,
24.436% 9.462%,
24.904% 8.747%,
24.904% 8.747%,
24.904% 8.747%,
25.649% 7.661%,
26.509% 6.691%,
27.47% 5.842%,
28.519% 5.122%,
29.643% 4.536%,
30.829% 4.089%,
32.064% 3.788%,
33.334% 3.638%,
34.626% 3.645%,
35.928% 3.815%,
35.928% 3.815%,
35.928% 3.815%,
36.771% 3.944%,
37.615% 4.004%,
38.458% 3.995%,
39.294% 3.92%,
40.121% 3.777%,
40.934% 3.569%,
41.729% 3.297%,
42.502% 2.96%,
43.249% 2.56%,
43.966% 2.098%,
43.966% 2.098%
);
animation: clipRotateAnim 25s linear infinite;
}
.hero-logo-image:before {
content: "";
position: absolute;
inset: -10%;
background-image: url(../img/pfp.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: inherit;
animation-direction: reverse;
}
@keyframes clipRotateAnim {
to {
transform: rotate(360deg);
}
}
.hero-logo-icon {
width: 30%;
height: 30%;
background-color: #0000003f;
bottom: 0;
right: 0;
position: absolute;
clip-path: polygon(
41.954% 4.828%,
41.954% 4.828%,
43.343% 5.418%,
44.772% 5.885%,
46.232% 6.229%,
47.714% 6.449%,
49.207% 6.542%,
50.701% 6.508%,
52.186% 6.346%,
53.654% 6.054%,
55.092% 5.632%,
56.493% 5.077%,
56.493% 5.077%,
58.251% 4.305%,
60.072% 3.554%,
61.944% 2.838%,
63.858% 2.171%,
65.801% 1.567%,
67.764% 1.041%,
69.736% 0.607%,
71.705% 0.279%,
73.661% 0.072%,
75.594% 0%,
75.594% 0%,
77.575% 0.081%,
79.512% 0.319%,
81.398% 0.708%,
83.226% 1.243%,
84.991% 1.915%,
86.686% 2.72%,
88.304% 3.65%,
89.84% 4.7%,
91.288% 5.863%,
92.639% 7.132%,
92.639% 7.132%,
93.933% 8.489%,
95.119% 9.943%,
96.189% 11.488%,
97.138% 13.119%,
97.959% 14.827%,
98.645% 16.608%,
99.19% 18.453%,
99.588% 20.358%,
99.831% 22.314%,
99.913% 24.316%,
99.913% 24.316%,
99.846% 26.11%,
99.654% 27.922%,
99.348% 29.743%,
98.941% 31.563%,
98.446% 33.374%,
97.875% 35.165%,
97.24% 36.928%,
96.555% 38.653%,
95.832% 40.332%,
95.082% 41.954%,
95.082% 41.954%,
94.493% 43.343%,
94.025% 44.772%,
93.681% 46.232%,
93.462% 47.714%,
93.368% 49.207%,
93.402% 50.701%,
93.564% 52.186%,
93.856% 53.654%,
94.279% 55.092%,
94.833% 56.493%,
94.833% 56.493%,
95.605% 58.252%,
96.357% 60.073%,
97.073% 61.947%,
97.741% 63.861%,
98.345% 65.805%,
98.871% 67.769%,
99.306% 69.742%,
99.634% 71.712%,
99.841% 73.669%,
99.913% 75.603%,
99.913% 75.603%,
99.829% 77.622%,
99.582% 79.596%,
99.177% 81.516%,
98.623% 83.376%,
97.925% 85.17%,
97.09% 86.89%,
96.125% 88.53%,
95.037% 90.084%,
93.832% 91.544%,
92.518% 92.903%,
92.518% 92.903%,
91.17% 94.152%,
89.729% 95.296%,
88.202% 96.328%,
86.593% 97.242%,
84.91% 98.033%,
83.159% 98.693%,
81.346% 99.218%,
79.476% 99.6%,
77.557% 99.834%,
75.594% 99.913%,
75.594% 99.913%,
73.661% 99.841%,
71.704% 99.635%,
69.735% 99.308%,
67.764% 98.874%,
65.801% 98.349%,
63.858% 97.746%,
61.945% 97.08%,
60.072% 96.364%,
58.251% 95.613%,
56.493% 94.842%,
56.493% 94.842%,
55.092% 94.287%,
53.654% 93.865%,
52.186% 93.573%,
50.701% 93.411%,
49.207% 93.377%,
47.714% 93.47%,
46.232% 93.69%,
44.772% 94.034%,
43.343% 94.501%,
41.954% 95.091%,
41.954% 95.091%,
40.331% 95.84%,
38.652% 96.563%,
36.926% 97.247%,
35.162% 97.881%,
33.37% 98.45%,
31.559% 98.944%,
29.738% 99.35%,
27.916% 99.655%,
26.103% 99.847%,
24.308% 99.913%,
24.308% 99.913%,
22.306% 99.831%,
20.35% 99.588%,
18.446% 99.19%,
16.601% 98.646%,
14.821% 97.96%,
13.112% 97.139%,
11.482% 96.19%,
9.937% 95.12%,
8.483% 93.936%,
7.127% 92.642%,
7.127% 92.642%,
5.858% 91.291%,
4.696% 89.844%,
3.647% 88.308%,
2.717% 86.69%,
1.913% 84.996%,
1.241% 83.231%,
0.708% 81.404%,
0.319% 79.519%,
0.081% 77.583%,
0% 75.603%,
0% 75.603%,
0.072% 73.668%,
0.278% 71.711%,
0.605% 69.741%,
1.038% 67.768%,
1.562% 65.805%,
2.165% 63.861%,
2.831% 61.947%,
3.546% 60.074%,
4.297% 58.252%,
5.068% 56.493%,
5.068% 56.493%,
5.623% 55.092%,
6.046% 53.654%,
6.338% 52.186%,
6.5% 50.701%,
6.533% 49.207%,
6.44% 47.714%,
6.221% 46.232%,
5.877% 44.772%,
5.409% 43.343%,
4.82% 41.954%,
4.82% 41.954%,
4.071% 40.332%,
3.348% 38.654%,
2.664% 36.928%,
2.031% 35.165%,
1.462% 33.374%,
0.969% 31.564%,
0.563% 29.744%,
0.259% 27.923%,
0.067% 26.111%,
0% 24.316%,
0% 24.316%,
0.079% 22.354%,
0.313% 20.435%,
0.695% 18.566%,
1.22% 16.753%,
1.88% 15.002%,
2.67% 13.319%,
3.584% 11.711%,
4.616% 10.184%,
5.759% 8.743%,
7.007% 7.395%,
7.007% 7.395%,
8.367% 6.081%,
9.827% 4.876%,
11.38% 3.788%,
13.02% 2.824%,
14.74% 1.989%,
16.534% 1.291%,
18.394% 0.736%,
20.314% 0.332%,
22.288% 0.084%,
24.308% 0%,
24.308% 0%,
26.103% 0.067%,
27.916% 0.259%,
29.737% 0.565%,
31.559% 0.971%,
33.37% 1.466%,
35.162% 2.036%,
36.926% 2.67%,
38.652% 3.355%,
40.331% 4.079%,
41.954% 4.828%
);
animation: clipRotateAnim 60s linear infinite;
}
.hero-logo-icon:before {
content: "";
position: absolute;
inset: +10%;
background-image: url(../img/dragon_logo.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: inherit;
animation-direction: reverse;
}
.hero-logo-icon-2 {
width: 30%;
height: 30%;
background-color: #0000003f;
bottom: 0;
right: 0;
position: absolute;
clip-path: polygon(
41.954% 4.828%,
41.954% 4.828%,
43.343% 5.418%,
44.772% 5.885%,
46.232% 6.229%,
47.714% 6.449%,
49.207% 6.542%,
50.701% 6.508%,
52.186% 6.346%,
53.654% 6.054%,
55.092% 5.632%,
56.493% 5.077%,
56.493% 5.077%,
58.251% 4.305%,
60.072% 3.554%,
61.944% 2.838%,
63.858% 2.171%,
65.801% 1.567%,
67.764% 1.041%,
69.736% 0.607%,
71.705% 0.279%,
73.661% 0.072%,
75.594% 0%,
75.594% 0%,
77.575% 0.081%,
79.512% 0.319%,
81.398% 0.708%,
83.226% 1.243%,
84.991% 1.915%,
86.686% 2.72%,
88.304% 3.65%,
89.84% 4.7%,
91.288% 5.863%,
92.639% 7.132%,
92.639% 7.132%,
93.933% 8.489%,
95.119% 9.943%,
96.189% 11.488%,
97.138% 13.119%,
97.959% 14.827%,
98.645% 16.608%,
99.19% 18.453%,
99.588% 20.358%,
99.831% 22.314%,
99.913% 24.316%,
99.913% 24.316%,
99.846% 26.11%,
99.654% 27.922%,
99.348% 29.743%,
98.941% 31.563%,
98.446% 33.374%,
97.875% 35.165%,
97.24% 36.928%,
96.555% 38.653%,
95.832% 40.332%,
95.082% 41.954%,
95.082% 41.954%,
94.493% 43.343%,
94.025% 44.772%,
93.681% 46.232%,
93.462% 47.714%,
93.368% 49.207%,
93.402% 50.701%,
93.564% 52.186%,
93.856% 53.654%,
94.279% 55.092%,
94.833% 56.493%,
94.833% 56.493%,
95.605% 58.252%,
96.357% 60.073%,
97.073% 61.947%,
97.741% 63.861%,
98.345% 65.805%,
98.871% 67.769%,
99.306% 69.742%,
99.634% 71.712%,
99.841% 73.669%,
99.913% 75.603%,
99.913% 75.603%,
99.829% 77.622%,
99.582% 79.596%,
99.177% 81.516%,
98.623% 83.376%,
97.925% 85.17%,
97.09% 86.89%,
96.125% 88.53%,
95.037% 90.084%,
93.832% 91.544%,
92.518% 92.903%,
92.518% 92.903%,
91.17% 94.152%,
89.729% 95.296%,
88.202% 96.328%,
86.593% 97.242%,
84.91% 98.033%,
83.159% 98.693%,
81.346% 99.218%,
79.476% 99.6%,
77.557% 99.834%,
75.594% 99.913%,
75.594% 99.913%,
73.661% 99.841%,
71.704% 99.635%,
69.735% 99.308%,
67.764% 98.874%,
65.801% 98.349%,
63.858% 97.746%,
61.945% 97.08%,
60.072% 96.364%,
58.251% 95.613%,
56.493% 94.842%,
56.493% 94.842%,
55.092% 94.287%,
53.654% 93.865%,
52.186% 93.573%,
50.701% 93.411%,
49.207% 93.377%,
47.714% 93.47%,
46.232% 93.69%,
44.772% 94.034%,
43.343% 94.501%,
41.954% 95.091%,
41.954% 95.091%,
40.331% 95.84%,
38.652% 96.563%,
36.926% 97.247%,
35.162% 97.881%,
33.37% 98.45%,
31.559% 98.944%,
29.738% 99.35%,
27.916% 99.655%,
26.103% 99.847%,
24.308% 99.913%,
24.308% 99.913%,
22.306% 99.831%,
20.35% 99.588%,
18.446% 99.19%,
16.601% 98.646%,
14.821% 97.96%,
13.112% 97.139%,
11.482% 96.19%,
9.937% 95.12%,
8.483% 93.936%,
7.127% 92.642%,
7.127% 92.642%,
5.858% 91.291%,
4.696% 89.844%,
3.647% 88.308%,
2.717% 86.69%,
1.913% 84.996%,
1.241% 83.231%,
0.708% 81.404%,
0.319% 79.519%,
0.081% 77.583%,
0% 75.603%,
0% 75.603%,
0.072% 73.668%,
0.278% 71.711%,
0.605% 69.741%,
1.038% 67.768%,
1.562% 65.805%,
2.165% 63.861%,
2.831% 61.947%,
3.546% 60.074%,
4.297% 58.252%,
5.068% 56.493%,
5.068% 56.493%,
5.623% 55.092%,
6.046% 53.654%,
6.338% 52.186%,
6.5% 50.701%,
6.533% 49.207%,
6.44% 47.714%,
6.221% 46.232%,
5.877% 44.772%,
5.409% 43.343%,
4.82% 41.954%,
4.82% 41.954%,
4.071% 40.332%,
3.348% 38.654%,
2.664% 36.928%,
2.031% 35.165%,
1.462% 33.374%,
0.969% 31.564%,
0.563% 29.744%,
0.259% 27.923%,
0.067% 26.111%,
0% 24.316%,
0% 24.316%,
0.079% 22.354%,
0.313% 20.435%,
0.695% 18.566%,
1.22% 16.753%,
1.88% 15.002%,
2.67% 13.319%,
3.584% 11.711%,
4.616% 10.184%,
5.759% 8.743%,
7.007% 7.395%,
7.007% 7.395%,
8.367% 6.081%,
9.827% 4.876%,
11.38% 3.788%,
13.02% 2.824%,
14.74% 1.989%,
16.534% 1.291%,
18.394% 0.736%,
20.314% 0.332%,
22.288% 0.084%,
24.308% 0%,
24.308% 0%,
26.103% 0.067%,
27.916% 0.259%,
29.737% 0.565%,
31.559% 0.971%,
33.37% 1.466%,
35.162% 2.036%,
36.926% 2.67%,
38.652% 3.355%,
40.331% 4.079%,
41.954% 4.828%
);
animation: clipRotateAnim 60s linear infinite;
animation-direction: reverse;
}
.hero-text {
width: 100%;
}
@media only screen and (min-width: 750px) {
h1 a {
font-size: 6rem;
}
h2 {
font-size: 2rem;
}
}
Reference in New Issue View Git Blame Copy Permalink