From 5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Fri, 10 Feb 2023 21:40:00 +0100 Subject: Desktop version --- about-en.html | 118 ++++++++++++ about.html | 120 ++++++++++++ images/portrait.JPG | Bin 0 -> 775518 bytes images/screenshot-all-in-trips.png | Bin 0 -> 1861342 bytes images/screenshot-auriga.png | Bin 0 -> 1136748 bytes images/screenshot-note-book.png | Bin 0 -> 2486486 bytes index-en.html | 295 +++++++++++++++++++++++++++++ index.html | 295 +++++++++++++++++++++++++++++ sass/abstracts/_animations.scss | 32 ++++ sass/abstracts/_index.scss | 3 + sass/abstracts/_mixins.scss | 32 ++++ sass/abstracts/_variables.scss | 19 ++ sass/base/_base.scss | 43 +++++ sass/base/_typography.scss | 39 ++++ sass/components/_button.scss | 21 ++ sass/components/_contact-form.scss | 40 ++++ sass/components/_portrait-container.scss | 15 ++ sass/components/_project-container.scss | 6 + sass/components/_screenshot-container.scss | 15 ++ sass/components/_text-container.scss | 20 ++ sass/layout/_footer.scss | 60 ++++++ sass/layout/_main-sections.scss | 32 ++++ sass/layout/_nav.scss | 61 ++++++ sass/main.scss | 13 ++ 24 files changed, 1279 insertions(+) create mode 100644 about-en.html create mode 100644 about.html create mode 100755 images/portrait.JPG create mode 100755 images/screenshot-all-in-trips.png create mode 100644 images/screenshot-auriga.png create mode 100644 images/screenshot-note-book.png create mode 100644 index-en.html create mode 100644 index.html create mode 100644 sass/abstracts/_animations.scss create mode 100644 sass/abstracts/_index.scss create mode 100644 sass/abstracts/_mixins.scss create mode 100644 sass/abstracts/_variables.scss create mode 100644 sass/base/_base.scss create mode 100644 sass/base/_typography.scss create mode 100644 sass/components/_button.scss create mode 100644 sass/components/_contact-form.scss create mode 100644 sass/components/_portrait-container.scss create mode 100644 sass/components/_project-container.scss create mode 100644 sass/components/_screenshot-container.scss create mode 100644 sass/components/_text-container.scss create mode 100644 sass/layout/_footer.scss create mode 100644 sass/layout/_main-sections.scss create mode 100644 sass/layout/_nav.scss create mode 100644 sass/main.scss diff --git a/about-en.html b/about-en.html new file mode 100644 index 0000000..94a2e26 --- /dev/null +++ b/about-en.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + Arne Rief - Web Developer + + + +
+ +
+ +
+
+
+ Arne Rief +
+
+

+ Hi, my name is Arne Rief. + Originally I studied history with the goal of an academic career in + mind. My coding journey started only because of my natural curiosity + and + love for learning new things and skills. However, once I gave coding a try, it turned out that I enjoy it + so much (and apparently have a talent for it, too) that I decided to + to turn this new hobby into a new career path for me. +

+

+ So far I've been enjoying this journey immensely, as it provides a + very + creative and dynamic outlet for + my + analytical way of thinking, my attention to details and my drive + to always learn and grow both on a personal and professional + level. I'm always ready for + new challenges and I look forward + to hearing from you! +

+
+
+
+ + + + + diff --git a/about.html b/about.html new file mode 100644 index 0000000..3f32d93 --- /dev/null +++ b/about.html @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + Arne Rief - Webentwickler + + + +
+ +
+ +
+
+
+ Arne Rief +
+
+

+ Hallo, mein Name ist Arne Rief. + Ursprünglich hatte ich eine akademische Karriere als + Geschichtswissenschaftler geplant, als meine natürliche Neugier und + meine Liebe fürs Lernen mich dazu + brachten, mich am Programmieren zu versuchen. Als ich dann meine + ersten Schritte im Programmieren unternommen hatte, stellte ich + fest, dass ich so viel Spaß daran (und offenbar auch ein Talent + dafür) habe, dass ich mich dazu entschloss, dieses neue Hobby zu + einem neuen Karrierepfad für mich zu machen. +

+

+ Bisher habe ich die Reise auf diesem neuen Pfad sehr genossen. Denn + hier habe ich ein + kreatives und dynamisches Betätigungsfeld + gefunden für meine + analytische Denkenweise, mein Auge fürs Detail und meinen + Antrieb, immer Neues zu lernen und sowohl persönlich als auch + beruflich zu wachsen. Für neue Herausforderungen bin + ich immer offen und bereit. Ich freue mich darauf, von Ihnen zu + hören! +

+
+
+
+ + + + + diff --git a/images/portrait.JPG b/images/portrait.JPG new file mode 100755 index 0000000..affbcef Binary files /dev/null and b/images/portrait.JPG differ diff --git a/images/screenshot-all-in-trips.png b/images/screenshot-all-in-trips.png new file mode 100755 index 0000000..e3aa54e Binary files /dev/null and b/images/screenshot-all-in-trips.png differ diff --git a/images/screenshot-auriga.png b/images/screenshot-auriga.png new file mode 100644 index 0000000..17928ff Binary files /dev/null and b/images/screenshot-auriga.png differ diff --git a/images/screenshot-note-book.png b/images/screenshot-note-book.png new file mode 100644 index 0000000..e7f2291 Binary files /dev/null and b/images/screenshot-note-book.png differ diff --git a/index-en.html b/index-en.html new file mode 100644 index 0000000..0ba491d --- /dev/null +++ b/index-en.html @@ -0,0 +1,295 @@ + + + + + + + + + + + + + + + + + + + + Arne Rief - Web Developer + + + +
+ +
+ +
+ +
+

+ Hello, I'm Arne.
+ Welcome to my web page! 👋🏻 +

+

+ I am a + full-stack web developer 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 + JavaScript, React, HTML, CSS, Sass + as well as Node.js, Express.js and + working with databases like + MySQL and + MongoDB. +

+
+ + +
+

Sample Projects

+
+ A screenshot of a Note Book user's book collection page +
+

Note Book

+

+ Website |  + GitHub Code +

+

+ Note Book is a + full-stack web application for + book lovers. Sign up for a free account and build a + digital book collection. Every + book in your collection comes with a "note book" for + keeping track of your notes on + the book and for storing remarkable quotations. Finding books, + notes and quotations is made easy thanks to a + search function. Additionally a + filter allows switching between + displaying notes or quotes only. +

+

+ Created with:
+ React, JavaScript, Node.js, Express.js, MySQL, HTML & CSS +

+
+
+ +
+
+

All In Trips

+

+ Website |  + GitHub Code +

+

+ All In Trips is a + frontend single page application + for planning your next vacation or business trip. Enter your + starting point, travel destination and the day of arrival and + departure just once to get an + overview of the weather at your + destination during your stay, the + next flights closest to your + current location and the + cheapest hotels available. With + data from APIs, provided by + reliable sources like + Booking.com. +

+

+ Created with:
+ React, JavaScript, 5 APIs, HTML & CSS +

+
+ A screenshot of a All In Trips' landing page +
+ +
+ A screenshot of a MiAuriga's landing page +
+

MiAuriga

+

+ Website and repository are property of Auriga +

+

+ As a client project, I worked + on the website MiAuriga. The + Spanish company Auriga is a + provider for all services related to cars. As part of a + complete restructure of both + the looks and functionality of the website, my tasks included + working on the + re-design of the frontend as + well as taking part in the planning and implementing of the + newly created database for + migrating the data of Auriga's customers. +

+

+ Created with:
+ React, JavaScript, Node.js, MongoDB, MaterialUI/MUI, HTML & + CSS +

+
+
+
+ + +
+

Contact me

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+
+
+ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..09d26b2 --- /dev/null +++ b/index.html @@ -0,0 +1,295 @@ + + + + + + + + + + + + + + + + + + + + Arne Rief - Webentwickler + + + +
+ +
+ +
+ +
+

+ Hallo, ich bin Arne.
+ Willkommen auf meiner Website! 👋🏻 +

+

+ Ich bin ein + Full Stack Webentwickler 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 + JavaScript, React, HTML, CSS und Sass, ebenso wie + Node.js, Express.js und die Arbeit + mit Datenbanken wie MySQL und + MongoDB. +

+
+ + +
+

Projektauswahl

+
+ Ein Screenshot der Büchersammlung eines Note Book Nutzers +
+

Note Book

+

+ Website |  + GitHub Code +

+

+ Note Book ist eine + Full Stack Webanwendung für + Buchliebhaber. Registriere dich mit einem kostenlosen Account und + erstelle eine + digitale Buchsammlung. Jedes + Buch in deiner Sammlung hat eine Notizfunktion, so dass du + Notizen und Zitate speichern + kannst. Eine Suchfunktion macht + es einfach, dich in deinen Büchern, Notizen und Zitaten + zurechtzufinden. Zusätzlich kannst du mit einem + Filter nur Notizen oder Zitate + anzeigen lassen. +

+

+ Erstellt mit:
+ React, JavaScript, Node.js, Express.js, MySQL, HTML & CSS +

+
+
+ +
+
+

All In Trips

+

+ Website |  + GitHub Code +

+

+ All In Trips ist eine + Frontend Single Page Webanwendung, die dir hilft, deinen nächsten Urlaub oder eine Geschäftsreise + zu planen. Gib deinen Ausgangsort, Zielort, Tag der Ankunft und + Abreise nur einmal ein und + erhalte eine Übersicht über + das Wetter an deinem Zielort, + die nächsten Flüge in deiner + Nähe sowie über die + günstigsten Hotels vor Ort. Mit + Daten von APIs, bereitgestellt + durch namhafte Unternehmen wie + Booking.com. +

+

+ Erstellt mit:
+ React, JavaScript, 5 APIs, HTML & CSS +

+
+ Ein Screenshot der Startseite von All In Trips +
+ +
+ Ein Screenshot der Startseite von MiAuriga +
+

MiAuriga

+

Website und Code sind Eigentum von Auriga

+

+ Meine Arbeit an der Website MiAuriga war ein + Auftrag für einen Klienten, das + spanische Unternehmen Auriga. + MiAuriga ist ein Onlineportal für alle Dienstleistungen rund ums + Auto. Als Teil einer + kompletten Neustrukturierung der Website + im Design wie in der Funktionalität habe ich sowohl am + neuen Design des Frontends als + auch bei der Planung und Umsetzung der + neuen Datenbank mitgearbeitet. +

+

+ Erstellt mit:
+ React, JavaScript, Node.js, MongoDB, MaterialUI/MUI, HTML & + CSS +

+
+
+
+ + +
+

Kontakt

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+
+
+ + + + + diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss new file mode 100644 index 0000000..819b356 --- /dev/null +++ b/sass/abstracts/_animations.scss @@ -0,0 +1,32 @@ +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +// text start on the left and transparent when the page loads, then moves into regular position +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translateX(-10rem); + } + 100% { + opacity: 1; + transform: translate(0); + } +} + +// skew to match the design of the .text-container class +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translateX(10rem) skewX(-12deg); + } + 100% { + opacity: 1; + transform: translate(0) skewX(-12deg); + } +} diff --git a/sass/abstracts/_index.scss b/sass/abstracts/_index.scss new file mode 100644 index 0000000..9563860 --- /dev/null +++ b/sass/abstracts/_index.scss @@ -0,0 +1,3 @@ +@forward "animations"; +@forward "mixins"; +@forward "variables"; diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..98351c4 --- /dev/null +++ b/sass/abstracts/_mixins.scss @@ -0,0 +1,32 @@ +@use "variables" as *; + +@mixin main-link-hover { + color: $text-special-light; + transform: translateY(-0.3rem); +} + +@mixin flex-sp-around-center { + display: flex; + align-items: center; + justify-content: space-around; +} + +@mixin standard-grid { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; +} + +@mixin narrow-container { + margin: 3rem auto; +} + +@mixin wide-container { + margin: 10rem auto; + width: 80%; + + h2 { + margin-bottom: 5rem; + } +} diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss new file mode 100644 index 0000000..5aea3e6 --- /dev/null +++ b/sass/abstracts/_variables.scss @@ -0,0 +1,19 @@ +// colors +$col-main-light: #023059; +$col-main-dark: #093d5ec5; +$bg-text-container: #173d5a; +$text-main: #ececec; +$text-dark: #252424; +$text-special-dark: #e79759; +$text-special-light: #ecbf4b; + +// font +$big-text: 2rem; +$medium-text: 1.5rem; +$medium-text-mobile: 1.3rem; +$small-text: 1.1rem; + +// layout +$margin-main: 3rem 4rem 2rem 4rem; +$margin-mobile: 2rem; +$radius-text-container: 10px; diff --git a/sass/base/_base.scss b/sass/base/_base.scss new file mode 100644 index 0000000..2211bca --- /dev/null +++ b/sass/base/_base.scss @@ -0,0 +1,43 @@ +@use "../abstracts" as *; + +*, +*::after, +*::before { + box-sizing: inherit; + margin: 0; + padding: 0; +} + +html, +body { + // min-height to ensure footer sticks to bottom and background doesn't repeat + min-height: 100vh; + width: 100vw; +} + +body { + background: linear-gradient( + 45deg, + rgba($col-main-light, 0.89) 0%, + rgba($col-main-dark, 0.84) 100% + ); + background-repeat: no-repeat; + background-size: cover; + box-sizing: border-box; + color: $text-main; + // grid to ensure footer sticks to the bottom in all cases; body consists of header (auto), main (1fr) and footer (auto); needs min-height 100vh too, here added to "html, body" + display: grid; + grid-template-rows: auto 1fr auto; + font-family: "Inter", sans-serif; + font-size: $small-text; + line-height: 1.5; +} + +main { + height: 100%; + margin: $margin-main; + + & * { + animation: fade-in 2s ease-out; + } +} diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss new file mode 100644 index 0000000..38f3a3f --- /dev/null +++ b/sass/base/_typography.scss @@ -0,0 +1,39 @@ +@use "../abstracts/variables" as *; + +.text-link { + color: $text-special-dark; + + &:hover { + background-color: $text-special-dark; + border-radius: 2px; + color: $text-dark; + text-decoration: none; + } +} + +.text-emphasis { + color: $text-special-light; + font-weight: bold; +} + +.title { + font-family: "Archivo Black", sans-serif; + color: $text-special-light; + font-size: $big-text; + width: fit-content; +} + +.subtitle { + font-family: "Archivo Black", sans-serif; + color: $text-special-dark; + font-size: $medium-text; +} + +.name { + font-size: calc(2 * $big-text); +} + +.note-auriga { + color: $text-special-dark; + font-style: italic; +} diff --git a/sass/components/_button.scss b/sass/components/_button.scss new file mode 100644 index 0000000..2d5b50c --- /dev/null +++ b/sass/components/_button.scss @@ -0,0 +1,21 @@ +@use "../abstracts/" as *; + +button { + color: $text-dark; + background-color: $text-special-light; + border: none; + border-radius: 10px; + font-style: inherit; + font-weight: bold; + padding: 0.7rem; + text-transform: uppercase; + width: 35%; + + &:hover { + background-color: $text-special-dark; + } + + &:active { + outline: 3px solid $text-dark; + } +} diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss new file mode 100644 index 0000000..a2a9c40 --- /dev/null +++ b/sass/components/_contact-form.scss @@ -0,0 +1,40 @@ +@use "../abstracts/" as *; + +.messenger-form { + @include standard-grid; + gap: 2rem; + width: 50%; + + // container for each label & input + div { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; + gap: 1rem; + + // div container with textarea input spans entire column, pushes button to next row + &.text-area { + grid-column: 1 / 3; + } + } + + label { + font-weight: bold; + } + + input, + textarea { + background-color: $text-main; + border: none; + border-radius: 10px; + padding: 0.5rem; + width: 100%; + + &:focus { + color: $text-main; + background-color: $bg-text-container; + outline: 3px solid $text-special-dark; + } + } +} diff --git a/sass/components/_portrait-container.scss b/sass/components/_portrait-container.scss new file mode 100644 index 0000000..819b18e --- /dev/null +++ b/sass/components/_portrait-container.scss @@ -0,0 +1,15 @@ +@use "../abstracts/animations" as *; + +.portrait-container { + height: 50vh; + width: fit-content; + animation: moveInLeft 2s ease-out; + backface-visibility: hidden; + + img { + border-radius: 25px; + height: 100%; + width: 100%; + object-fit: scale-down; + } +} diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss new file mode 100644 index 0000000..d6d4e68 --- /dev/null +++ b/sass/components/_project-container.scss @@ -0,0 +1,6 @@ +@use "../abstracts/" as *; + +.project-container { + @include flex-sp-around-center; + gap: 2rem; +} diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss new file mode 100644 index 0000000..8c28462 --- /dev/null +++ b/sass/components/_screenshot-container.scss @@ -0,0 +1,15 @@ +@use "../abstracts/" as *; + +.project-screenshot { + border-radius: $radius-text-container; + outline: 5px solid $text-special-dark; + outline-offset: 1.5rem; + object-fit: scale-down; + width: 40%; + transition: transform 0.6s ease; + + &:hover { + transform: scale(1.2); + z-index: 100; + } +} diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss new file mode 100644 index 0000000..0108f94 --- /dev/null +++ b/sass/components/_text-container.scss @@ -0,0 +1,20 @@ +@use "../abstracts" as *; + +.text-container { + background-color: $bg-text-container; + border-radius: $radius-text-container; + box-shadow: 0 2rem 3.5rem rgba(#000, 0.6); + padding: 3.5rem; + transform: skewX(-12deg); + width: 50%; + + // margin between paragraphs but not below the last paragraph + & p:not(:last-child) { + margin-bottom: 1.5rem; + } +} + +.text-about { + animation: moveInRight 2s ease-out; + backface-visibility: hidden; +} diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss new file mode 100644 index 0000000..ecfb0a5 --- /dev/null +++ b/sass/layout/_footer.scss @@ -0,0 +1,60 @@ +@use "../abstracts" as *; + +footer { + background-color: $bg-text-container; + // delete positioning to make grid footer from body work + // position: absolute; + // bottom: 0; + // left: 0; + width: 100%; + + & * { + margin: $margin-main; + } + + dl { + display: flex; + justify-content: center; + align-items: center; + height: 2rem; + + & * { + color: inherit; + font-size: $medium-text; + margin: 0.5rem; + transition: transform 0.3s; + } + + & dd i:hover { + @include main-link-hover; + } + } + + p { + text-align: center; + } + + .big-icon { + font-size: $big-text; + } +} + +@media screen and (max-width: 420px) { + footer { + top: 100; + + & * { + margin: $margin-mobile; + } + + dl { + flex-direction: column; + height: max-content; + + & * { + font-size: $medium-text-mobile; + margin: 0.3rem; + } + } + } +} diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss new file mode 100644 index 0000000..fb2d433 --- /dev/null +++ b/sass/layout/_main-sections.scss @@ -0,0 +1,32 @@ +@use "../abstracts/" as *; + +.about-section { + @include flex-sp-around-center; + @include narrow-container; +} + +.welcome-section { + @include standard-grid; + gap: 8rem; + @include narrow-container; + width: 60%; + + .welcome-intro { + border-radius: $radius-text-container; + outline: 3px solid $text-special-dark; + outline-offset: 1rem; + } +} + +.projects-section { + @include wide-container; + + // less margin between h2 and the 2nd child = first project-container + & > div:not(:nth-child(2)) { + margin-top: 10rem; + } +} + +.contact-section { + @include wide-container; +} diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss new file mode 100644 index 0000000..d57f3d7 --- /dev/null +++ b/sass/layout/_nav.scss @@ -0,0 +1,61 @@ +@use "../abstracts" as *; + +nav { + background-color: $bg-text-container; + font-family: "Archivo Black", sans-serif; + height: 10vh; + width: 100%; + + ul { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-end; + height: 100%; + list-style-type: none; + padding: 0 3rem; + width: 100%; + } + + // logo to the left side of navbar + li:first-child { + text-align: left; + margin-right: auto; + } + + li a { + display: block; + color: inherit; + font-size: $medium-text; + padding: 0 1.5rem; + text-align: center; + transition: transform 0.3s; + text-decoration: none; + white-space: nowrap; + + &:hover { + @include main-link-hover; + } + } +} + +// mobile +@media screen and (max-width: 770px) { + nav { + ul { + gap: 1rem; + justify-content: center; + padding: 0; + } + + li:first-child { + text-align: center; + margin-right: 1.5rem; + } + + li a { + font-size: 1rem; + padding: 0; + } + } +} diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..40ac841 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,13 @@ +@use "base/base"; +@use "base/typography"; + +@use "layout/nav"; +@use "layout/main-sections"; +@use "layout/footer"; + +@use "components/text-container"; +@use "components/portrait-container"; +@use "components/project-container.scss"; +@use "components/screenshot-container.scss"; +@use "components/contact-form"; +@use "components/button"; -- cgit v1.2.3