Project Log
Keep this page updated after each major request so it remains a usable handover record.
A running record of what has been migrated, refined, and decided during this Next.js rebuild.
This page captures the work completed in the current migration chat so the project has a built-in handover reference inside the portal itself. It can keep growing as more pages, assets, and refinements are added.
Recent Updates
Added a shared motion system with reduced-motion support, smoother sidebar interactions, subtle CTA/card hover states, and fade-in image handling across the main gallery surfaces.
Completed a mobile, accessibility, and SEO pass across the portal shell, including per-page metadata, canonical URLs, skip-link support, and a branded 404 route.
Normalized CTA buttons and responsive spacing further across `Logo`, `Letter Mark`, `Colours`, `Brand Collateral`, `Corporate Stationary`, `UI & Components`, and the signature builder flow.
Updated `next.config.mjs` so production builds can target an alternate output folder when a local dev server is already using `.next`.
Built out the `UI & Components` page from the supplied desktop source set, including the approved buttons, iconography, navigation controls, content cards, and image-led component tiles.
Rebuilt the `Brand Collateral` page again from the supplied desktop asset folder and expanded the billboard and print sections so each collateral example now has its own download action.
Exported the standalone `signature-tool.html` file to `migration/Mics` so the approved Wetpaint signature generator can be reused on the legacy site without the Next.js app shell.
Built a `Project Log` page and added it to the sidebar for internal handover notes.
Added a mobile and tablet navigation shell so the portal is easier to use on smaller screens.
Removed the broken lightbox behavior from the `Logo` and `Letter Mark` pages after testing issues.
Added per-asset action buttons to the `Corporate Stationary` page so each approved stationery item now has a clear request/download path.
Connected the `Email Signatures` button to a popup signature-builder tool inside the portal.
Updated the signature-builder popup to open fullscreen for a cleaner and more usable workflow.
Moved the signature-builder popup into a true body-level portal so it can sit above the full page instead of being trapped inside the local layout.
Rebuilt the embedded signature tool with the migration logo asset, fixed the copy/download actions, and changed the job title placeholder to `Full Stack Developer`.
Replaced the failing signature-builder copy/download logic with a richer clipboard HTML copy flow and a built-in canvas PNG export.
Added a reusable Wetpaint CI stylesheet file so the same brand system can be carried into another project quickly.
Added a reusable sidebar nav demo with placeholder items to the brand kit.
Rebuilt the `Brand Collateral` page from the migration assets and original screenshot reference.
Synced the remaining Brand Collateral reference file into the public mirror.
Fixed the `Brand Collateral` download button error by removing server-side hover event handlers and using the shared CI button classes instead.
Refreshed the public `Brand Collateral` PNG files from the updated migration source so the page now uses the higher-quality images.
Applied the shared fullscreen lightbox to the `Brand Collateral` images so they can open larger in-gallery.
Removed the `Brand Collateral` lightbox again and kept the page on the shared red pill download button style used across the portal.
Updated the project log so it can be copied quickly and extended after each request.
Project Setup And Audit
Confirmed `C:\Github\brandhubnext-1` as the active migration workspace.
Reviewed the `migration` folder and identified available source content, builder exports, and assets.
Checked the portal routes to understand which pages were already built and which were still placeholders.
Portal Buildout
Built out the missing portal pages so the scaffolded routes had real branded content instead of placeholders.
Reworked `Typography` from the migration material using the local brand fonts and the existing CI structure.
Adjusted existing pages like `Brand Overview`, `Brand Tone`, and `Letter Mark` to better match the original design direction.
Navigation And CI Consistency
Fixed the sidebar logo so the expanded state uses the actual Wetpaint wordmark and the collapsed state centers the `W` properly.
Added shared CI tokens for typography and color usage so the portal pages can follow a more consistent visual system.
Normalized key portal pages and nav styling to use the Wetpaint red, grey, heading, and type scale variables more consistently.
Logo Page Improvements
Reworked the `Logo` page CTA and download panel to better match the CI, including the rounded red button and grey hover state.
Added a sticky in-page section menu with smooth scrolling and an active underline state.
Enlarged imagery in `Rules of Integrity`, `Logo Usage`, and `Incorrect Usage` and removed the over-framed card treatment where it felt off-design.
Imagery Migration
Rebuilt the `Imagery` page from the supplied Oxygen JSON structure rather than keeping the earlier placeholder layout.
Copied the imagery assets from `migration\Imagery` into `public\images\imagery` so they can render directly in Next.js.
Implemented the gallery grids, per-image download buttons, fullscreen viewer, and centered image-bank download CTA.
Responsive Portal Shell
Added a dedicated mobile and tablet navigation pattern with a sticky top bar and slide-out drawer menu.
Updated the portal layout so smaller screens no longer reserve desktop sidebar space.
Prepared the portal for page-by-page responsive refinement instead of relying only on the desktop shell.
Lightbox Rollback On Logo And Lettermark
Tried aligning the `Logo` and `Letter Mark` pages to the same fullscreen viewer pattern used on `Imagery`.
After viewer issues on those pages, removed the lightbox behavior from both and reverted them to stable static images.
Left the `Imagery` page using the fullscreen gallery viewer.
Signature Builder Route
Replaced the embedded iframe-based signature tool with a dedicated top-level `/signature-builder` page.
Added the migration logo asset to `public/images/signature/logo.webp` for the builder preview.
Rebuilt the copy action to write rich HTML signature content and replaced the PNG export with a browser-native canvas render that does not rely on a CDN script.
Reusable Brand Kit
Created a standalone `brand-kit/wetpaint-ci.css` file for reuse in other projects.
Packaged Wetpaint color tokens, typography tokens, panel styles, and CI button styles into one drop-in stylesheet.
Included reusable helper classes for page titles, section titles, lead text, panels, cards, primary/secondary/outline buttons, and a sidebar nav shell with dummy data.
Brand Collateral Rebuild
Rebuilt the `Brand Collateral` page from the migration JSON and screenshot reference rather than the earlier placeholder summary cards.
Copied the supplied collateral PNG assets into `public/images/brand-collateral` so the page can render and download them directly.
Matched the original structure with the intro, grey two-column download band, and the `Brand Application` billboard and magazine ad galleries.
Synced the remaining `WP-json.txt` reference file into the public collateral mirror so the source set is complete.
Current Status
The portal now contains real content across the major route set instead of only placeholders.
The visual system is much closer to the WordPress source, especially for `Logo`, `Letter Mark`, `Colours`, `Typography`, and `Imagery`.
Tablet and mobile now have a dedicated responsive navigation shell instead of relying on the desktop hover sidebar.
The route metadata, canonical tags, skip link, and branded 404 page are now in place for the core portal routes.
The fullscreen lightbox is currently being used on `Imagery`, while `Logo` and `Letter Mark` have been reverted to static image rendering.
Terminal verification is available in the current environment again, including `npm`, `npx`, and `tsc` for local checks.
Suggested Next Steps
Do a browser-side visual QA pass page by page and tune spacing against the original WordPress design.
Replace placeholder download links with final asset URLs where needed.
Continue tightening CI consistency by moving more inline styles into reusable page-level or shared styles.
Keep this page updated after each major request so it acts as an internal change log.
Note: this page is meant to be updated continuously as requests are completed so it can act as a clear migration journal and copy-ready handover note.