Fix/i18n responsive layout - #24
Conversation
✅ Deploy Preview for fanciful-cannoli-268c0c ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR updates the portfolio’s responsive layout/styling and improves i18n support by switching route titles to translation keys, while also adjusting various assets (png/webp/svg) and adding/expanding tests around project external links.
Changes:
- Add localized page titles via
data.titleKeyand new i18n entries (EN/DE) for Legal Notice and Privacy Policy. - Improve responsive layout/behavior across sections (CTA sizing/wrapping, header sizing in project detail, skills/testimonials/contact layout tweaks) and respect reduced-motion for smooth scrolling.
- Update assets/format usage (png/webp/svg) and add a project-detail test for external GitHub/live links.
Reviewed changes
Copilot reviewed 30 out of 47 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/styles.css | Adds smooth scrolling + reduced-motion fallback; adjusts project-detail desktop header sizing. |
| src/app/shared/ui/cta-link/cta-link.ts | Removes stray in-file note; no functional changes. |
| src/app/shared/ui/cta-link/cta-link.css | Makes CTA sizing more responsive (min-width via CSS vars, wrapping support). |
| src/app/shared/ui/brand-stamp/brand-stamp.html | Switches stamp background asset; tweaks SVG attributes for layout consistency. |
| src/app/shared/ui/brand-stamp/brand-stamp.css | Adjusts SVG transform behavior and stamp positioning/typography. |
| src/app/shared/legal-page-layout/legal-page-layout.css | Updates legal hero background asset format. |
| src/app/pages/project-detail/project-detail.spec.ts | Adds test coverage for external GitHub/live CTA links. |
| src/app/pages/project-detail/project-detail.css | Fixes header bg asset path/format; improves actions wrapping and stamp placement. |
| src/app/pages/home/sections/testimonials/testimonials.html | Moves key layout styles into utility classes; updates arrow asset format. |
| src/app/pages/home/sections/testimonials/testimonials.css | Removes styles migrated to template utility classes. |
| src/app/pages/home/sections/skills/skills.html | Tweaks grid/spacing and introduces a label class for responsive font sizing. |
| src/app/pages/home/sections/skills/skills.css | Adjusts hover media queries and adds mid-breakpoint layout fixes. |
| src/app/pages/home/sections/projects/projects.html | Updates underline asset format; ensures details CTA can shrink/wrap. |
| src/app/pages/home/sections/hero/hero.css | Switches hero CTA sizing to CSS variables to work with updated CTA component. |
| src/app/pages/home/sections/contact/contact.html | Improves anchor offset scrolling, max-width behavior, and responsive stamp/arrow layout. |
| src/app/pages/home/sections/contact/contact.css | Removes now-inline arrow sizing rule. |
| src/app/pages/home/sections/contact-footer-surface/contact-footer-surface.css | Updates footer texture asset format. |
| src/app/pages/home/sections/about/about.css | Switches CTA width to CSS var and adds mid-breakpoint layout tuning. |
| src/app/layout/header/header.html | Adds a desktop header class hook and removes initial gradient utility styling. |
| src/app/layout/header/header.css | Updates scrolled-header visuals (bg/blur/shadow) and transitions. |
| src/app/layout/footer/footer.css | Adjusts footer max-width across breakpoints. |
| src/app/features/projects/projects.data.ts | Adds GitHub/live URLs for El Pollo Loco project. |
| src/app/app.routes.ts | Switches legal routes from static title to i18n data.titleKey. |
| server/src/validators/contact.validator.ts | Removes unused exported inferred request type. |
| server/src/routes/contact.route.ts | Removes unused default router export, keeping factory function. |
| server/package.json | Adds a lint script for server package. |
| README.md | Updates setup instructions for Angular 22 + Express backend and available checks. |
| public/i18n/en.json | Adds page title translations; updates about/skills/contact copy. |
| public/i18n/de.json | Adds page title translations; updates about/skills/contact copy. |
| public/assets/skills/icons/Next.svg | Updates gradient colors. |
| public/assets/project-detail/title-underline.svg | Adds preserveAspectRatio="none" to improve scaling responsiveness. |
| eslint.config.js | Restricts Angular linting to src/** and adds a server TS lint target. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| "version": "1.0.0", | ||
| "description": "", | ||
| "scripts": { | ||
| "lint": "npm --prefix .. exec -- eslint \"{src,test}/**/*.ts\"", |
![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: fd396b412b
ℹ️ 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".
|
|
||
| <app-cta-link | ||
| class="projects__details-link z-20 col-start-1 row-start-3 mt-4 w-40 justify-self-end lg:row-start-1 lg:mr-6 lg:mb-6 lg:mt-0 lg:w-44 lg:self-end" | ||
| class="projects__details-link z-20 col-start-1 row-start-3 mt-4 max-w-full min-w-40 justify-self-end lg:row-start-1 lg:mr-6 lg:mb-6 lg:mt-0 lg:min-w-44 lg:self-end" |
There was a problem hiding this comment.
The min-w-40/lg:min-w-44 utilities size only the app-cta-link host, while the inner .cta-link now uses width: max-content and receives the default --cta-min-width: 0px. Consequently, short translations such as English “Details” render a roughly content-sized button inside a wider, right-aligned host, leaving unused space on its right and shifting the visible CTA away from the intended alignment. Set --cta-min-width here, as the other CTA consumers do, or make the inner link fill the host.
Useful? React with 👍 / 👎.
No description provided.