Movie Corner Page — Design Spec

Overview

A new /movie-corner page on gabrielkaszewski.dev that embeds the user's external movie review site and introduces it with a cinematic hero section.

Goals

Give the movie review site a home on the personal portfolio
Welcome visitors with personality before showing the embed
Keep the design consistent with the rest of the site (dark glassmorphism, yellow accents, gravity-body)

Page Structure

Two vertically stacked sections filling the full viewport height (min-h-screen flex flex-col):

Hero section — fixed height, centered content
Iframe section — flex-1, fills all remaining height

No page-level scroll after the hero. The iframe scrolls internally.

Hero Section

Centered, padded, with a subtle radial yellow glow behind the icon.

Element	Detail
Icon	🎬 emoji, large
Title	"MOVIE CORNER", uppercase, yellow (`text-yellow-400`), large tracking
Tagline	"What I watch, what I think. A personal cinema journal." — muted white
Quote	Left-bordered card (yellow left border, glass background): "I'd only give one piece of advice to anyone marrying. We're all quite similar in the end. We all get old and tell the same tales too many times. But try and marry someone kind." — About Time, 2013
Genre chips	Three pills: Sci-Fi (yellow tint), Drama (white/glass), Family (white/glass)

The quote card uses border-l-2 border-yellow-400/50 bg-white/5 consistent with the site's glass style.

Iframe Section

flex-1 w-full — grows to fill remaining page height
src: https://movies.gabrielkaszewski.dev/users/5d253151-0f6a-4246-9bc5-cb0b5869731b
title: "Gabriel's Movie Reviews"
No JS error handling — a permanent "Open reviews directly →" text link (yellow, small) sits below the iframe as an always-visible fallback
Thin top border separating hero from iframe (border-t border-white/10)

Add "Movie Corner" to the navLinks array in components/navbar.tsx:

{ href: "/movie-corner", label: "Movie Corner" }

Inserted after "Projects" and before "Blog".

Metadata

export const metadata: Metadata = {
  title: "Movie Corner | Gabriel Kaszewski",
  description: "My personal cinema journal — what I watch and how I feel about it.",
}

Styling Constraints

Use gravity-body class on the page root (matches all other pages)
pt-20 on the page root to clear the fixed navbar
No new CSS — use only existing Tailwind utilities and glass classes already in the project (backdrop-blur-sm, bg-white/5, border-white/10, etc.)

Files to Touch

File	Change
`app/movie-corner/page.tsx`	Create — full page implementation
`components/navbar.tsx`	Add "Movie Corner" nav link

Out of Scope

Fetching live stats (films watched, avg rating) — static content only
JS error boundary on the iframe
Any backend or API work

2.9 KiB Raw Blame History