My personal website
moving my project management scheiss to a local dir to avoid polluting to mainframes
+3
-246
+3
.gitignore
+3
.gitignore
-246
PROJECT_STATE.md
-246
PROJECT_STATE.md
···
1
-
# Portfolio Project - Current State Documentation
2
-
3
-
**Generated:** 2025-11-07
4
-
**Status:** Mid-Refactor
5
-
6
-
## Project Overview
7
-
8
-
React 18 + TypeScript portfolio site built with Vite, using Tailwind CSS for styling and React Router for navigation. Data-driven content from JSON files converted from CSV sources.
9
-
10
-
---
11
-
12
-
## Technology Stack
13
-
14
-
- **Framework:** React 18.3.1 + TypeScript 5.6.2
15
-
- **Build Tool:** Vite 7.1.10
16
-
- **Router:** React Router DOM 6.26.2
17
-
- **Styling:** Tailwind CSS 3.4.13 with custom fluid typography plugin
18
-
- **SEO:** react-helmet-async
19
-
- **Icons:** Heroicons & Lucide React
20
-
21
-
---
22
-
23
-
## Site Map (Current vs. Goal)
24
-
25
-
### Current Pages (3/6)
26
-
1. ✅ **Home** (`/`) - Up-to-date
27
-
2. ✅ **About** (`/about`) - Up-to-date
28
-
3. 🟡 **Works** (`/works`) - Structure exists, needs data integration
29
-
30
-
### Goal Pages (To Be Created)
31
-
4. ⚪ **Writing** (`/writing`) - Will consume Bluesky PDS content
32
-
5. ⚪ **Links** (`/links`) - Personal linktree style page
33
-
6. ⚪ **Contact** (`/contact`) - Contact page
34
-
35
-
---
36
-
37
-
## Component Organization
38
-
39
-
### Current Structure
40
-
27 component directories with mixed organization patterns (mid-refactor)
41
-
42
-
### Target Component Structure (4-File System)
43
-
```
44
-
/ComponentName/
45
-
├── ComponentName.tsx # Component implementation
46
-
├── ComponentName.types.ts # TypeScript interfaces
47
-
├── ComponentName.styles.ts # Tailwind class objects
48
-
└── ComponentName.constants.ts # Constants & config
49
-
```
50
-
51
-
### Components Following Pattern (3-file only, NO constants yet)
52
-
- ✅ Heading, Button, Link, Paragraph, Banner, Artwork, Divider
53
-
- ✅ Section (with theme context provider)
54
-
- ✅ PostCarousel, Skills, Tags, Events, Facts, Timeline
55
-
56
-
### Components Needing Refactor
57
-
- Card variants (multiple files in one folder)
58
-
- Navigation components (BackButton, ThemeToggle)
59
-
- Footer, Logo, Breadcrumb (single files)
60
-
- Section/Home/* components (old pattern)
61
-
- home/* components (incomplete)
62
-
63
-
---
64
-
65
-
## Data Management
66
-
67
-
### Protected Data Files (`src/data/`)
68
-
69
-
**JSON Files** (`src/data/json/`):
70
-
- `articles.json` - 8.8 KB - Publication data
71
-
- `casestudies.json` - 14.3 KB - Portfolio projects (16 items)
72
-
- `companies.json` - 6.3 KB - Client information
73
-
- `content.json` - 68.9 KB - Combined dataset
74
-
- `jobs.json` - 17.2 KB - Employment history
75
-
- `skills.json` - 4.1 KB - Professional skills
76
-
77
-
**CSV Source Files** (`src/data/csv/`):
78
-
Expected format: "Barry Prendergast - [Type].csv"
79
-
- Companies, Skills, Portfolio, Jobs, Articles
80
-
81
-
**Data Access Layer** (`src/lib/data/getData.ts`):
82
-
```typescript
83
-
getContent() // All data combined
84
-
getArticles() // Article[]
85
-
getCaseStudies() // CaseStudy[]
86
-
getCompanies() // Company[]
87
-
getJobs() // Job[]
88
-
getSkills() // Skill[]
89
-
getItemBySlug() // Generic lookup
90
-
getFeaturedArticles() // Filtered
91
-
getLatestCaseStudies() // Sorted & limited
92
-
```
93
-
94
-
**Conversion Script:**
95
-
```bash
96
-
npm run convert-content # Runs src/scripts/convertCsvToJson.ts
97
-
```
98
-
99
-
---
100
-
101
-
## Design System
102
-
103
-
### Color Palette
104
-
105
-
**Primary Colors** (from `tailwind.config.ts`):
106
-
- **Blue:** `#0000ff` (bones-blue) - Primary background
107
-
- **White:** `#ffffff` (bones-white) - Text & borders
108
-
- **Black:** `#000000` (bones-black) - Future text color
109
-
- **Yellow:** `bones-yellow` - Focus, highlights, text selection
110
-
111
-
**Neutral Palette:**
112
-
- bones-dimgray (#282828), bones-gainsboro (#DCDCDC)
113
-
- bones-gray (#808080), bones-ghostwhite (#F8F8FF)
114
-
- bones-linen (#FAF0E6), bones-floralwhite (#FFFAF0)
115
-
116
-
**Accent Colors:**
117
-
- Yellows: bones-gold, bones-goldenrod
118
-
- Blues: bones-aliceblue, bones-mediumblue, bones-midnightblue
119
-
- Reds: bones-red, bones-firebrick, bones-darkred
120
-
- Purples: bones-magenta, bones-rebeccapurple, bones-indigo
121
-
122
-
### Typography
123
-
124
-
**Fonts:**
125
-
- **Sans:** DM Sans - Body text
126
-
- **Serif:** DM Serif Display - Display text
127
-
128
-
**Fluid Type Plugin** (Custom Tailwind):
129
-
```css
130
-
/* Responsive scaling with clamp() */
131
-
.fluid-preset-h1 /* 28px → 88px (360px → 1200px viewport) */
132
-
.fluid-preset-h2 /* 22px → 48px */
133
-
.fluid-preset-h3 /* 18px → 32px */
134
-
.fluid-preset-body /* 16px → 18px */
135
-
```
136
-
137
-
### Layout Principles
138
-
139
-
**Requirements:**
140
-
- ✅ Use CSS Grid and Flexbox appropriately
141
-
- ✅ NO margin - use padding and gap only
142
-
- ✅ Scale text between breakpoints
143
-
- ✅ Apply line-height to every text element
144
-
- ✅ Tailwind utilities everywhere
145
-
146
-
---
147
-
148
-
## Current Styling Implementation
149
-
150
-
### Pattern 1: White borders on blue background
151
-
Used in: HomePage, AboutPage
152
-
- Background: `#0000ff`
153
-
- Text: White
154
-
- Borders: White `#ffffff`
155
-
- Links/Buttons: Various scales
156
-
157
-
### Pattern 2: White background (future)
158
-
- Background: White `#ffffff`
159
-
- Text: Black `#000000`
160
-
- Links: Blue `#0000ff`
161
-
162
-
### Theme System
163
-
Section component provides theme context:
164
-
- `mono`, `gray`, `yellow`, `blue`, `red`, `purple`
165
-
- Child components (Button, Heading, etc.) are theme-aware
166
-
167
-
---
168
-
169
-
## Git Workflow
170
-
171
-
**Current Branch:** `main`
172
-
**Status:** Clean working directory
173
-
174
-
**Branching Strategy:**
175
-
- ⚠️ **NEVER push to main without explicit approval**
176
-
- Create feature branches for all work
177
-
- Merge only when approved
178
-
179
-
**Recent Commits:**
180
-
```
181
-
47c702b Merge pull request #10
182
-
f241a4e update to prepare to merge
183
-
3fd813f GitButler Workspace Commit
184
-
9ae9db4 Merge pull request #9
185
-
```
186
-
187
-
---
188
-
189
-
## Immediate Tasks
190
-
191
-
### 1. ✅ Project Documentation (this file)
192
-
193
-
### 2. Component Organization
194
-
- Split multi-component folders into individual component folders
195
-
- Add missing `.constants.ts` files where needed
196
-
- Standardize all components to 4-file system
197
-
198
-
### 3. Data Protection
199
-
- Verify `src/data/` structure integrity
200
-
- Document data dependencies
201
-
- Ensure conversion scripts work correctly
202
-
203
-
### 4. Styling Audit
204
-
- Review styling consistency across components
205
-
- Ensure no margin usage
206
-
- Verify fluid typography implementation
207
-
208
-
### 5. Page Development
209
-
- Fix WorksPage data integration
210
-
- Create Writing page (Bluesky integration)
211
-
- Create Links page
212
-
- Create Contact page
213
-
214
-
---
215
-
216
-
## Key File Locations
217
-
218
-
```
219
-
portfolio/
220
-
├── src/
221
-
│ ├── components/ # 27 component directories
222
-
│ ├── pages/ # HomePage, AboutPage, WorksPage
223
-
│ ├── data/
224
-
│ │ ├── json/ # Data files (protected)
225
-
│ │ └── csv/ # Source CSV files
226
-
│ ├── lib/
227
-
│ │ ├── data/ # getData.ts - data access layer
228
-
│ │ └── utils.ts # cn() utility
229
-
│ ├── scripts/ # convertCsvToJson.ts
230
-
│ ├── types/ # TypeScript definitions
231
-
│ └── main.tsx # Entry point with routing
232
-
├── plugins/ # fluidType.ts - custom Tailwind plugin
233
-
├── tailwind.config.ts # Design system configuration
234
-
└── vite.config.ts # Build configuration
235
-
```
236
-
237
-
---
238
-
239
-
## Notes
240
-
241
-
- **SEO:** All pages use Helmet with JSON-LD structured data
242
-
- **Routing:** Smart Link component handles internal/external URLs
243
-
- **Dark Mode:** Enabled via `next-themes` (class-based)
244
-
- **Icons:** Both @heroicons and lucide-react available
245
-
- **Code Quality:** ESLint + Prettier configured
246
-
- **No State Management:** Simple JSON data loading, no Redux/Zustand needed