My objective
My goal was to enable recruiters and decision-makers to quickly understand my career trajectory by anchoring my work within the organizations I’ve contributed to.
To achieve this, I introduced a new data architecture aligned with a natural scanning pattern:
Organization → Impact → Supporting Work
This required shifting the portfolio from a traditional project listing to a story-driven, credibility-centric experience, where each organization becomes a narrative entry point into my contributions and outcomes.
Step1: Process Planning
I began with a design-first approach, updating high-fidelity prototypes in Figma to reflect the new architecture:
Renamed key navigation items to improve information scent and clarity
Repurposed the homepage to feature organizations as primary entities
Repositioned the “Blog” section into a Case Studies hub
Redesigned routing and page hierarchy to support the new content relationships
Updated Figma prototypes illustrating the transition to an organization-first narrative structure, aligning content hierarchy with a company → impact → case study flow.
Step 2: Gradual Structural Refactor
This transformation required coordinated changes across multiple layers:
Content layer: Refactoring content models in Contentful
Application layer: Updating routing and file structure in Next.js (App Router)
Component layer: Refactoring UI components to support new data relationships
Because of tight coupling between content models and frontend queries, this had to be executed incrementally to avoid breaking dependencies.
Step 3: Incremental Deployment Strategy
To minimize disruption, I adopted a progressive rollout strategy, deploying changes in controlled phases:
~75% of the navigation system updated
“Organization” content model successfully introduced and partially integrated
Homepage dynamically rendering new data structures
Organization detail pages still under development
Live environment showing partial rollout, including updated navigation and early integration of the Organization content model on the homepage.
When Systems Break: A Controlled Failure
Despite careful planning, I introduced a breaking change by prematurely modifying a content model in Contentful.
This resulted in:
Invalid GraphQL queries
Runtime rendering failures
A temporarily unusable development environment
This incident reinforced the importance of:
Schema versioning strategies
Backward compatibility during migrations
Coordinated frontend/backend evolution
Step 4: Building the Organization Detail Page
The Organization page serves as a contextual container for:
Company overview
My role and contributions
Associated case studies and deliverables
At this stage:
Core data is successfully rendered
Relational content (linked work) is partially implemented
UI refinement (spacing, layout) is intentionally deferred
User flow from homepage to Organization detail page, demonstrating dynamic routing and early-stage content rendering.
Final Step: Migrating “Blog” to “Case Studies”
The final step involved renaming and restructuring the “Blog” section into a Case Studies platform, including:
Route refactoring (/blog → /case-studies)
Navigation updates
Content model alignment
Query and component updates
This operation was accelerated using GitHub Copilot, which significantly reduced manual refactoring effort.
AI-assisted refactor using GitHub Copilot to automate route updates, component changes, and content integration for the Case Studies migration.
Epilogue: The Role of AI in Development
AI tools such as GitHub Copilot and ChatGPT played a critical role throughout this project:
Architecture ideation: Suggested implementing slug-based routing for improved SEO and usability
Continuous validation: Automated build checks and error resolution during development
System design feedback: Identified limitations in content modeling and proposed improvements
Component refactoring: Assisted in adapting UI components to new data structures
Debugging acceleration: Rapidly diagnosed issues caused by mismatched API responses (GraphQL vs REST CDA)
Next steps
This initiative is part of a broader effort to reposition my portfolio in response to evolving industry expectations, particularly the impact of AI on software development workflows.
Next priorities include:
Refactoring and scaling my component library to align with the new design system
Enhancing content relationships between organizations and case studies
Improving accessibility and performance across the platform
Continuing to integrate AI-assisted workflows into development and design processes