diff --git a/public/i18n/de.json b/public/i18n/de.json index 610d0be..dd59e9e 100644 --- a/public/i18n/de.json +++ b/public/i18n/de.json @@ -2,7 +2,8 @@ "pageTitles": { "notFound": "Seite nicht gefunden | KamyCoding", "legalNotice": "Impressum | KamyCoding", - "privacyPolicy": "Datenschutzerklärung | KamyCoding" + "privacyPolicy": "Datenschutzerklärung | KamyCoding", + "projectDetail": "Projekt | KamyCoding" }, "nav": { "about": "Über mich", @@ -120,15 +121,15 @@ "profileAria": "LinkedIn-Profil von {{name}} ansehen", "items": { "tobiasLange": { - "quote": "Karl hat das Team mit seiner großartigen Organisation und klaren Kommunikation wirklich zusammengehalten. Ohne seinen Einsatz wären wir nicht so weit gekommen.", + "quote": "Kamyar hat das Team mit seiner großartigen Organisation und klaren Kommunikation wirklich zusammengehalten. Ohne seinen Einsatz wären wir nicht so weit gekommen.", "role": "Frontend Developer" }, "mariaSchaefer": { - "quote": "Die Zusammenarbeit mit Karl war eine große Freude. Er versteht es, Teammitglieder zu motivieren und zu ermutigen, ihre bestmögliche Arbeit zu zeigen, und bringt stets neue Impulse in das Brainstorming ein. Für das Wohlbefinden der Gruppe hatte er immer ein offenes Ohr, war hilfsbereit und brachte außerdem viel Humor mit.", + "quote": "Die Zusammenarbeit mit Kamyar war eine große Freude. Er versteht es, Teammitglieder zu motivieren und zu ermutigen, ihre bestmögliche Arbeit zu zeigen, und bringt stets neue Impulse in das Brainstorming ein. Für das Wohlbefinden der Gruppe hatte er immer ein offenes Ohr, war hilfsbereit und brachte außerdem viel Humor mit.", "role": "Frontend Developer" }, "davidBraun": { - "quote": "Karl war bei DA ein hervorragender Teamkollege. Sein positiver Einsatz und seine Bereitschaft, Verantwortung zu übernehmen, haben wesentlich dazu beigetragen, dass wir unsere Ziele erreicht haben.", + "quote": "Kamyar war bei DA ein hervorragender Teamkollege. Sein positiver Einsatz und seine Bereitschaft, Verantwortung zu übernehmen, haben wesentlich dazu beigetragen, dass wir unsere Ziele erreicht haben.", "role": "Frontend Developer" } } diff --git a/public/i18n/en.json b/public/i18n/en.json index f959a43..9752039 100644 --- a/public/i18n/en.json +++ b/public/i18n/en.json @@ -2,7 +2,8 @@ "pageTitles": { "notFound": "Page Not Found | KamyCoding", "legalNotice": "Legal Notice | KamyCoding", - "privacyPolicy": "Privacy Policy | KamyCoding" + "privacyPolicy": "Privacy Policy | KamyCoding", + "projectDetail": "Project | KamyCoding" }, "nav": { "about": "About me", @@ -120,15 +121,15 @@ "profileAria": "View {{name}}'s LinkedIn profile", "items": { "tobiasLange": { - "quote": "Karl really kept the team together with his great organization and clear communication. We wouldn't have got this far without his commitment.", + "quote": "Kamyar really kept the team together with his great organization and clear communication. We wouldn't have got this far without his commitment.", "role": "Frontend Developer" }, "mariaSchaefer": { - "quote": "It was a great pleasure to work with Karl. He knows how to push and encourage team members to present the best work possible, always adding something to brainstorm. Regarding the well-being of group members, he was always present and available to listen and help others, with a great sense of humor as well.", + "quote": "It was a great pleasure to work with Kamyar. He knows how to push and encourage team members to present the best work possible, always adding something to brainstorm. Regarding the well-being of group members, he was always present and available to listen and help others, with a great sense of humor as well.", "role": "Frontend Developer" }, "davidBraun": { - "quote": "Karl was a top team colleague at DA. His positive commitment and willingness to take on responsibility made a significant contribution to us achieving our goals.", + "quote": "Kamyar was a top team colleague at DA. His positive commitment and willingness to take on responsibility made a significant contribution to us achieving our goals.", "role": "Frontend Developer" } } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d3fb8c8..c3f0f84 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -26,7 +26,7 @@ export const routes: Routes = [ path: 'projects/:slug', component: ProjectDetail, canActivate: [projectDetailGuard], - title: 'Project - Kamycoding', + data: { titleKey: 'pageTitles.projectDetail' }, }, { path: '**', diff --git a/src/app/pages/home/sections/contact/contact.css b/src/app/pages/home/sections/contact/contact.css index 3352af8..865c406 100644 --- a/src/app/pages/home/sections/contact/contact.css +++ b/src/app/pages/home/sections/contact/contact.css @@ -8,25 +8,20 @@ } .contact-field { - position: relative; - display: flex; - flex-direction: column; - gap: 10px; + display: grid; + gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--color-secondary); } .contact-field label { - display: block; font-size: 24px; font-weight: 500; line-height: 1.2; transition: color 180ms ease-out; } -.contact-field input, -.contact-field textarea { - display: block; +.contact-field :is(input, textarea) { width: 100%; height: 22px; margin: 0; @@ -61,20 +56,23 @@ } .contact-field__error { - position: absolute; - right: 24px; - bottom: 16px; - left: 24px; margin: 0; color: var(--color-error); font-size: 14px; line-height: 1.2; - pointer-events: none; } -.contact-field--invalid input::placeholder, -.contact-field--invalid textarea::placeholder { - opacity: 0; +.contact-field--invalid:has(:placeholder-shown) :is(input, textarea) { + grid-area: 2 / 1; + z-index: 1; +} + +.contact-field--invalid:has(:placeholder-shown) .contact-field__error { + grid-area: 2 / 1; +} + +.contact-field--invalid:has(:placeholder-shown) ::placeholder { + color: transparent; } .contact-consent { diff --git a/src/app/pages/home/sections/hero/hero.css b/src/app/pages/home/sections/hero/hero.css index c003601..516ef99 100644 --- a/src/app/pages/home/sections/hero/hero.css +++ b/src/app/pages/home/sections/hero/hero.css @@ -5,11 +5,18 @@ .hero { position: relative; min-height: 812px; + min-height: 100svh; overflow: hidden; background: var(--color-foreground); color: var(--color-foreground); } +@supports (height: 100dvh) { + .hero { + min-height: 100dvh; + } +} + .hero__background { position: absolute; inset: 0; @@ -165,11 +172,23 @@ outline-offset: 4px; } -@media (min-width: 64rem) { - .hero { - min-height: 0; +@media (max-width: 63.9375rem) and (max-height: 700px) { + .hero__composition { + top: 112px; + gap: 22px; } + .hero__polaroid { + width: 165px; + height: 198px; + } + + .hero__portrait { + height: 143px; + } +} + +@media (min-width: 64rem) { .hero__stage { container-type: inline-size; width: min(100%, 1440px); diff --git a/src/index.html b/src/index.html index 6cfa487..ecfdcf9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,10 @@