> pmpt

portfolio-site

⭐ Pioneer 📝 Documented
@Raunplaymore (10 projects) · 2 steps · 13.5 KB · 2026-02-24

A minimal developer portfolio site.

#astro#portfolio#tailwind

Clone via terminal:

pmpt clone portfolio-site
1

Starting Prompt

This single prompt is where the project began.

portfolio-site — Product Development Request

What I Want to Build

A minimal developer portfolio site. One page with hero, about, projects grid, blog section (pulls from DEV.to API), and contact form. Fast loading, SEO optimized, dark theme by default.

Additional Context

I'm a frontend developer with 3 years of experience. Want to showcase 6 projects with screenshots. Blog posts should auto-sync from my DEV.to account. Contact form sends to my email via Resend.

Key Features

  • Hero section with animated text
  • About me section
  • Projects grid with screenshots and links
  • Blog section (DEV.to API integration)
  • Contact form (Resend email)
  • Dark theme by default
  • Responsive design
  • SEO meta tags + Open Graph

Tech Stack Preferences

Astro 4, Tailwind CSS, TypeScript

Architecture

  • Framework: Astro 4 SSG — static HTML, zero JS shipped by default
  • Styling: Tailwind CSS with custom colors.brand palette, dark mode as default
  • Blog: Fetches from DEV.to public API (/api/articles?username=xxx) at build time via getStaticPaths
  • Contact: Astro API endpoint /api/contact → Resend SDK for email delivery
  • Deploy: Cloudflare Pages (free tier, fast global CDN)
  • Images: Astro <Image> component for automatic optimization + WebP conversion

Page Structure

src/
├── pages/
│   └── index.astro          # Single page — all sections
├── components/
│   ├── Hero.astro            # Name + title + animated tagline
│   ├── About.astro           # Bio + tech stack badges
│   ├── Projects.astro        # 3x2 grid of project cards
│   ├── ProjectCard.astro     # Screenshot + title + description + links
│   ├── Blog.astro            # Latest 3 posts from DEV.to
│   ├── BlogCard.astro        # Title + date + reading time
│   ├── Contact.astro         # Form → /api/contact
│   └── Footer.astro
├── layouts/
│   └── Layout.astro          # HTML head, meta tags, OG tags
└── styles/
    └── global.css            # Tailwind directives + custom fonts

Please help me build this product based on the requirements above.

Progress

  • Astro project scaffolding + Tailwind setup
  • Layout with SEO meta tags + Open Graph
  • Hero section with CSS animation (typing effect)
  • About section with tech stack badges
  • Projects grid — 6 cards with screenshots, GitHub + live links
  • Blog section — fetches latest 3 posts from DEV.to at build time
  • Contact form with Resend email delivery
  • Dark theme (default) with custom brand colors
  • Fully responsive (mobile-first)
  • Deployed to Cloudflare Pages
  • Analytics (Plausible or Umami)
  • RSS feed for blog section

Snapshot Log

v1 - Initial Plan

  • Defined portfolio requirements: hero, about, projects, blog, contact
  • Chose Astro SSG for zero-JS performance
  • Planned DEV.to API integration for auto-syncing blog posts

v2 - Complete Build

  • Built all sections: Hero (typing animation), About (badges), Projects (3x2 grid), Blog (DEV.to API), Contact (Resend)
  • Custom dark theme with brand colors (#0f172a background, #38bdf8 accent)
  • Lighthouse score: 100/100/100/100
  • Deployed to Cloudflare Pages — builds on every push
  • Contact form tested: emails arrive in ~2 seconds via Resend
  • Blog auto-updates when Cloudflare Pages rebuilds (daily cron or manual trigger)
2

Project Plan

The development plan AI organized from the prompt.

Idea
A minimal developer portfolio site. One page with hero, about, projects grid, blog section (pulls from DEV.to API), and contact form. Fast loading, SEO optimized, dark theme by default.
Core Features
Hero section with animated text; About me section; Projects grid with screenshots and links; Blog section (DEV.to API integration); Contact form (Resend email); Dark theme by default; Responsive design; SEO meta tags + Open Graph
Tech Stack
Astro, Tailwind CSS, TypeScript
3

Development Journey

A summary of 2 snapshots recorded during AI development. Clone the project to explore the full history.

v2 2026:01:15

Complete Build

  • · Built all sections: Hero (typing animation), About (badges), Projects (3x2 grid), Blog (DEV.to API), Contact (Resend)
  • · Custom dark theme with brand colors (#0f172a background, #38bdf8 accent)
  • · Lighthouse score: 100/100/100/100
  • · Deployed to Cloudflare Pages — builds on every push
  • · Contact form tested: emails arrive in ~2 seconds via Resend
  • · Blog auto-updates when Cloudflare Pages rebuilds (daily cron or manual trigger)
Detail

portfolio-site — Product Development Request

What I Want to Build

A minimal developer portfolio site. One page with hero, about, projects grid, blog section (pulls from DEV.to API), and contact form. Fast loading, SEO optimized, dark theme by default.

Additional Context

I'm a frontend developer with 3 years of experience. Want to showcase 6 projects with screenshots. Blog posts should auto-sync from my DEV.to account. Contact form sends to my email via Resend.

Key Features

  • Hero section with animated text
  • About me section
  • Projects grid with screenshots and links
  • Blog section (DEV.to API integration)
  • Contact form (Resend email)
  • Dark theme by default
  • Responsive design
  • SEO meta tags + Open Graph

Tech Stack Preferences

Astro 4, Tailwind CSS, TypeScript

Architecture

  • Framework: Astro 4 SSG — static HTML, zero JS shipped by default
  • Styling: Tailwind CSS with custom colors.brand palette, dark mode as default
  • Blog: Fetches from DEV.to public API (/api/articles?username=xxx) at build time via getStaticPaths
  • Contact: Astro API endpoint /api/contact → Resend SDK for email delivery
  • Deploy: Cloudflare Pages (free tier, fast global CDN)
  • Images: Astro <Image> component for automatic optimization + WebP conversion

Page Structure

src/
├── pages/
│   └── index.astro          # Single page — all sections
├── components/
│   ├── Hero.astro            # Name + title + animated tagline
│   ├── About.astro           # Bio + tech stack badges
│   ├── Projects.astro        # 3x2 grid of project cards
│   ├── ProjectCard.astro     # Screenshot + title + description + links
│   ├── Blog.astro            # Latest 3 posts from DEV.to
│   ├── BlogCard.astro        # Title + date + reading time
│   ├── Contact.astro         # Form → /api/contact
│   └── Footer.astro
├── layouts/
│   └── Layout.astro          # HTML head, meta tags, OG tags
└── styles/
    └── global.css            # Tailwind directives + custom fonts

Please help me build this product based on the requirements above.

Progress

  • Astro project scaffolding + Tailwind setup
  • Layout with SEO meta tags + Open Graph
  • Hero section with CSS animation (typing effect)
  • About section with tech stack badges
  • Projects grid — 6 cards with screenshots, GitHub + live links
  • Blog section — fetches latest 3 posts from DEV.to at build time
  • Contact form with Resend email delivery
  • Dark theme (default) with custom brand colors
  • Fully responsive (mobile-first)
  • Deployed to Cloudflare Pages
  • Analytics (Plausible or Umami)
  • RSS feed for blog section

Snapshot Log

v1 - Initial Plan

  • Defined portfolio requirements: hero, about, projects, blog, contact
  • Chose Astro SSG for zero-JS performance
  • Planned DEV.to API integration for auto-syncing blog posts

v2 - Complete Build

  • Built all sections: Hero (typing animation), About (badges), Projects (3x2 grid), Blog (DEV.to API), Contact (Resend)
  • Custom dark theme with brand colors (#0f172a background, #38bdf8 accent)
  • Lighthouse score: 100/100/100/100
  • Deployed to Cloudflare Pages — builds on every push
  • Contact form tested: emails arrive in ~2 seconds via Resend
  • Blog auto-updates when Cloudflare Pages rebuilds (daily cron or manual trigger)

Files (1)

plan.md
v1 2026:01:10

Initial Plan

  • · Defined portfolio requirements: hero, about, projects, blog, contact
  • · Chose Astro SSG for zero-JS performance
  • · Planned DEV.to API integration for auto-syncing blog posts
Detail

portfolio-site — Product Development Request

What I Want to Build

A minimal developer portfolio site. One page with hero, about, projects grid, blog section (pulls from DEV.to API), and contact form. Fast loading, SEO optimized, dark theme by default.

Additional Context

I'm a frontend developer with 3 years of experience. Want to showcase 6 projects with screenshots. Blog posts should auto-sync from my DEV.to account. Contact form sends to my email via Resend.

Key Features

  • Hero section with animated text
  • About me section
  • Projects grid with screenshots and links
  • Blog section (DEV.to API integration)
  • Contact form (Resend email)
  • Dark theme by default
  • Responsive design
  • SEO meta tags + Open Graph

Tech Stack Preferences

Astro, Tailwind CSS, TypeScript

Please help me build this product based on the requirements above.

  1. First, review the requirements and ask if anything is unclear.
  2. Propose a technical architecture.
  3. Outline the implementation steps.
  4. Start coding from the first step.

I'll confirm progress at each step before moving to the next.

Documentation Rule

Important: Update this document (located at .pmpt/docs/pmpt.md) at these moments:

  • When architecture or tech decisions are finalized
  • When a feature is implemented (mark as done)
  • When a development phase is completed
  • When requirements change or new decisions are made

Files (1)

plan.md