first commit
This commit is contained in:
amari is super swag
parent
251374ec38
commit
13f797395c
15
.gitignore
vendored
15
.gitignore
vendored
@ -3,12 +3,8 @@
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
@ -28,11 +24,9 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
!.env.example
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
@ -48,3 +42,4 @@ next-env.d.ts
|
||||
.wrangler
|
||||
.dev.vars*
|
||||
!.dev.vars.example
|
||||
!.env.example
|
||||
|
||||
15744
cloudflare-env.d.ts
vendored
15744
cloudflare-env.d.ts
vendored
File diff suppressed because it is too large
Load Diff
445
docs/PRD.md
Normal file
445
docs/PRD.md
Normal file
@ -0,0 +1,445 @@
|
||||
# ✧ GRIMMTATTOO — SPANISH REVIVAL WEBSITE
|
||||
### *Product Requirements Document (PRD)*
|
||||
### aesthetic: warm terracotta, olive, stucco, brass • type: fraunces + crimson text + inter • vibe: spanish revival meets vintage tattoo studio
|
||||
|
||||
---
|
||||
|
||||
# ✧ 1. OVERVIEW
|
||||
|
||||
GrimmTattoo is a personal + professional digital home for Amari.
|
||||
Its purpose: *a cozy, architectural, highly personalized creative space* where she can display flash, organize inspiration, manage behind-the-scenes workflow, and enjoy a corner of the internet that feels like HER.
|
||||
|
||||
This PRD outlines:
|
||||
|
||||
- core features
|
||||
- aesthetic + brand rules
|
||||
- detailed user flows
|
||||
- feature-level requirements
|
||||
- component breakdown
|
||||
- Dev/infra notes for OpenNext + Cloudflare + Tailwind + your workflow (tmux, nvim, codex)
|
||||
- stretch goals
|
||||
|
||||
Everything honors the Spanish Revival design language chosen in your inspiration board.
|
||||
|
||||
---
|
||||
|
||||
# ✧ 2. CORE FEATURES (APPROVED)
|
||||
|
||||
### 1. **Virtual Scrapbook** (drag-and-drop collage canvas)
|
||||
### 2. **Flash Vault** (interactive gallery of flash art)
|
||||
### 3. **Music Corner** (playlists + audio embeds)
|
||||
### 4. **Digital Pantry** (recipes, meal prep, inventory, spinner wheel)
|
||||
### 5. **Cat Universe** (profiles, memorial, galleries)
|
||||
### 6. **Secret Love Letter Tab** (hidden URL)
|
||||
### 7. **Global Spanish Revival UI + component system**
|
||||
|
||||
---
|
||||
|
||||
# ✧ 3. BRAND & AESTHETIC SYSTEM
|
||||
|
||||
## ✧ 3.1 COLOR PALETTE (locked)
|
||||
|
||||
**Primary**
|
||||
- terracotta — `#C46A4A`
|
||||
- olive verde — `#7D8E6A`
|
||||
- stucco cream — `#F6EFE4`
|
||||
- coffee brown — `#4A3628`
|
||||
|
||||
**Neutrals**
|
||||
- old iron black — `#1A1A1A`
|
||||
- brass — `#B08A57`
|
||||
|
||||
**Highlights**
|
||||
- adobe red — `#9A3E2F`
|
||||
- dusty sage — `#C3D0BA`
|
||||
- parchment — `#FDF8F1`
|
||||
|
||||
### ✧ 3.1.1 TailwindCSS Tokens
|
||||
Use custom theme extension:
|
||||
|
||||
```js
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
terracotta: '#C46A4A',
|
||||
olive: '#7D8E6A',
|
||||
stucco: '#F6EFE4',
|
||||
coffee: '#4A3628',
|
||||
iron: '#1A1A1A',
|
||||
brass: '#B08A57',
|
||||
adobe: '#9A3E2F',
|
||||
sage: '#C3D0BA',
|
||||
parchment: '#FDF8F1'
|
||||
},
|
||||
fontFamily: {
|
||||
display: ['Fraunces', 'serif'],
|
||||
body: ['Crimson Text', 'serif'],
|
||||
ui: ['Inter', 'sans-serif']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
⸻
|
||||
|
||||
✧ 3.2 TYPOGRAPHY SYSTEM
|
||||
|
||||
Display Serif (H1–H3)
|
||||
|
||||
Fraunces — bold or semibold
|
||||
Use for: titles, headers, flash names, scrapbook section titles
|
||||
|
||||
Body Serif (P, long text)
|
||||
|
||||
Crimson Text
|
||||
Use for: descriptive text, blog-like entries, stories
|
||||
|
||||
UI Sans (buttons/inputs/nav)
|
||||
|
||||
Inter
|
||||
Use for: forms, labels, utility elements, pagination
|
||||
|
||||
⸻
|
||||
|
||||
✧ 3.3 UI SHAPES / MOTIFS
|
||||
• rounded-but-structured rectangles
|
||||
• arched headers + image frames (spanish windows)
|
||||
• thin brass borders
|
||||
• lightly textured parchment backgrounds
|
||||
• terracotta drop-shadows (warm soft shadows)
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4. FEATURE REQUIREMENTS + USER FLOWS
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.1 VIRTUAL SCRAPBOOK (CORE FEATURE)
|
||||
|
||||
✧ Purpose
|
||||
|
||||
A drag-and-drop collage builder where Amari can pin inspo, frames, stickers, notes, and color swatches. Auto-saves.
|
||||
|
||||
✧ User Flow
|
||||
|
||||
1. user opens /scrapbook
|
||||
• sees a parchment background canvas
|
||||
• sidebar on left with assets
|
||||
• toolbar on right with manipulation tools (rotate, scale, duplicate, delete, layer order)
|
||||
|
||||
2. user adds elements
|
||||
|
||||
Sidebar Element Categories:
|
||||
• Uploads (user images)
|
||||
• Stickers (roses, webs, frames, tape strips, sparkles)
|
||||
• Paper textures
|
||||
• Color swatches
|
||||
• Text notes (handwritten + serif)
|
||||
|
||||
User drags element onto canvas → element appears with bounding box + rotation handle.
|
||||
|
||||
3. editing
|
||||
|
||||
Toolbar actions:
|
||||
• rotate
|
||||
• scale
|
||||
• flip horizontal
|
||||
• duplicate
|
||||
• delete
|
||||
• send to front/back
|
||||
• lock element
|
||||
|
||||
4. text editing
|
||||
|
||||
Double-click text box → inline text editor
|
||||
Font options: handwritten (Caveat) or serif (Crimson)
|
||||
|
||||
5. auto-save
|
||||
|
||||
LocalStorage (no login)
|
||||
OR user account storage (future)
|
||||
|
||||
Autosave events triggered on element add/remove/move.
|
||||
|
||||
6. export
|
||||
|
||||
Button: “Save Snapshot”
|
||||
Outputs: PNG, JPG
|
||||
Optional: “Print layout” (8.5x11 with safe margins)
|
||||
|
||||
✧ Requirements Summary
|
||||
• drag & drop via HTML5 or library like Konva.js / React-DnD
|
||||
• autosave state as JSON
|
||||
• rendering to canvas for export
|
||||
• mobile view: restricted editing, mostly viewer-only
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.2 FLASH VAULT
|
||||
|
||||
✧ Purpose
|
||||
|
||||
Showcase all flash artwork in luxurious framed displays with microinteractions.
|
||||
|
||||
✧ User Flow
|
||||
|
||||
1. user enters /flash
|
||||
|
||||
Sees grid of vintage frames (iron + brass).
|
||||
|
||||
Hover → frame “wiggles” slightly.
|
||||
Click → opens detail modal/page.
|
||||
|
||||
2. detail page includes:
|
||||
• large image
|
||||
• name (Fraunces, terracotta)
|
||||
• story (Crimson body text)
|
||||
• tags (traditional, color, repeatable)
|
||||
• size + price
|
||||
• “Book This” button (olive background, brass border) linking to GlossGenius
|
||||
• related flash suggestions
|
||||
|
||||
3. admin flow (future enhancement)
|
||||
|
||||
Add new flash via admin panel:
|
||||
• upload image
|
||||
• write story
|
||||
• set tags
|
||||
• set pricing
|
||||
• toggle availability
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.3 MUSIC CORNER
|
||||
|
||||
✧ Purpose
|
||||
|
||||
A space for playlists, audio uploads, and musical inspirations.
|
||||
|
||||
✧ User Flow
|
||||
|
||||
1. user visits /music
|
||||
|
||||
Sees cards styled like old album covers.
|
||||
|
||||
2. playlist cards
|
||||
|
||||
Each tile includes:
|
||||
• album cover frame
|
||||
• title
|
||||
• embedded Spotify player
|
||||
• optional text: “music that inspired this flash collection”
|
||||
|
||||
3. personal audio
|
||||
|
||||
Optional: file uploader for short bass riffs.
|
||||
Audio player styled with brass accents + terracotta buttons.
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.4 DIGITAL PANTRY
|
||||
|
||||
✧ Purpose
|
||||
|
||||
Store recipes, meal prep rotations, pantry inventory, grocery lists.
|
||||
|
||||
✧ User Flow
|
||||
|
||||
1. user enters /pantry
|
||||
|
||||
Tabs:
|
||||
• recipes
|
||||
• meal prep
|
||||
• grocery lists
|
||||
• pantry inventory
|
||||
• meal spinner
|
||||
|
||||
2. recipes
|
||||
|
||||
Click card → see ingredients, instructions, photos.
|
||||
|
||||
3. meal prep
|
||||
|
||||
Create weekly plan.
|
||||
|
||||
4. grocery list
|
||||
|
||||
Editable checklist stored in LocalStorage.
|
||||
|
||||
5. inventory
|
||||
|
||||
Editable list w/ categories like:
|
||||
• grains
|
||||
• proteins
|
||||
• spices
|
||||
• snacks
|
||||
|
||||
6. spinner wheel
|
||||
|
||||
Random meal generator (use canvas or SVG rotating wheel).
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.5 CAT UNIVERSE
|
||||
|
||||
✧ Purpose
|
||||
|
||||
A dedicated area for her cats, including a memorial.
|
||||
|
||||
✧ User Flow
|
||||
|
||||
1. home page for /cats
|
||||
|
||||
Shows portrait cards:
|
||||
• miso soup
|
||||
• honey-boy
|
||||
• coffee june-bean
|
||||
• mochi (memorial)
|
||||
|
||||
2. individual cat pages
|
||||
|
||||
Include:
|
||||
• photo gallery
|
||||
• middle names
|
||||
• personality traits
|
||||
• birth/adoption date
|
||||
• fun facts
|
||||
• favorite toys
|
||||
• a “mood today” slider
|
||||
|
||||
3. mochi memorial
|
||||
|
||||
Soft animation:
|
||||
• faint falling sparkles
|
||||
• soft music option
|
||||
• letter-writing box (saved locally)
|
||||
|
||||
⸻
|
||||
|
||||
✧ 4.6 SECRET LOVE LETTER TAB
|
||||
|
||||
✧ Purpose
|
||||
|
||||
A hidden URL containing a surprise page for Amari.
|
||||
|
||||
Proposed URL
|
||||
|
||||
/blue-room or /casa-azul
|
||||
|
||||
Features
|
||||
• handwritten-style note (Caveat font)
|
||||
• slideshow of personal photos
|
||||
• audio file (voice memo)
|
||||
• fade-in animations
|
||||
• password optional
|
||||
• invisible-from-nav
|
||||
|
||||
⸻
|
||||
|
||||
✧ 5. GLOBAL COMPONENT LIBRARY (UI KIT)
|
||||
|
||||
✧ Buttons
|
||||
• olive filled with brass border
|
||||
• terracotta filled with cream text
|
||||
• brass outline buttons for secondary CTA
|
||||
|
||||
✧ Cards
|
||||
• parchment or stucco backgrounds
|
||||
• brass thin borders
|
||||
• subtle terracotta shadow
|
||||
|
||||
✧ Navigation
|
||||
• horizontal bar
|
||||
• terracotta background
|
||||
• cream text in Fraunces
|
||||
• hover → olive or brass underline
|
||||
|
||||
✧ Footer
|
||||
• stucco background
|
||||
• iron text
|
||||
• ghosts of spanish patterns (low opacity tiles)
|
||||
|
||||
✧ Modals
|
||||
• parchment with brass framing
|
||||
• close button in iron
|
||||
|
||||
✧ Inputs
|
||||
• cream background
|
||||
• coffee brown border
|
||||
• inter ui font
|
||||
|
||||
⸻
|
||||
|
||||
✧ 6. INFORMATION ARCHITECTURE
|
||||
|
||||
Main Nav
|
||||
• Home
|
||||
• Flash Vault
|
||||
• Scrapbook
|
||||
• Music
|
||||
• Pantry
|
||||
• Cats
|
||||
• Contact (optional)
|
||||
|
||||
Hidden
|
||||
• /blue-room
|
||||
|
||||
⸻
|
||||
|
||||
✧ 7. DEVELOPMENT NOTES
|
||||
|
||||
Framework
|
||||
|
||||
OpenNext + Cloudflare Pages
|
||||
• build static or hybrid pages
|
||||
• scrapbook: client-side heavy
|
||||
|
||||
File storage
|
||||
• localStorage for scrapbook & pantry
|
||||
• cloud uploads optional later
|
||||
|
||||
Version Control
|
||||
• push to self-hosted Gitea
|
||||
• main branch protected
|
||||
• dev branches per feature
|
||||
|
||||
Workflow
|
||||
• use tmux pane 1 for server, pane 2 for editor
|
||||
• use codex for scaffold generation
|
||||
• tailwind jit enabled
|
||||
• use components library folder: /components/ui
|
||||
• use /data folder for static JSON like recipes or flash metadata
|
||||
|
||||
⸻
|
||||
|
||||
✧ 8. STRETCH FEATURES
|
||||
• user accounts for saved scrapbook notebooks
|
||||
• admin panel for uploading flash
|
||||
• light/dark mode (spanish revival dusk version)
|
||||
• interactive courtyard home page
|
||||
• animated arched transitions
|
||||
• global search
|
||||
• client booking portal
|
||||
|
||||
⸻
|
||||
|
||||
✧ 9. SUCCESS METRICS
|
||||
• scrapbook loads under 150ms
|
||||
• flash vault navigation under 80ms
|
||||
• no layout shifts (CLS < 0.1)
|
||||
• lighthouse performance > 90
|
||||
• accessible color contrast for text
|
||||
• stable mobile experience
|
||||
|
||||
⸻
|
||||
|
||||
✧ 10. FINAL MOOD SUMMARY
|
||||
|
||||
The entire site should feel like:
|
||||
|
||||
a vintage spanish villa, sun-warmed, filled with plants, arches, terracotta tiles, brass lanterns, and nostalgia — but with modern tattoo artist functionality built underneath.
|
||||
|
||||
Elegance + warmth + creative freedom.
|
||||
|
||||
|
||||
|
||||
BIN
docs/UI-inspiration-board.png
Normal file
BIN
docs/UI-inspiration-board.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
@ -1,9 +1,9 @@
|
||||
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
|
||||
|
||||
export default defineCloudflareConfig({
|
||||
// Uncomment to enable R2 cache,
|
||||
// It should be imported as:
|
||||
// `import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";`
|
||||
// See https://opennext.js.org/cloudflare/caching for more details
|
||||
// incrementalCache: r2IncrementalCache,
|
||||
// Uncomment to enable R2 cache,
|
||||
// It should be imported as:
|
||||
// `import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";`
|
||||
// See https://opennext.js.org/cloudflare/caching for more details
|
||||
// incrementalCache: r2IncrementalCache,
|
||||
});
|
||||
|
||||
18535
package-lock.json
generated
Normal file
18535
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,13 +21,13 @@
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/node": "^20.19.25",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.4.6",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5",
|
||||
"wrangler": "^4.45.4"
|
||||
"wrangler": "^4.48.0"
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,3 @@
|
||||
# https://developers.cloudflare.com/workers/static-assets/headers
|
||||
# https://opennext.js.org/cloudflare/caching#static-assets-caching
|
||||
/_next/static/*
|
||||
Cache-Control: public,max-age=31536000,immutable
|
||||
|
||||
@ -21,7 +21,12 @@
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["./cloudflare-env.d.ts", "node"]
|
||||
"types": [
|
||||
"./cloudflare-env.d.ts",
|
||||
"./cloudflare-env.d.ts",
|
||||
"node",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
*/
|
||||
{
|
||||
"$schema": "node_modules/wrangler/config-schema.json",
|
||||
"name": "next",
|
||||
"name": "todo",
|
||||
"main": ".open-next/worker.js",
|
||||
"compatibility_date": "2025-11-06",
|
||||
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||
"compatibility_date": "2025-03-01",
|
||||
"compatibility_flags": [
|
||||
"nodejs_compat",
|
||||
"global_fetch_strictly_public"
|
||||
],
|
||||
"assets": {
|
||||
"binding": "ASSETS",
|
||||
"directory": ".open-next/assets"
|
||||
@ -15,4 +18,34 @@
|
||||
"observability": {
|
||||
"enabled": true
|
||||
}
|
||||
/**
|
||||
* Smart Placement
|
||||
* Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
|
||||
*/
|
||||
// "placement": { "mode": "smart" }
|
||||
/**
|
||||
* Bindings
|
||||
* Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
|
||||
* databases, object storage, AI inference, real-time communication and more.
|
||||
* https://developers.cloudflare.com/workers/runtime-apis/bindings/
|
||||
*/
|
||||
/**
|
||||
* Environment Variables
|
||||
* https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
|
||||
*/
|
||||
// "vars": { "MY_VARIABLE": "production_value" }
|
||||
/**
|
||||
* Note: Use secrets to store sensitive data.
|
||||
* https://developers.cloudflare.com/workers/configuration/secrets/
|
||||
*/
|
||||
/**
|
||||
* Static Assets
|
||||
* https://developers.cloudflare.com/workers/static-assets/binding/
|
||||
*/
|
||||
// "assets": { "directory": "./public/", "binding": "ASSETS" }
|
||||
/**
|
||||
* Service Bindings (communicate between multiple Workers)
|
||||
* https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
|
||||
*/
|
||||
// "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user