Angular application and engineering portfolio
The site behind the work.
This portfolio is a production Angular application built to present projects with the same care given to the systems they describe.
It combines a responsive professional profile, detailed engineering case studies, external applications, and live technical demos in one navigable experience. Reusable page patterns keep the growing collection consistent while each project retains its own visual identity and story. Layouts are optimized for multiple desktop resolutions and mobile phones, so the navigation, project media, and technical content remain clear and usable across screen sizes.
What it does
One application for a broad body of work.
The home page provides a concise professional introduction and a visual index of featured projects. Dedicated overview routes expand those cards into engineering narratives that explain the problem, implementation, architecture, product decisions, and results.
Project discovery
A responsive card grid gives every featured application a clear summary, representative image, technology context, overview route, and direct project links.
Detailed case studies
Project pages combine screenshots, architecture explanations, workflows, responsive comparisons, technology lists, and links to live products or source code.
Connected demonstrations
The portfolio links presentation content to runnable systems, including the separate Java and Spring demonstration service, API documentation, GraphQL, and source repos.
Responsive navigation
Shared headers, breadcrumbs, page shells, and adaptive layouts keep a growing set of projects usable across wide displays, tablets, and phones.
Social presentation
Open Graph and Twitter metadata provide a dedicated 1200 × 627 preview, clear title, description, and stable canonical image URL when the portfolio is shared.
Accessible structure
Semantic landmarks, descriptive alternative text, labeled navigation, visible focus states, and readable contrast make the content easier to understand and operate.
Application architecture
Reusable foundations with room for project-specific storytelling.
Angular Router maps the home page and project overviews into stable URLs. Standalone components own each page, while shared navigation, breadcrumbs, layout tokens, buttons, and typography create a consistent system. Individual page styles then add the visual treatment and responsive behavior each case study needs.
01
Route
Stable project URLs make every case study directly reachable and shareable.
02
Compose
Standalone Angular components pair focused templates with isolated page styles.
03
Reuse
Shared shells, navigation, breadcrumbs, and design tokens prevent visual drift.
04
Render
SSR and prerendering deliver crawlable HTML for people, search engines, and social tools.
Production delivery
Built, verified, and deployed as a real application.
The production configuration creates optimized browser and server bundles, prerenders known routes, copies public media into the deployment, and enforces bundle budgets. Version information is generated from the package manifest so the deployed footer can identify the running release.
Cloudflare and AWS Amplify domain integration. The JohnBieniek.com domain is provided and managed through Cloudflare, then integrated with AWS Amplify, where the production Angular application is hosted. Cloudflare Pages also provides a stable pages.dev domain for branch deployments, making changes available for review before production promotion.
Tools used
A modern Angular and TypeScript stack.
Explore the project