Fix/hero 100vh - #28
Conversation
✅ Deploy Preview for fanciful-cannoli-268c0c ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: efc5977e72
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| component: ProjectDetail, | ||
| canActivate: [projectDetailGuard], | ||
| title: 'Project - Kamycoding', | ||
| data: { titleKey: 'pageTitles.projectDetail' }, |
There was a problem hiding this comment.
When the user switches languages while viewing a project, LocalizedTitleStrategy reacts to this new key and sets the document title to the generic Project | KamyCoding/Projekt | KamyCoding. The component's title effect only depends on the project signal, so it does not rerun to restore Join | KamyCoding, causing every project page to lose its specific title after a language change.
Useful? React with 👍 / 👎.
| .hero__polaroid { | ||
| width: 165px; | ||
| height: 198px; | ||
| } |
There was a problem hiding this comment.
On viewports at most 700px tall, this 198px border-box still contains 14px top padding, the newly configured 143px portrait, and the unchanged 54px caption, requiring 211px in total. Since the figure does not hide overflow, the caption extends 13px beyond the white polaroid background on the exact short-mobile layouts this media query targets.
Useful? React with 👍 / 👎.
| min-height: 812px; | ||
| min-height: 100svh; |
There was a problem hiding this comment.
At desktop widths where the viewport is taller than the stage's 8 / 5 aspect-ratio height (for example, 1920×1080 or a 1024px-wide portrait tablet), this minimum expands .hero while .hero__stage remains capped by its width and 900px maximum. All stage-relative content—including the social navigation positioned from the stage bottom—therefore stays near the top, leaving a large empty strip before the next section instead of laying out across the new viewport-height hero.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR primarily targets layout/SEO improvements on the portfolio site: it updates the home hero section’s viewport-height behavior, refines contact form field layout, and extends localized page title support for the project detail route.
Changes:
- Add an HTML meta description for improved SEO/social previews.
- Adjust hero section sizing using
svh/dvhand add a small-viewport media tweak. - Update contact field layout to grid and refine invalid/placeholder behavior; localize the project detail route title and add i18n keys/quote text updates.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.html | Adds a meta description tag for SEO. |
| src/app/pages/home/sections/hero/hero.css | Updates hero min-height to modern viewport units and adds a small-viewport media rule. |
| src/app/pages/home/sections/contact/contact.css | Refactors contact field layout to grid and changes invalid/placeholder styling logic. |
| src/app/app.routes.ts | Switches project detail route title handling to an i18n key in route data. |
| public/i18n/en.json | Adds pageTitles.projectDetail and updates testimonial quote text. |
| public/i18n/de.json | Adds pageTitles.projectDetail and updates testimonial quote text. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| .contact-field--invalid:has(:placeholder-shown) ::placeholder { | ||
| color: transparent; | ||
| } |
| { | ||
| path: 'projects/:slug', | ||
| component: ProjectDetail, | ||
| canActivate: [projectDetailGuard], | ||
| title: 'Project - Kamycoding', | ||
| data: { titleKey: 'pageTitles.projectDetail' }, | ||
| }, |
No description provided.