Website Creation Prompt

Specified tech stack

• Next.js (App Router) + TypeScript.
• Tailwind CSS.
• MDX or Markdown for project content.
• Minimal dependencies and no heavy UI frameworks.
• GitHub + Netlify deployment pipeline.
• Plausible or lightweight analytics toggle behind environment variable.

Architecture directives included in prompt

• Structured content model with schema fields for all project sections.
• Reusable components: header, footer, cards, filters, tags, search input, section blocks.
• Defined route map for all required top-level pages and project detail routes.
• A11y + QA expectations: keyboard focus, heading order, alt text, linting, formatting, strict TypeScript.
• SEO and analytics requirements with explicit tracking events and metadata behavior.

Expected deliverables and acceptance checks

• Fully working codebase and editable content structure.
• Projects page with working search/filter and linked detail pages.
• At least four sample projects generated from content files.
• README covering setup, build, deploy, and adding new project content.
• Final acceptance checklist covering routes, mobile nav, SEO, performance defaults, and link integrity.

Actual LLM prompt

You are an expert senior frontend engineer. Build the initial V1 of a static-first personal portfolio website for marcelopierry.com.

GOAL
Create a credible, clean portfolio site that is easy to browse, easy to share, and easy to maintain. Prioritize clarity, consistent storytelling, fast load, accessibility, and a reusable content model. The site must be "static-first" and deployable to Netlify from GitHub.

PRIMARY PAGES (top nav)
1) Home
2) Projects
3) Resume
4) Tools
5) Services
6) About
7) Contact

HARD REQUIREMENTS
- Responsive across mobile, tablet, desktop.
- Consistent top navigation (sticky on desktop) and footer across all pages.
- Projects index supports tag filtering + keyword search.
- Project detail pages follow a standard template with required sections.
- Contact form submits successfully (Netlify Forms), includes honeypot, and has success + failure states.
- Strong SEO fundamentals: titles, meta descriptions, OpenGraph, canonical URL, sitemap.xml, robots.txt.
- Performance: lightweight, minimal client JS, optimized images, good accessibility and semantic HTML.

TECH STACK (use exactly this unless it is impossible)
- Next.js (App Router) + TypeScript
- Tailwind CSS
- MDX (or Markdown) for project content
- No heavy UI frameworks. Keep dependencies minimal.
- Hosting: Netlify (assume build + deploy from GitHub)
- Use Netlify Forms for Contact (no custom backend)
- Add Plausible (or a lightweight analytics placeholder) behind an env var toggle

DESIGN LANGUAGE
- Modern, restrained, high-contrast, content-forward.
- Clear typography hierarchy and spacing system.
- Subtle interactions only (hover, focus, minimal transitions).
- Avoid large logos. Text-first.
- Build a small design token set: spacing, font sizes, border radius, shadows, colors.
- If a local folder "uira-labs-website/" exists in the repo, reuse its design tokens and components where practical:
  - Fonts, colors, menu style, overall look and feel should match that system.
  - If not present, implement a clean, cohesive design that can later be swapped to match.

INFORMATION ARCHITECTURE DETAILS

HOME
- Hero section:
  - Name: "Marcelo Pierry"
  - One-sentence positioning statement (create a placeholder that can be edited easily)
  - 2 to 3 primary CTAs: Projects, Resume, Contact
- Featured Work section:
  - Exactly 3 project cards
  - Each: title, one-sentence summary, link to project detail
- "What I do" section:
  - One short paragraph
  - Optional 3 compact capability highlights written as outcomes (not a skill list)
- Footer: nav links, social links (placeholders), direct email link

PROJECTS
- /projects index:
  - Grid (responsive) of project cards
  - Each card includes:
    - title
    - one-sentence value statement
    - "Role: ..."
    - 2 to 3 tags
  - Filtering:
    - Tag filter (multi-select or single-select is fine, but must work)
    - Keyword search (client-side, fast, no backend)
  - Ordering: deliberate and configurable (not purely chronological)
- /projects/[slug] detail template with sections in this order:
  1) Header: title, subtitle, timeframe, role
  2) Overview (paragraph)
  3) Problem
  4) Approach (must include at least one concrete representation, like a numbered flow or structured list)
  5) Contributions (what Marcelo did personally, include collaboration context when relevant)
  6) Outcomes (measurable if possible, otherwise concrete evidence like risk reduced, quality improved, capability unlocked)
  7) Artifacts (links with labels and short explanations)
  8) Lessons and Next Steps

RESUME
- Top summary: positioning statement, short professional summary, and a link to view Projects
- Sections: Focus Areas, Skills, Experience, Education, Certifications (optional)
- Experience entries: outcome-oriented bullets with scope and results (use placeholders)
- Include "Project Portfolio" section linking to top projects on the site
- Optimize for scanning and mobile readability

TOOLS
- Intro paragraph explaining tool philosophy (placeholder)
- Organized by workflow categories (not vendor-first)
- Each tool: 1 sentence "how I use it" + advantage

SERVICES
- Explain operational stack in plain language:
  - Squarespace: domain registrar, DNS ownership
  - Netlify: hosting, CDN, HTTPS, deploy previews, form handling
  - GitHub: source control, PR workflow, issues, branch protection suggestion
  - Google: email + office docs
  - Dev accelerators: Codex/Cursor/Claude Code (only describe their role)
- Keep as readable paragraphs with simple headings

ABOUT
- 1 to 2 paragraphs: professional arc (placeholder)
- Values and how I work
- What I am exploring/learning now
- Keep professional, minimal personal details

CONTACT
- Contact form fields: name, email, message
- Add honeypot field
- Netlify Forms wiring (works on deploy)
- Success confirmation UI state and simple failure state
- Also show direct email link + LinkedIn + GitHub placeholders

CONTENT MODEL (must be implemented)
Store projects as structured content, so adding a new project is predictable.
Use one of:
- MDX files with frontmatter (preferred)
- Or JSON + Markdown sections

Project schema must include:
- slug
- title
- subtitle
- timeframe
- role
- summary (1 sentence)
- tags (array)
- overview (paragraph)
- problem (paragraph or MD)
- approach (MD, include a numbered flow)
- contributions (MD list)
- outcomes (MD list)
- artifacts (array of { label, href, note })
- lessons_next (MD)

Include at least 4 sample projects with realistic placeholder content (including the 3 featured ones). Use tags like "Product", "AI", "Experimentation", "Search", "Prompting", etc.

ROUTING
- / (Home)
- /projects
- /projects/[slug]
- /resume
- /tools
- /services
- /about
- /contact

COMPONENTS (build reusable components)
- SiteHeader (nav, responsive mobile menu)
- SiteFooter
- Container + Section
- Button (primary, secondary)
- ProjectCard
- Tag
- SearchInput
- FilterBar
- ProjectSections (for consistent typography and spacing)

ACCESSIBILITY AND QUALITY
- Semantic HTML, keyboard navigation, visible focus states.
- Proper headings order, alt text for images.
- Form labels and error messaging.
- Add basic linting and formatting:
  - ESLint
  - Prettier
  - TypeScript strict
- Add a simple link checker script or a basic test to prevent broken internal routes.

SEO
- Per-page metadata with title templates and meta descriptions.
- OpenGraph tags with a default OG image (create a simple local placeholder image or SVG).
- canonical URLs
- sitemap.xml and robots.txt
- Add JSON-LD for Person (basic structured data)

ANALYTICS (optional but scaffolded)
- Add a lightweight analytics component that is enabled only if an env var is set (for example NEXT_PUBLIC_ANALYTICS=true).
- Track:
  - page views
  - outbound link clicks (email, LinkedIn, GitHub)
  - contact form submissions (front-end event only)

NETLIFY
- Add netlify.toml with:
  - build command
  - publish directory
  - redirects if needed (should be minimal for Next)
- Ensure Netlify Forms works:
  - include the hidden form-name input
  - add data-netlify="true"
  - add honeypot via data-netlify-honeypot
- Provide README instructions for:
  - local dev
  - build
  - deploy to Netlify
  - adding a new project MDX file

DELIVERABLES
1) A fully working Next.js project with the pages above.
2) Sample content for each page, easy to edit.
3) Projects index with working tag filter and keyword search.
4) At least 4 sample project detail pages generated from content files.
5) Clean, cohesive styling and layout system.
6) README with setup and maintenance instructions.

ACCEPTANCE CHECKLIST (verify before finishing)
- All 7 pages exist and have consistent header/footer.
- Home includes hero, CTAs, featured work (3), what-I-do, footer.
- /projects has search + tag filtering, links to detail pages.
- Project detail template contains all required sections in order.
- Contact form is wired for Netlify, has honeypot, and shows success state on submission.
- Mobile nav works.
- No broken internal links.
- Reasonable Lighthouse-friendly defaults (fast load, minimal JS, optimized images).
- SEO: metadata present, sitemap.xml, robots.txt, OG tags.

NOW IMPLEMENT
- Create the Next.js codebase, file structure, components, content model, and sample content.
- Keep code clean and readable.
- When you make a design decision, bias toward simplicity and maintainability.
- Output the full repository structure and all required files.