summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css430
1 files changed, 430 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7042fc6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,430 @@
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-10rem);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(10rem) skewX(-12deg);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0) skewX(-12deg);
+ }
+}
+
+@keyframes moveInRightMobile {
+ 0% {
+ opacity: 0;
+ transform: translateX(10rem);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+*,
+*::after,
+*::before {
+ box-sizing: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body {
+ min-height: 100vh;
+ width: 100vw;
+}
+
+body {
+ background: linear-gradient(
+ 45deg,
+ rgba(2, 48, 89, 0.89) 0%,
+ rgba(9, 61, 94, 0.84) 100%
+ );
+ background-repeat: no-repeat;
+ background-size: cover;
+ box-sizing: border-box;
+ color: #ececec;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ font-family: "Inter", sans-serif;
+ font-size: 1.1rem;
+ line-height: 1.5;
+}
+
+main {
+ height: 100%;
+ margin: 3rem 4rem 2rem 4rem;
+}
+main * {
+ animation: fade-in 2s ease-out;
+}
+
+.text-link {
+ color: #e79759;
+}
+.text-link:hover {
+ background-color: #e79759;
+ border-radius: 2px;
+ color: #252424;
+ text-decoration: none;
+}
+
+.text-emphasis {
+ color: #ecbf4b;
+ font-weight: bold;
+}
+
+.title {
+ font-family: "Archivo Black", sans-serif;
+ color: #ecbf4b;
+ font-size: 2rem;
+ width: fit-content;
+}
+
+.subtitle {
+ font-family: "Archivo Black", sans-serif;
+ color: #e79759;
+ font-size: 1.5rem;
+}
+
+.name {
+ font-size: 4rem;
+}
+
+.note-auriga {
+ color: #e79759;
+ font-style: italic;
+}
+
+nav {
+ background-color: #173d5a;
+ font-family: "Archivo Black", sans-serif;
+ height: 10vh;
+ width: 100vw;
+}
+nav ul {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ height: 100%;
+ list-style-type: none;
+ padding: 0 3rem;
+ width: 100%;
+}
+nav li:first-child {
+ text-align: left;
+ margin-right: auto;
+}
+nav li a {
+ display: block;
+ color: inherit;
+ font-size: 1.5rem;
+ padding: 0 1.5rem;
+ text-align: center;
+ transition: transform 0.3s;
+ text-decoration: none;
+ white-space: nowrap;
+}
+nav li a:hover {
+ color: #ecbf4b;
+ transform: translateY(-0.3rem);
+}
+
+@media screen and (max-width: 980px) {
+ nav {
+ height: fit-content;
+ }
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ padding: 0;
+ }
+ nav li a {
+ font-size: 2rem;
+ }
+ nav li:first-child {
+ text-align: center;
+ margin-right: 1.5rem;
+ }
+}
+.about-section {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ margin: 3rem auto;
+}
+
+.welcome-section {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ justify-content: center;
+ gap: 8rem;
+ margin: 3rem auto;
+ width: 60%;
+}
+.welcome-section .welcome-intro {
+ border-radius: 10px;
+ outline: 3px solid #e79759;
+ outline-offset: 1rem;
+}
+
+.projects-section {
+ margin: 10rem auto;
+ width: 80%;
+}
+.projects-section h2 {
+ margin-bottom: 5rem;
+}
+.projects-section > div:not(:nth-child(2)) {
+ margin-top: 10rem;
+}
+
+.contact-section {
+ margin: 10rem auto;
+ width: 80%;
+}
+.contact-section h2 {
+ margin-bottom: 5rem;
+}
+
+@media screen and (max-width: 1380px) {
+ .about-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 8rem auto;
+ width: 80%;
+ }
+ .welcome-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 4rem;
+ margin: 8rem auto;
+ width: 80%;
+ }
+ .projects-section {
+ margin: 8rem auto;
+ width: 80%;
+ }
+ .contact-section {
+ margin: 8rem auto;
+ width: 80%;
+ }
+}
+footer {
+ background-color: #173d5a;
+ width: 100vw;
+}
+footer * {
+ margin: 3rem 4rem 2rem 4rem;
+}
+footer dl {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 2rem;
+}
+footer dl * {
+ color: inherit;
+ font-size: 1.5rem;
+ margin: 0.5rem;
+ transition: transform 0.3s;
+}
+footer dl dd i:hover {
+ color: #ecbf4b;
+ transform: translateY(-0.3rem);
+}
+footer p {
+ text-align: center;
+}
+footer .big-icon {
+ font-size: 2rem;
+}
+
+@media screen and (max-width: 520px) {
+ footer * {
+ margin: 2rem;
+ }
+ footer dl {
+ flex-direction: column;
+ height: max-content;
+ }
+ footer dl * {
+ font-size: 1.3rem;
+ margin: 0.3rem;
+ }
+}
+.text-container {
+ background-color: #173d5a;
+ border-radius: 10px;
+ box-shadow: 0 2rem 3.5rem rgba(0, 0, 0, 0.6);
+ padding: 3.5rem;
+ transform: skewX(-12deg);
+ width: 50%;
+}
+.text-container p:not(:last-child) {
+ margin-bottom: 1.5rem;
+}
+
+.text-about {
+ animation: moveInRight 2s ease-out;
+ backface-visibility: hidden;
+}
+
+@media screen and (max-width: 1380px) {
+ .text-container {
+ transform: skewX(0);
+ width: auto;
+ }
+ .text-about {
+ animation: moveInRightMobile 2s ease-out;
+ margin-top: 5rem;
+ }
+}
+.portrait-container {
+ height: 50vh;
+ width: fit-content;
+ animation: moveInLeft 2s ease-out;
+ backface-visibility: hidden;
+}
+.portrait-container img {
+ border-radius: 25px;
+ height: 100%;
+ width: 100%;
+ object-fit: scale-down;
+}
+
+.project-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ gap: 2rem;
+}
+
+@media screen and (max-width: 1380px) {
+ .project-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5rem;
+ }
+ .reverse-order {
+ flex-direction: column-reverse;
+ }
+}
+.project-screenshot {
+ border-radius: 10px;
+ outline: 5px solid #e79759;
+ outline-offset: 1.5rem;
+ object-fit: scale-down;
+ width: 40%;
+ transition: transform 0.6s ease;
+}
+.project-screenshot:hover {
+ transform: scale(1.2);
+ z-index: 100;
+}
+
+@media screen and (max-width: 1380px) {
+ .project-screenshot {
+ width: 80%;
+ }
+}
+.messenger-form {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ justify-content: center;
+ gap: 2rem;
+ width: 50%;
+}
+.messenger-form div {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: column;
+ gap: 1rem;
+}
+.messenger-form div.text-area {
+ grid-column: 1/3;
+}
+.messenger-form label {
+ font-weight: bold;
+}
+.messenger-form input,
+.messenger-form textarea {
+ background-color: #ececec;
+ border: none;
+ border-radius: 10px;
+ padding: 0.5rem;
+ width: 100%;
+}
+.messenger-form input:focus,
+.messenger-form textarea:focus {
+ color: #ececec;
+ background-color: #173d5a;
+ outline: 3px solid #e79759;
+}
+
+@media screen and (max-width: 1380px) {
+ .messenger-form {
+ width: 100%;
+ }
+}
+@media screen and (max-width: 820px) {
+ .messenger-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ }
+ .messenger-form div {
+ width: 100%;
+ }
+}
+button {
+ color: #252424;
+ background-color: #ecbf4b;
+ border: none;
+ border-radius: 10px;
+ font-style: inherit;
+ font-weight: bold;
+ padding: 0.7rem;
+ text-transform: uppercase;
+ width: 8rem;
+}
+button:hover {
+ background-color: #e79759;
+}
+button:active {
+ outline: 3px solid #252424;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-24 21:23:15 +0000