mirror of
https://github.com/TrudeEH/web.git
synced 2025-12-06 08:23:37 +00:00
Move portfolio to the local repository
This commit is contained in:
102
static/portfolio/css/certs.css
Normal file
102
static/portfolio/css/certs.css
Normal file
@@ -0,0 +1,102 @@
|
||||
#certs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
background: url(../img/certsbg.webp);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#certs .item-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.certs-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #ffffff54;
|
||||
border-radius: 1.2rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.certs-item:hover {
|
||||
transform: scale(102%);
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.certs-item img {
|
||||
width: 100%;
|
||||
max-height: 30rem;
|
||||
border-radius: 0.6rem;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.certs-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.certs-item a {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #00000073;
|
||||
border-radius: 50rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 0px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.certs-item a:last-child {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.certs-item a:hover {
|
||||
background: #00000061;
|
||||
transform: scale(102%);
|
||||
transition: 0.4s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 750px) {
|
||||
.certs-item:nth-child(2) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
#certs .item-container {
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#certs {
|
||||
padding-right: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.certs-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
.certs-item a:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
950
static/portfolio/css/hero.css
Normal file
950
static/portfolio/css/hero.css
Normal file
@@ -0,0 +1,950 @@
|
||||
/* ------------- 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;
|
||||
}
|
||||
}
|
||||
211
static/portfolio/css/main.css
Normal file
211
static/portfolio/css/main.css
Normal file
@@ -0,0 +1,211 @@
|
||||
:root {
|
||||
--bg: #181818;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Yellowtail;
|
||||
src: local(sans-serif), url(../fonts/Yellowtail-Regular.ttf);
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: local(sans-serif), url(../fonts/Roboto-Regular.ttf);
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ----------- HTML - BODY -------------- */
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: var(--bg);
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: black;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #4a4a4a;
|
||||
border-radius: 99rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #7d7d7d;
|
||||
}
|
||||
|
||||
/* -------------- Title Bubbles --------------- */
|
||||
|
||||
.title-bubble {
|
||||
height: 2rem;
|
||||
width: 60%;
|
||||
background: rgba(0, 0, 0, 0.298);
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 20%;
|
||||
border-radius: 99rem;
|
||||
text-align: center;
|
||||
padding: 0.4rem 0px;
|
||||
color: white;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.title-bubble img {
|
||||
background: transparent !important;
|
||||
transform: translateY(0.1rem);
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
background: transparent;
|
||||
border-radius: 0 !important;
|
||||
object-fit: contain !important;
|
||||
filter: invert(100%) sepia(14%) saturate(177%) hue-rotate(186deg)
|
||||
brightness(115%) contrast(100%);
|
||||
}
|
||||
|
||||
.title-main {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(163, 163, 163, 0.298);
|
||||
}
|
||||
|
||||
/* -------------- Contact Bubbles -------- */
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
padding-bottom: 7rem;
|
||||
background: url("../img/contactbg.webp");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.contact-bubble {
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
background: #78787848;
|
||||
border-radius: 99rem;
|
||||
width: fit-content;
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.contact-bubble a {
|
||||
height: 100%;
|
||||
background: #ffffff64;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.contact-bubble a:hover {
|
||||
background: #ffffffbd;
|
||||
transform: scale(104%);
|
||||
transition: 0.4s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.contact-bubble img {
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.contact-bubble a:last-child {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.contact-bubble:hover {
|
||||
transform: scale(104%);
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
/* -------------- Common Rules ----------- */
|
||||
|
||||
#certs,
|
||||
.hero,
|
||||
#projects,
|
||||
#timeline,
|
||||
#contact {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.timeline-container,
|
||||
.certs-container,
|
||||
.projects-container,
|
||||
.hero-container {
|
||||
padding-bottom: 16px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 750px) {
|
||||
.timeline-container,
|
||||
.certs-container,
|
||||
.projects-container,
|
||||
.contact-container {
|
||||
padding: 16px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.hero-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.title-main {
|
||||
height: 3rem;
|
||||
font-size: 150%;
|
||||
width: 20rem;
|
||||
padding: 0.7rem 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.hero {
|
||||
border-radius: 0 0 30px 30px;
|
||||
}
|
||||
#contact {
|
||||
border-radius: 30px 30px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.certs-item a,
|
||||
.projects-item a,
|
||||
.certs-item,
|
||||
.projects-item,
|
||||
.skills-info,
|
||||
.hero-logo-icon,
|
||||
nav,
|
||||
.title-bubble,
|
||||
.contact-bubble,
|
||||
.contact-bubble img,
|
||||
.timeline-item {
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
158
static/portfolio/css/nav.css
Normal file
158
static/portfolio/css/nav.css
Normal file
@@ -0,0 +1,158 @@
|
||||
/* -------------- NAV --------------- */
|
||||
|
||||
.nav-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
background-color: transparent;
|
||||
height: 5.5rem;
|
||||
padding: 1rem;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #36363674;
|
||||
border-radius: 50rem;
|
||||
box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav-close {
|
||||
animation: navClose 0.2s ease-in;
|
||||
}
|
||||
|
||||
@keyframes navClose {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 3.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-open {
|
||||
animation: navOpen 0.2s ease-in;
|
||||
}
|
||||
|
||||
@keyframes navOpen {
|
||||
from {
|
||||
width: 3.55rem;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes navClosePC {
|
||||
from {
|
||||
width: 50%;
|
||||
}
|
||||
to {
|
||||
width: 3.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes navOpenPC {
|
||||
from {
|
||||
width: 3.55rem;
|
||||
}
|
||||
to {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
border-radius: 50%;
|
||||
background-color: #00000056;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#nav-container {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: flex;
|
||||
height: 90%;
|
||||
justify-items: center;
|
||||
margin-right: 0.1rem;
|
||||
margin-left: 0.3rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: flex;
|
||||
border-radius: 100rem;
|
||||
width: 3rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
nav li a img {
|
||||
filter: invert(96%) sepia(100%) saturate(15%) hue-rotate(126deg)
|
||||
brightness(108%) contrast(100%);
|
||||
}
|
||||
|
||||
nav li a:active {
|
||||
background: #00000073;
|
||||
}
|
||||
|
||||
li a:hover,
|
||||
.nav-logo:hover {
|
||||
background: #00000028;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hide {
|
||||
width: 3.55rem;
|
||||
}
|
||||
|
||||
.hide #nav-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menuAlt {
|
||||
background: #9a9a9a2f;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 750px) {
|
||||
.nav-container {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.nav-close {
|
||||
animation: navClosePC 0.2s ease-in;
|
||||
}
|
||||
|
||||
.nav-open {
|
||||
animation: navOpenPC 0.2s ease-in;
|
||||
}
|
||||
nav {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
120
static/portfolio/css/projects.css
Normal file
120
static/portfolio/css/projects.css
Normal file
@@ -0,0 +1,120 @@
|
||||
#projects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
background: url(../img/projectsbg.webp);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#projects .item-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.projects-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #ffffff54;
|
||||
border-radius: 1.2rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.projects-item:hover {
|
||||
transform: scale(102%);
|
||||
transition: 0.5s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.projects-item img {
|
||||
width: 100%;
|
||||
max-height: 30rem;
|
||||
border-radius: 0.6rem;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.projects-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.projects-item a {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #00000073;
|
||||
border-radius: 50rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 0px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.projects-item a:last-child {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.projects-item a:hover {
|
||||
background: #00000061;
|
||||
transform: scale(102%);
|
||||
transition: 0.4s;
|
||||
-webkit-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 42px -14px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 750px) {
|
||||
#projects .item-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 3rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#projects .item-container *:nth-child(1) {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
#projects .item-container *:nth-child(2) {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
#projects .item-container *:nth-child(4) {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
#projects .item-container *:nth-child(3) {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.projects-item {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.projects-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
.projects-item a:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
119
static/portfolio/css/timeline.css
Normal file
119
static/portfolio/css/timeline.css
Normal file
@@ -0,0 +1,119 @@
|
||||
#timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
background: url(../img/timelinebg.webp);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.checkpoint {
|
||||
max-width: 34em;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.checkpoint:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.checkpoint p {
|
||||
line-height: 27px;
|
||||
color: #ccc;
|
||||
background: #00000073;
|
||||
border-radius: 0.6rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.checkpoint .timeline-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #ffffff54;
|
||||
border-radius: 1.2rem;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
-webkit-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 48px -24px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.checkpoint:nth-child(odd) {
|
||||
border-left: 3px solid #ffffff64;
|
||||
padding-left: 3em;
|
||||
transform: translateX(17em);
|
||||
}
|
||||
|
||||
.checkpoint:nth-child(even) {
|
||||
border-right: 3px solid #ffffff64;
|
||||
padding-right: 3em;
|
||||
transform: translateX(-16.83em);
|
||||
}
|
||||
|
||||
.checkpoint:nth-child(even)::before,
|
||||
.checkpoint:nth-child(odd)::before {
|
||||
content: "";
|
||||
background: #ffffff64;
|
||||
width: 3em;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.checkpoint:nth-child(even)::before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.checkpoint:nth-child(odd)::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.checkpoint-item-bubble {
|
||||
height: 2rem;
|
||||
background: rgba(0, 0, 0, 0.298);
|
||||
border-radius: 99rem;
|
||||
text-align: center;
|
||||
padding: 0.4rem 0;
|
||||
color: white;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.timeline {
|
||||
width: 80vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline .checkpoint {
|
||||
width: 100%;
|
||||
transform: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.timeline .checkpoint::before {
|
||||
height: 2em;
|
||||
width: 3px;
|
||||
top: -1em;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.checkpoint:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkpoint:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user