diff --git a/config.yaml b/config.yaml index 0207eff..5caa83d 100644 --- a/config.yaml +++ b/config.yaml @@ -85,7 +85,7 @@ params: imageTitle: Trude Logo buttons: - name: My Portfolio - url: https://me.trude.dev + url: /portfolio/ - name: My Notes url: /notes/ diff --git a/static/portfolio/css/certs.css b/static/portfolio/css/certs.css new file mode 100644 index 0000000..b69e5b9 --- /dev/null +++ b/static/portfolio/css/certs.css @@ -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; + } +} diff --git a/static/portfolio/css/hero.css b/static/portfolio/css/hero.css new file mode 100644 index 0000000..d4ad10f --- /dev/null +++ b/static/portfolio/css/hero.css @@ -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; + } +} diff --git a/static/portfolio/css/main.css b/static/portfolio/css/main.css new file mode 100644 index 0000000..990c2a4 --- /dev/null +++ b/static/portfolio/css/main.css @@ -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); +} diff --git a/static/portfolio/css/nav.css b/static/portfolio/css/nav.css new file mode 100644 index 0000000..f2f21e7 --- /dev/null +++ b/static/portfolio/css/nav.css @@ -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%; + } +} diff --git a/static/portfolio/css/projects.css b/static/portfolio/css/projects.css new file mode 100644 index 0000000..caf3798 --- /dev/null +++ b/static/portfolio/css/projects.css @@ -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; + } +} diff --git a/static/portfolio/css/timeline.css b/static/portfolio/css/timeline.css new file mode 100644 index 0000000..482e747 --- /dev/null +++ b/static/portfolio/css/timeline.css @@ -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; + } +} diff --git a/static/portfolio/fonts/Roboto-Regular.ttf b/static/portfolio/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..ddf4bfa Binary files /dev/null and b/static/portfolio/fonts/Roboto-Regular.ttf differ diff --git a/static/portfolio/fonts/Yellowtail-Regular.ttf b/static/portfolio/fonts/Yellowtail-Regular.ttf new file mode 100644 index 0000000..985b974 Binary files /dev/null and b/static/portfolio/fonts/Yellowtail-Regular.ttf differ diff --git a/static/portfolio/img/CS50x-prev.webp b/static/portfolio/img/CS50x-prev.webp new file mode 100644 index 0000000..aa6482a Binary files /dev/null and b/static/portfolio/img/CS50x-prev.webp differ diff --git a/static/portfolio/img/CS50x.webp b/static/portfolio/img/CS50x.webp new file mode 100644 index 0000000..76082f7 Binary files /dev/null and b/static/portfolio/img/CS50x.webp differ diff --git a/static/portfolio/img/Star 3.svg b/static/portfolio/img/Star 3.svg new file mode 100644 index 0000000..3ab9327 --- /dev/null +++ b/static/portfolio/img/Star 3.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/portfolio/img/SubjectD.webp b/static/portfolio/img/SubjectD.webp new file mode 100644 index 0000000..32895f0 Binary files /dev/null and b/static/portfolio/img/SubjectD.webp differ diff --git a/static/portfolio/img/SubjectNoB.png b/static/portfolio/img/SubjectNoB.png new file mode 100644 index 0000000..90ff713 Binary files /dev/null and b/static/portfolio/img/SubjectNoB.png differ diff --git a/static/portfolio/img/TrudeLand.webp b/static/portfolio/img/TrudeLand.webp new file mode 100644 index 0000000..829967c Binary files /dev/null and b/static/portfolio/img/TrudeLand.webp differ diff --git a/static/portfolio/img/XPrism-screen.webp b/static/portfolio/img/XPrism-screen.webp new file mode 100644 index 0000000..deb4604 Binary files /dev/null and b/static/portfolio/img/XPrism-screen.webp differ diff --git a/static/portfolio/img/XPrism.png b/static/portfolio/img/XPrism.png new file mode 100644 index 0000000..2d1815f Binary files /dev/null and b/static/portfolio/img/XPrism.png differ diff --git a/static/portfolio/img/alternate_email_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/alternate_email_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..21d15c5 --- /dev/null +++ b/static/portfolio/img/alternate_email_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/android.svg b/static/portfolio/img/android.svg new file mode 100644 index 0000000..b0735ea --- /dev/null +++ b/static/portfolio/img/android.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/apple.svg b/static/portfolio/img/apple.svg new file mode 100644 index 0000000..bee34af --- /dev/null +++ b/static/portfolio/img/apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/blobs-l-829bda20bdb8793acfa2086c8d32f92ea02fbeaf.webp b/static/portfolio/img/blobs-l-829bda20bdb8793acfa2086c8d32f92ea02fbeaf.webp new file mode 100644 index 0000000..b028a9c Binary files /dev/null and b/static/portfolio/img/blobs-l-829bda20bdb8793acfa2086c8d32f92ea02fbeaf.webp differ diff --git a/static/portfolio/img/blobs-l-b49caff1a7941d98b60902da64956ad85dfbe4f9.webp b/static/portfolio/img/blobs-l-b49caff1a7941d98b60902da64956ad85dfbe4f9.webp new file mode 100644 index 0000000..24179de Binary files /dev/null and b/static/portfolio/img/blobs-l-b49caff1a7941d98b60902da64956ad85dfbe4f9.webp differ diff --git a/static/portfolio/img/bootstrap.svg b/static/portfolio/img/bootstrap.svg new file mode 100644 index 0000000..5f8e3b3 --- /dev/null +++ b/static/portfolio/img/bootstrap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/brain-solid.svg b/static/portfolio/img/brain-solid.svg new file mode 100644 index 0000000..be6c614 --- /dev/null +++ b/static/portfolio/img/brain-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/build_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/build_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..4809908 --- /dev/null +++ b/static/portfolio/img/build_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/build_FILL1_wght400_GRAD0_opsz24.svg b/static/portfolio/img/build_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..1fae355 --- /dev/null +++ b/static/portfolio/img/build_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/c-solid.svg b/static/portfolio/img/c-solid.svg new file mode 100644 index 0000000..101bb25 --- /dev/null +++ b/static/portfolio/img/c-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/call_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/call_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..ffdbe2a --- /dev/null +++ b/static/portfolio/img/call_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/call_FILL1_wght400_GRAD0_opsz24.svg b/static/portfolio/img/call_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..e8044be --- /dev/null +++ b/static/portfolio/img/call_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/certsbg.webp b/static/portfolio/img/certsbg.webp new file mode 100644 index 0000000..89e04df Binary files /dev/null and b/static/portfolio/img/certsbg.webp differ diff --git a/static/portfolio/img/code-solid.svg b/static/portfolio/img/code-solid.svg new file mode 100644 index 0000000..176467f --- /dev/null +++ b/static/portfolio/img/code-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/code_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/code_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..00ba3f1 --- /dev/null +++ b/static/portfolio/img/code_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/contactbg.webp b/static/portfolio/img/contactbg.webp new file mode 100644 index 0000000..52efa53 Binary files /dev/null and b/static/portfolio/img/contactbg.webp differ diff --git a/static/portfolio/img/css3-alt.svg b/static/portfolio/img/css3-alt.svg new file mode 100644 index 0000000..b8cf500 --- /dev/null +++ b/static/portfolio/img/css3-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/database-solid.svg b/static/portfolio/img/database-solid.svg new file mode 100644 index 0000000..1fbc4e6 --- /dev/null +++ b/static/portfolio/img/database-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/date_range_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/date_range_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..9e1dd98 --- /dev/null +++ b/static/portfolio/img/date_range_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/date_range_FILL1_wght400_GRAD0_opsz24.svg b/static/portfolio/img/date_range_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..edc6cd6 --- /dev/null +++ b/static/portfolio/img/date_range_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/dotfiles-logo.png b/static/portfolio/img/dotfiles-logo.png new file mode 100644 index 0000000..eadccf3 Binary files /dev/null and b/static/portfolio/img/dotfiles-logo.png differ diff --git a/static/portfolio/img/dragon_logo.svg b/static/portfolio/img/dragon_logo.svg new file mode 100644 index 0000000..8c0e5bc --- /dev/null +++ b/static/portfolio/img/dragon_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/git.svg b/static/portfolio/img/git.svg new file mode 100644 index 0000000..d3d3bc4 --- /dev/null +++ b/static/portfolio/img/git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/github.svg b/static/portfolio/img/github.svg new file mode 100644 index 0000000..afb1814 --- /dev/null +++ b/static/portfolio/img/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/herobg.webp b/static/portfolio/img/herobg.webp new file mode 100644 index 0000000..a9d242d Binary files /dev/null and b/static/portfolio/img/herobg.webp differ diff --git a/static/portfolio/img/home_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/home_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..57e3733 --- /dev/null +++ b/static/portfolio/img/home_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/home_FILL1_wght400_GRAD0_opsz24.svg b/static/portfolio/img/home_FILL1_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..f72fe70 --- /dev/null +++ b/static/portfolio/img/home_FILL1_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/html5.svg b/static/portfolio/img/html5.svg new file mode 100644 index 0000000..cd84c9d --- /dev/null +++ b/static/portfolio/img/html5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/laptop-solid.svg b/static/portfolio/img/laptop-solid.svg new file mode 100644 index 0000000..d43fa10 --- /dev/null +++ b/static/portfolio/img/laptop-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/license_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/license_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..2a03791 --- /dev/null +++ b/static/portfolio/img/license_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/linux.svg b/static/portfolio/img/linux.svg new file mode 100644 index 0000000..d9c45ba --- /dev/null +++ b/static/portfolio/img/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/lukas-xIk9zUKjekQ-unsplash.jpg b/static/portfolio/img/lukas-xIk9zUKjekQ-unsplash.jpg new file mode 100644 index 0000000..ee5b49c Binary files /dev/null and b/static/portfolio/img/lukas-xIk9zUKjekQ-unsplash.jpg differ diff --git a/static/portfolio/img/mDip-prev.webp b/static/portfolio/img/mDip-prev.webp new file mode 100644 index 0000000..cc8706c Binary files /dev/null and b/static/portfolio/img/mDip-prev.webp differ diff --git a/static/portfolio/img/mDip.webp b/static/portfolio/img/mDip.webp new file mode 100644 index 0000000..17b9145 Binary files /dev/null and b/static/portfolio/img/mDip.webp differ diff --git a/static/portfolio/img/pepper-hot-solid.svg b/static/portfolio/img/pepper-hot-solid.svg new file mode 100644 index 0000000..1947702 --- /dev/null +++ b/static/portfolio/img/pepper-hot-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/pfp.webp b/static/portfolio/img/pfp.webp new file mode 100644 index 0000000..fde1df0 Binary files /dev/null and b/static/portfolio/img/pfp.webp differ diff --git a/static/portfolio/img/projectsbg.webp b/static/portfolio/img/projectsbg.webp new file mode 100644 index 0000000..3f1989e Binary files /dev/null and b/static/portfolio/img/projectsbg.webp differ diff --git a/static/portfolio/img/python.svg b/static/portfolio/img/python.svg new file mode 100644 index 0000000..70836c1 --- /dev/null +++ b/static/portfolio/img/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/rust.svg b/static/portfolio/img/rust.svg new file mode 100644 index 0000000..271b059 --- /dev/null +++ b/static/portfolio/img/rust.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/sc1.webp b/static/portfolio/img/sc1.webp new file mode 100644 index 0000000..3ec30fd Binary files /dev/null and b/static/portfolio/img/sc1.webp differ diff --git a/static/portfolio/img/screwdriver-solid.svg b/static/portfolio/img/screwdriver-solid.svg new file mode 100644 index 0000000..4d4ce93 --- /dev/null +++ b/static/portfolio/img/screwdriver-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/scroll-solid.svg b/static/portfolio/img/scroll-solid.svg new file mode 100644 index 0000000..4f6a970 --- /dev/null +++ b/static/portfolio/img/scroll-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/server-solid.svg b/static/portfolio/img/server-solid.svg new file mode 100644 index 0000000..76a6773 --- /dev/null +++ b/static/portfolio/img/server-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/square-js.svg b/static/portfolio/img/square-js.svg new file mode 100644 index 0000000..1b1cb30 --- /dev/null +++ b/static/portfolio/img/square-js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/ssd_bg.webp b/static/portfolio/img/ssd_bg.webp new file mode 100644 index 0000000..b15dfb5 Binary files /dev/null and b/static/portfolio/img/ssd_bg.webp differ diff --git a/static/portfolio/img/timeline_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/static/portfolio/img/timeline_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..01c8bb7 --- /dev/null +++ b/static/portfolio/img/timeline_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/timelinebg.webp b/static/portfolio/img/timelinebg.webp new file mode 100644 index 0000000..e3f33bd Binary files /dev/null and b/static/portfolio/img/timelinebg.webp differ diff --git a/static/portfolio/img/trudedev.webp b/static/portfolio/img/trudedev.webp new file mode 100644 index 0000000..347eea6 Binary files /dev/null and b/static/portfolio/img/trudedev.webp differ diff --git a/static/portfolio/img/umberto-FewHpO4VC9Y-unsplash.jpg b/static/portfolio/img/umberto-FewHpO4VC9Y-unsplash.jpg new file mode 100644 index 0000000..4c38f0a Binary files /dev/null and b/static/portfolio/img/umberto-FewHpO4VC9Y-unsplash.jpg differ diff --git a/static/portfolio/img/windows.svg b/static/portfolio/img/windows.svg new file mode 100644 index 0000000..319a946 --- /dev/null +++ b/static/portfolio/img/windows.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/portfolio/img/wp6048908-sunset-minimal-wallpapers.jpg b/static/portfolio/img/wp6048908-sunset-minimal-wallpapers.jpg new file mode 100644 index 0000000..b8c52f2 Binary files /dev/null and b/static/portfolio/img/wp6048908-sunset-minimal-wallpapers.jpg differ diff --git a/static/portfolio/index.html b/static/portfolio/index.html new file mode 100644 index 0000000..4826c23 --- /dev/null +++ b/static/portfolio/index.html @@ -0,0 +1,243 @@ + + + + + + + TrudeWeb + + + + + + + + +
+ +
+
+
+
+

+ José Simões +

+

Software Developer

+
+ +
+
+ +
+
+
Certificates
+
+
+ +
+ Open Document + Visit Website +
+
+
+ +
+ Open Document + Visit Website +
+
+
+
+
+ +
+
+
Projects
+
+
+
+ XPrism - Desktop (EOL) +
+ +
+ Source Code + Visit Website +
+
+
+
trude.dev - Personal Blog
+ +
+ Source Code + Visit Website +
+
+
+
+ Dotfiles +
+ +
+ Source Code +
+
+
+
+ Wayland Desktop +
+ +
+ Source Code +
+
+
+
+
+
+
+
Timeline
+
+
+
+
2015
+

+ My journey began here. I was 10y old at the time, and I was + gifted an arduino, and some components. I soon started studying + C and the basics of electronics. +

+
+
+
+
+
2016-2020
+

+ During these years, I was busy with school, but I kept learning. + I eventually learned HTML, CSS, and got started with JavaScript, + Python, Bash and many other languages. I also switched to Linux + and began exploring as much as I could, while also learning more + about cybersecurity, and the core concepts of many other + languages, scripting, git and crypto. +

+
+
+
+
+
2020-2023
+

+ I eventually moved on to a professional course, now focused on + programming, and dove deeper into C and Linux. For the final + project of the course, I developed a desktop environment for X + (Linux display server), which allows the user to run and manage + graphical apps efficiently, while using as little resources as + possible.
+ I spent some time optimizing my workflow as well, trying to be + as productive as possible. +

+
+
+
+
+
2023-2024
+

+ After finishing the course, I decided to take CS50, and + completed it a few months later, gaining a much deeper knowledge + of computer science, C, and low-level programming. I then + created my own websites: A blog, and this web portfolio. +
+ I kept developing my desktop environment and mantaining a few + tools to easily configure new Linux systems as well. +

+
+
+
+
+
2024-Now
+

+ For the last few months, I kept maintaining my previous + projects, got my driving license, and now I am developing some + new projects, as well as studying lower level CS concepts. +

+
+
+
+
+
+
+
+
Contact Me
+
+ Email + Email +
+
+
+ + + + diff --git a/static/portfolio/index.js b/static/portfolio/index.js new file mode 100644 index 0000000..20d20fe --- /dev/null +++ b/static/portfolio/index.js @@ -0,0 +1,20 @@ +const navElements = document.querySelectorAll("nav #nav-container a"); +pointer = 1; + +function menuToggle(x) { + if (x.classList.contains("menuAlt")) { + document.getElementById("nav").classList.add("nav-open"); + setTimeout(() => { + document.getElementById("nav").classList.remove("nav-open"); + document.getElementById("nav-container").style.display = "flex"; + }, 200); + } else { + document.getElementById("nav").classList.add("nav-close"); + document.getElementById("nav-container").style.display = "none"; + setTimeout(() => { + document.getElementById("nav").classList.remove("nav-close"); + }, 200); + } + x.classList.toggle("menuAlt"); + document.getElementById("nav").classList.toggle("hide"); +}