diff options
| -rw-r--r-- | about-en.html | 50 | ||||
| -rw-r--r-- | about.html | 54 | ||||
| -rw-r--r-- | index-en.html | 102 | ||||
| -rw-r--r-- | index.html | 107 | ||||
| -rw-r--r-- | package.json | 24 | ||||
| -rw-r--r-- | sass/abstracts/_variables.scss | 2 | ||||
| -rw-r--r-- | sass/base/_typography.scss | 1 | ||||
| -rw-r--r-- | sass/components/_project-container.scss | 4 | ||||
| -rw-r--r-- | sass/components/_text-container.scss | 2 | ||||
| -rw-r--r-- | sass/layout/_main-sections.scss | 5 | ||||
| -rw-r--r-- | style.css | 489 |
11 files changed, 249 insertions, 591 deletions
diff --git a/about-en.html b/about-en.html index 98eda1b..8747f8f 100644 --- a/about-en.html +++ b/about-en.html @@ -32,35 +32,49 @@ <body> <!-- NAVBAR --> <header> - <nav> + <nav role="navigation"> <ul> <li> - <a href="index-en.html"><h1>Arne Rief</h1></a> + <a href="index-en.html" aria-label="Back to main page" + ><h1>Arne Rief</h1></a + > </li> - <li><a href="about-en.html">About me</a></li> - <li><a href="index-en.html#projects">Projects</a></li> - <li><a href="index-en.html#contact">Contact</a></li> + <li><a href="about-en.html" aria-label="About page">About me</a></li> <li> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a href="index-en.html#projects" aria-label="Projects">Projects</a> + </li> + <li> + <a href="index-en.html#contact" aria-label="Contact me">Contact</a> + </li> + <li> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="My LinkedIn Profile" ><i class="fa-brands fa-linkedin"></i ></a> </li> <li> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="My Github Account" ><i class="fa-brands fa-github"></i ></a> </li> - <li><a href="about.html">🇩🇪</a></li> + <li> + <a href="about.html" aria-label="Switch to German language">🇩🇪</a> + </li> </ul> </nav> </header> <main> <section class="about-section"> - <div class="portrait-container"> + <figure class="portrait-container"> <img src="images/portrait.JPG" alt="Arne Rief" /> - </div> - <div class="text-container text-about"> + </figure> + <article class="text-container text-about"> <p> Hi, my name is <span class="text-emphasis">Arne Rief</span>. Originally I studied history with the goal of an academic career in @@ -85,7 +99,7 @@ <span class="text-emphasis">new challenges</span> and I look forward to hearing from you! </p> - </div> + </article> </section> </main> @@ -95,19 +109,25 @@ <dl> <dt>LinkedIn:</dt> <dd> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="My LinkedIn Profile" ><i class="fa-brands fa-linkedin big-icon"></i ></a> </dd> <dt>Github:</dt> <dd> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="My Github Account" ><i class="fa-brands fa-github big-icon"></i ></a> </dd> <dt>Email:</dt> <dd> - <a href="#contact"> + <a href="#contact" aria-label="To the contact form"> <i class="fa-solid fa-envelope big-icon"></i ></a> </dd> @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="de"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> @@ -32,35 +32,51 @@ <body> <!-- NAVBAR --> <header> - <nav> + <nav role="navigation"> <ul> <li> - <a href="index.html"><h1>Arne Rief</h1></a> + <a href="index.html" aria-label="Zurück zur Hauptseite" + ><h1>Arne Rief</h1></a + > + </li> + <li> + <a href="about.html" aria-label="Über mich Infoseite">Über mich</a> + </li> + <li> + <a href="index.html#projects" aria-label="Projekte">Projekte</a> </li> - <li><a href="about.html">Über mich</a></li> - <li><a href="index.html#projects">Projekte</a></li> - <li><a href="index.html#contact">Kontakt</a></li> + <li><a href="index.html#contact" aria-label="Kontakt">Kontakt</a></li> <li> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" ><i class="fa-brands fa-linkedin"></i ></a> </li> <li> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" ><i class="fa-brands fa-github"></i ></a> </li> - <li><a href="about-en.html">🇬🇧</a></li> + <li> + <a href="about-en.html" aria-label="Switch to English language" + >🇬🇧</a + > + </li> </ul> </nav> </header> <main> <section class="about-section"> - <div class="portrait-container"> + <figure class="portrait-container"> <img src="images/portrait.JPG" alt="Arne Rief" /> - </div> - <div class="text-container text-about"> + </figure> + <article class="text-container text-about"> <p> Hallo, mein Name ist <span class="text-emphasis">Arne Rief</span>. Ursprünglich hatte ich eine akademische Karriere als @@ -87,7 +103,7 @@ ich immer offen und bereit. Ich freue mich darauf, von Ihnen zu hören! </p> - </div> + </article> </section> </main> @@ -97,19 +113,25 @@ <dl> <dt>LinkedIn:</dt> <dd> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" ><i class="fa-brands fa-linkedin big-icon"></i ></a> </dd> <dt>Github:</dt> <dd> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" ><i class="fa-brands fa-github big-icon"></i ></a> </dd> <dt>Email:</dt> <dd> - <a href="#contact"> + <a href="#contact" aria-label="Zur Kontaktform"> <i class="fa-solid fa-envelope big-icon"></i ></a> </dd> diff --git a/index-en.html b/index-en.html index aed786b..8b90419 100644 --- a/index-en.html +++ b/index-en.html @@ -32,25 +32,39 @@ <body> <!-- NAVBAR --> <header> - <nav> + <nav role="navigation"> <ul> <li> - <a href="index-en.html"><h1>Arne Rief</h1></a> + <a href="index-en.html" aria-label="Back to main page" + ><h1>Arne Rief</h1></a + > </li> - <li><a href="about-en.html">About me</a></li> - <li><a href="#projects">Projects</a></li> - <li><a href="#contact">Contact</a></li> + <li><a href="about-en.html" aria-label="About page">About me</a></li> <li> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a href="index-en.html#projects" aria-label="Projects">Projects</a> + </li> + <li> + <a href="index-en.html#contact" aria-label="Contact me">Contact</a> + </li> + <li> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="My LinkedIn Profile" ><i class="fa-brands fa-linkedin"></i ></a> </li> <li> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="My Github Account" ><i class="fa-brands fa-github"></i ></a> </li> - <li><a href="index.html">🇩🇪</a></li> + <li> + <a href="index.html" aria-label="Switch to German language">🇩🇪</a> + </li> </ul> </nav> </header> @@ -62,18 +76,25 @@ Hello, I'm <span class="name">Arne</span>. <br /> <span class="subtitle">Welcome to my web page! 👋🏻</span> </h2> - <p class="welcome-intro"> - I am a - <span class="text-emphasis">full-stack web developer</span> with a - passion for learning, logic and combining both in order to create - meaningful and beautiful web applications. Currently I am focusing on - frontend development; my programming skills include - <span class="text-emphasis">JavaScript, React, HTML, CSS, Sass</span> - as well as <span class="text-emphasis">Node.js, Express.js</span> and - working with databases like - <span class="text-emphasis">MySQL</span> and - <span class="text-emphasis">MongoDB</span>. - </p> + <article class="welcome-intro"> + <p> + I am a + <span class="text-emphasis">full-stack web developer</span> with a + passion for learning, logic and combining both in order to create + meaningful and beautiful web applications. + </p> + <p> + Currently I am focusing on frontend development; my programming + skills include + <span class="text-emphasis" + >JavaScript, React, HTML, CSS, Sass</span + > + as well as + <span class="text-emphasis">Node.js, Express.js</span> and working + with databases like <span class="text-emphasis">MySQL</span> and + <span class="text-emphasis">MongoDB</span>. + </p> + </article> </section> <!-- PROJECTS --> @@ -85,19 +106,21 @@ alt="A screenshot of a Note Book user's book collection page" class="project-screenshot" /> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">Note Book</h3> <p> <a href="https://the-note-book.netlify.app/" target="_blank" class="text-link" + aria-label="Live demo of Note Book at Netlify" >Website</a > | <a href="https://github.com/Arrief/note-book" target="_blank" class="text-link" + aria-label="The Github repository for Note Book" >GitHub Code</a > </p> @@ -120,24 +143,26 @@ >React, JavaScript, Node.js, Express.js, MySQL, HTML & CSS</span > </p> - </div> + </article> </div> <!-- reverse order class for smaller screen sizes --> <div class="project-container"> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">All In Trips</h3> <p> <a href="https://all-in-trips.netlify.app/" target="_blank" class="text-link" + aria-label="Live demo of All In Trips at Netlify" >Website</a > | <a href="https://github.com/Arrief/All-In-Trips" target="_blank" class="text-link" + aria-label="The Github repository for All In Trips" >GitHub Code</a > </p> @@ -164,7 +189,7 @@ >React, JavaScript, 5 APIs, HTML & CSS</span > </p> - </div> + </article> <img src="images/screenshot-all-in-trips.png" alt="A screenshot of a All In Trips' landing page" @@ -178,7 +203,7 @@ alt="A screenshot of a MiAuriga's landing page" class="project-screenshot" /> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">MiAuriga</h3> <p class="note-auriga"> Website and repository are property of Auriga @@ -203,7 +228,7 @@ CSS</span > </p> - </div> + </article> </div> </section> @@ -216,19 +241,21 @@ class="messenger-form" > <div> - <label for="name">First Name:</label> + <label for="first-name">First Name:</label> <input type="text" - name="name" + id="first-name" + name="first-name" placeholder="Your name..." required /> </div> <div> - <label for="name">Last Name:</label> + <label for="last-name">Last Name:</label> <input type="text" - name="name" + id="last-name" + name="last-name" placeholder="Your last name..." required /> @@ -237,6 +264,7 @@ <label for="email">Email:</label> <input type="email" + id="email" name="email" placeholder="Your email address..." required @@ -246,6 +274,7 @@ <label for="subject">Subject:</label> <input type="text" + id="subject" name="subject" placeholder="Subject..." required @@ -255,6 +284,7 @@ <label for="message">Message:</label> <textarea rows="20" + id="message" name="message" placeholder="Your message..." required @@ -273,19 +303,25 @@ <dl> <dt>LinkedIn:</dt> <dd> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="My LinkedIn Profile" ><i class="fa-brands fa-linkedin big-icon"></i ></a> </dd> <dt>Github:</dt> <dd> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="My Github Account" ><i class="fa-brands fa-github big-icon"></i ></a> </dd> <dt>Email:</dt> <dd> - <a href="#contact"> + <a href="#contact" aria-label="To the contact form"> <i class="fa-solid fa-envelope big-icon"></i ></a> </dd> @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="de"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> @@ -32,25 +32,41 @@ <body> <!-- NAVBAR --> <header> - <nav> + <nav role="navigation"> <ul> <li> - <a href="index.html"><h1>Arne Rief</h1></a> + <a href="index.html" aria-label="Zurück zur Hauptseite" + ><h1>Arne Rief</h1></a + > </li> - <li><a href="about.html">Über mich</a></li> - <li><a href="#projects">Projekte</a></li> - <li><a href="#contact">Kontakt</a></li> <li> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a href="about.html" aria-label="Über mich Infoseite">Über mich</a> + </li> + <li> + <a href="index.html#projects" aria-label="Projekte">Projekte</a> + </li> + <li><a href="index.html#contact" aria-label="Kontakt">Kontakt</a></li> + <li> + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" ><i class="fa-brands fa-linkedin"></i ></a> </li> <li> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" ><i class="fa-brands fa-github"></i ></a> </li> - <li><a href="index-en.html">🇬🇧</a></li> + <li> + <a href="index-en.html" aria-label="Switch to English language" + >🇬🇧</a + > + </li> </ul> </nav> </header> @@ -62,19 +78,25 @@ Hallo, ich bin <span class="name">Arne</span>. <br /> <span class="subtitle">Willkommen auf meiner Website! 👋🏻</span> </h2> - <p class="welcome-intro"> - Ich bin ein - <span class="text-emphasis">Full Stack Webentwickler</span> und nutze - meine Leidenschaft für Lernen und Logik, um sinnvolle und ansprechende - Webapplikationen zu schaffen. Momentan konzentriere ich mich auf die - Frontend Entwicklung, meine Programmierkenntnisse umfassen - <span class="text-emphasis" - >JavaScript, React, HTML, CSS und Sass</span - >, ebenso wie - <span class="text-emphasis">Node.js, Express.js</span> und die Arbeit - mit Datenbanken wie <span class="text-emphasis">MySQL</span> und - <span class="text-emphasis">MongoDB</span>. - </p> + <article class="welcome-intro"> + <p> + Ich bin ein + <span class="text-emphasis">Full Stack Webentwickler</span> und + nutze meine Leidenschaft für Lernen und Logik, um sinnvolle und + ansprechende Webapplikationen zu schaffen. + </p> + <p> + Momentan konzentriere ich mich auf die Frontend Entwicklung, meine + Programmierkenntnisse umfassen + <span class="text-emphasis" + >JavaScript, React, HTML, CSS und Sass</span + >, ebenso wie + <span class="text-emphasis">Node.js, Express.js</span> und die + Arbeit mit Datenbanken wie + <span class="text-emphasis">MySQL</span> und + <span class="text-emphasis">MongoDB</span>. + </p> + </article> </section> <!-- PROJECTS --> @@ -86,19 +108,21 @@ alt="Ein Screenshot der Büchersammlung eines Note Book Nutzers" class="project-screenshot" /> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">Note Book</h3> <p> <a href="https://the-note-book.netlify.app/" target="_blank" class="text-link" + aria-label="Note Book live auf Netlify" >Website</a > | <a href="https://github.com/Arrief/note-book" target="_blank" class="text-link" + aria-label="Github Repository für Note Book" >GitHub Code</a > </p> @@ -122,24 +146,26 @@ >React, JavaScript, Node.js, Express.js, MySQL, HTML & CSS</span > </p> - </div> + </article> </div> <!-- reverse order class for smaller screen sizes --> <div class="project-container"> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">All In Trips</h3> <p> <a href="https://all-in-trips.netlify.app/" target="_blank" class="text-link" + aria-label="All In Trips live auf Netlify" >Website</a > | <a href="https://github.com/Arrief/All-In-Trips" target="_blank" class="text-link" + aria-label="Github Repository für All In Trips" >GitHub Code</a > </p> @@ -165,7 +191,7 @@ >React, JavaScript, 5 APIs, HTML & CSS</span > </p> - </div> + </article> <img src="images/screenshot-all-in-trips.png" alt="Ein Screenshot der Startseite von All In Trips" @@ -179,7 +205,7 @@ alt="Ein Screenshot der Startseite von MiAuriga" class="project-screenshot" /> - <div class="text-container"> + <article class="text-container"> <h3 class="subtitle">MiAuriga</h3> <p class="note-auriga">Website und Code sind Eigentum von Auriga</p> <p> @@ -203,7 +229,7 @@ CSS</span > </p> - </div> + </article> </div> </section> @@ -216,19 +242,21 @@ class="messenger-form" > <div> - <label for="name">Vorname:</label> + <label for="first-name">Vorname:</label> <input type="text" - name="name" + id="first-name" + name="first-name" placeholder="Ihr Vorname..." required /> </div> <div> - <label for="name">Nachname:</label> + <label for="last-name">Nachname:</label> <input type="text" - name="name" + id="last-name" + name="last-name" placeholder="Ihr Nachname..." required /> @@ -237,6 +265,7 @@ <label for="email">Email:</label> <input type="email" + id="email" name="email" placeholder="Ihre Email Adresse..." required @@ -246,6 +275,7 @@ <label for="subject">Betreff:</label> <input type="text" + id="subject" name="subject" placeholder="Betreff..." required @@ -255,6 +285,7 @@ <label for="message">Nachricht:</label> <textarea rows="20" + id="message" name="message" placeholder="Ihre Nachricht..." required @@ -273,19 +304,25 @@ <dl> <dt>LinkedIn:</dt> <dd> - <a href="https://linkedin.com/in/arne-rief" target="_blank" + <a + href="https://linkedin.com/in/arne-rief" + target="_blank" + aria-label="Mein LinkedIn Profil" ><i class="fa-brands fa-linkedin big-icon"></i ></a> </dd> <dt>Github:</dt> <dd> - <a href="https://github.com/Arrief" target="_blank" + <a + href="https://github.com/Arrief" + target="_blank" + aria-label="Mein Github Account" ><i class="fa-brands fa-github big-icon"></i ></a> </dd> <dt>Email:</dt> <dd> - <a href="#contact"> + <a href="#contact" aria-label="Zur Kontaktform"> <i class="fa-solid fa-envelope big-icon"></i ></a> </dd> diff --git a/package.json b/package.json new file mode 100644 index 0000000..e1b7d54 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "arne-rief-portfolio-page", + "version": "1.0.0", + "description": "This is my portfolio website, built with HTML and Sass.", + "main": "index.html", + "scripts": { + "build": "npx sass sass/main.scss style.css" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Arrief/portfolio-page.git" + }, + "keywords": [ + "portfolio", + "web developer", + "sass" + ], + "author": "Arne Rief", + "license": "ISC", + "bugs": { + "url": "https://github.com/Arrief/portfolio-page/issues" + }, + "homepage": "https://github.com/Arrief/portfolio-page#readme" +} diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss index 5aea3e6..aa94d9f 100644 --- a/sass/abstracts/_variables.scss +++ b/sass/abstracts/_variables.scss @@ -14,6 +14,6 @@ $medium-text-mobile: 1.3rem; $small-text: 1.1rem; // layout -$margin-main: 3rem 4rem 2rem 4rem; +$margin-main: 3rem 1rem 2rem 1rem; $margin-mobile: 2rem; $radius-text-container: 10px; diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index 38f3a3f..4c02e20 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -2,6 +2,7 @@ .text-link { color: $text-special-dark; + transition: all 0.2s; &:hover { background-color: $text-special-dark; diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss index ae4b841..41ef550 100644 --- a/sass/components/_project-container.scss +++ b/sass/components/_project-container.scss @@ -1,7 +1,9 @@ @use "../abstracts/" as *; .project-container { - @include flex-sp-around-center; + display: flex; + align-items: center; + justify-content: space-between; gap: 2rem; // mobile to smaller laptop screen sizes diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss index ea3a2fc..4912429 100644 --- a/sass/components/_text-container.scss +++ b/sass/components/_text-container.scss @@ -18,7 +18,7 @@ padding: 1rem; } - // margin between paragraphs but not below the last paragraph + // spacing between paragraphs but not below the last paragraph & p:not(:last-child) { margin-bottom: 1.5rem; } diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss index 190d020..ad78012 100644 --- a/sass/layout/_main-sections.scss +++ b/sass/layout/_main-sections.scss @@ -36,6 +36,11 @@ border-radius: $radius-text-container; outline: 3px solid $text-special-dark; outline-offset: 1rem; + + // spacing between paragraphs but not below the last paragraph + p:not(:last-child) { + margin-bottom: 1rem; + } } } diff --git a/style.css b/style.css deleted file mode 100644 index 520ecfa..0000000 --- a/style.css +++ /dev/null @@ -1,489 +0,0 @@ -@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; -} -@media screen and (max-width: 600px) { - main { - margin: 2rem 0.5rem; - } -} - -::selection { - background-color: #ececec; - color: #252424; -} - -.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; -} -@media screen and (max-width: 980px) { - nav { - height: fit-content; - } -} -nav ul { - display: flex; - align-items: center; - justify-content: flex-end; - height: 100%; - list-style-type: none; - padding: 0 3rem; - width: 100%; -} -@media screen and (max-width: 980px) { - nav ul { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; - padding: 1.5rem 0; - } -} -nav li:first-child { - text-align: left; - margin-right: auto; -} -@media screen and (max-width: 980px) { - nav li:first-child { - text-align: center; - margin-right: 1.5rem; - } -} -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 li a { - font-size: 2rem; - } -} - -.about-section { - display: flex; - align-items: center; - justify-content: space-around; - margin: 3rem auto; -} -@media screen and (max-width: 1400px) { - .about-section { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 8rem auto; - width: 80%; - } -} -@media screen and (max-width: 600px) { - .about-section { - 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%; -} -@media screen and (max-width: 1400px) { - .welcome-section { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4rem; - margin: 8rem auto; - width: 80%; - } -} -@media screen and (max-width: 600px) { - .welcome-section { - margin: 3rem auto; - } -} -.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; -} -@media screen and (max-width: 1400px) { - .projects-section { - margin: 8rem auto; - width: 80%; - } -} -@media screen and (max-width: 600px) { - .projects-section { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 8rem 0; - width: 100%; - } -} - -.contact-section { - margin: 10rem auto; - width: 80%; -} -.contact-section h2 { - margin-bottom: 5rem; -} -@media screen and (max-width: 1400px) { - .contact-section { - margin: 8rem auto; - width: 80%; - } -} -@media screen and (max-width: 600px) { - .contact-section { - margin: 3rem auto; - } -} - -footer { - background-color: #173d5a; - width: 100vw; -} -footer * { - margin: 3rem 4rem 2rem 4rem; -} -@media screen and (max-width: 600px) { - footer * { - margin: 2rem; - } -} -footer dl { - display: flex; - justify-content: center; - align-items: center; - height: 2rem; -} -@media screen and (max-width: 600px) { - footer dl { - flex-direction: column; - height: max-content; - } -} -footer dl * { - color: inherit; - font-size: 1.5rem; - margin: 0.5rem; - transition: transform 0.3s; -} -@media screen and (max-width: 600px) { - footer dl * { - font-size: 1.3rem; - margin: 0.3rem; - } -} -footer dl dd i:hover { - color: #ecbf4b; - transform: translateY(-0.3rem); -} -footer p { - text-align: center; -} -footer .big-icon { - font-size: 2rem; -} - -.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%; -} -@media screen and (max-width: 1400px) { - .text-container { - transform: skewX(0); - width: auto; - } -} -@media screen and (max-width: 600px) { - .text-container { - padding: 1rem; - } -} -.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: 1400px) { - .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: 1400px) { - .project-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 5rem; - /* - important for second project, otherwise screenshot below text-container; - could be done with separate class for 2nd project and flex-dir: col-reverse for media query too - */ - } - .project-container > img { - order: -1; - } -} - -.project-screenshot { - border-radius: 10px; - outline: 5px solid #e79759; - outline-offset: 1.5rem; - object-fit: scale-down; - width: 40%; - transition: transform 0.6s ease; -} -@media screen and (max-width: 1400px) { - .project-screenshot { - width: 80%; - } -} -.project-screenshot:hover { - transform: scale(1.2); - z-index: 100; -} - -.messenger-form { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - justify-content: center; - gap: 2rem; - width: 50%; -} -@media screen and (max-width: 1400px) { - .messenger-form { - width: 100%; - } -} -.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: 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; -} |