【AIプログラミング】ノーコードでポートフォリオサイト（仮）作ってみた✨｜YouWare｜エンジニア

Create a clean, modern, responsive one-page portfolio website for an illustrator.

Site name: きょんのアトリエ
Catchphrase: 「頭の中のイメージを形にする」
Theme: pastel pink focused, soft minimal, gentle & calm, rounded corners, subtle shadows, lots of whitespace.
Language: Japanese (short, cute UI labels).
No contact form. No login.

Goal: showcase illustration works and drive visitors to external links (note, X, Threads).

IMPORTANT: Use the attached images (exactly 6)
- I will attach 6 portrait-oriented illustration images.
- Use the attached images for the gallery (thumbnails + lightbox). Do not use generic placeholders for these 6 items.
- Create exactly 6 gallery items in the same order as the attachments.
- For each image, generate:
  - title (Japanese, short)
  - 1-line caption (Japanese)
  - tags (pick 2–4) from: ["AI","オリジナル","ファンアート","パステル","夜景","キャラクター"]
  - date (use a placeholder like "2026-01-01" if unknown)
  - alt text (Japanese)

Page structure (single page)

1) Sticky Header / Nav
- Left: きょんのアトリエ
- Right nav: 「作品」「シリーズ」「投稿」「リンク」
- Smooth scrolling
- Add a small “TOP” button that appears after scrolling.

2) Hero
- Title + catchphrase
- 2–3 lines intro (Japanese, calm). Include soft note: 「AI支援を活用することがあります」
- CTA buttons:
  - Primary: 「作品を見る」 (scroll to Gallery)
  - Secondary: 「リンク」 (scroll to Links)
- Add tag chips under CTA: 「パステル」「光」「キャラクター」「AI支援あり」

3) About
- Short profile paragraph (placeholder)
- “できること” bullets:
  - イラスト制作（キャラ/一枚絵/サムネ）
  - AI生成の活用（ラフ/構図/バリエーション）
  - 投稿・発信（note / X / Threads）
- Optional mini timeline: イメージ → ラフ → 仕上げ

4) Featured Illustrations (Main Gallery) — evenly spaced, portrait-friendly
- Show all 6 items on first view (no pagination).
- Clean evenly-spaced grid with consistent card sizing.
- Fix thumbnail aspect ratio to 3:4 for all items (e.g., CSS aspect-ratio: 3/4).
- Thumbnails: object-fit: cover; object-position: center.
- Responsive layout:
  - Mobile: 2 columns (3 rows)
  - Desktop: 3 columns (2 rows)
- Each card shows: thumbnail + title + 1-line caption + tag chips + date.
- Add simple tag filter buttons: 「すべて」「AI」「オリジナル」「ファンアート」

5) Lightbox modal (from gallery)
- Portrait-friendly viewing without cropping:
  - image uses object-fit: contain; max-height: 80vh.
- Show title, caption, tags, date.
- Next/prev buttons + arrow keys.
- ESC closes; focus trap; close button with aria-label; keyboard accessible.

6) Series / Collections
- Create 3 collection cards (placeholders): パステルシリーズ / 夜景 / キャラデザイン
- Each card has a short description and a “見る” action that scrolls to Gallery and applies a related filter (simple implementation OK).

7) Latest Posts (note placeholders)
- 3 placeholder items with title, date, 2-line excerpt, and 「読む」 button (external link placeholder, open in new tab).

8) Links (only these three)
- Big icon buttons (SVG) for note / X / Threads.
- Use these URLs:
  - note: https://note.com/kyownruby
  - X: https://x.com/kyownruby
  - Threads: https://www.threads.com/@kyownruby
- Open in new tab with rel="noopener noreferrer".

9) Footer
- copyright
- small disclaimer: 「AI支援を含む作品があります」

Data/editability requirements (important)
- Put all links, the 6 gallery items (generated from attachments), collections, and posts into a single editable object at the top:
  const SITE_DATA = { links, gallery, collections, posts }
- Make it easy to replace images later.

Tech requirements
- Deliver a working page with HTML/CSS/JS (no build step).
- Mobile-first responsive.
- Accessibility: aria labels, visible focus styles, keyboard controls for modal, sufficient contrast.
- SEO: meta title/description + Open Graph placeholders.
- Performance: lazy-load images.