My personal website
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

moving my project management scheiss to a local dir to avoid polluting to mainframes

+3 -246
+3
.gitignore
··· 22 22 *.njsproj 23 23 *.sln 24 24 *.sw? 25 + 26 + # Project Management BS 27 + .documentation/
-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