The portfolio you're using, built with Next.js and Sanity: structured content, reusable interface components, and a tested delivery workflow.
I defined the product requirements, selected the architecture, and directed the design and implementation. My responsibility included reviewing AI-assisted changes, checking the interface, maintaining project documentation, and deciding which changes were ready to merge and release.
Create a portfolio that can grow beyond a fixed set of pages. Projects need room for detailed technical explanations, while the homepage must remain concise. Content changes should be possible without editing application code.
The interface also needs to work across screen sizes and themes, support keyboard navigation, and respect reduced-motion preferences.
Separate structured CMS content, validated server-side page models, and reusable interface sections. Develop components in Storybook and check implementation through tests, browser review, and CI.
The existing portfolio application runs on vosipov.dev with CMS-managed content, detailed case studies, a shared interface system, draft preview, and automated delivery checks.
It demonstrates how I connect content modelling, frontend architecture, interaction design, and verification within one project.
Sanity stores the site's editorial content: projects, profile, skills, navigation, shared labels, and SEO fields. Project documents support summaries, technical modules, galleries, and links to related work.
Next.js reads that content on the server through GROQ queries. Adapters validate and transform CMS responses into typed data for components. Components receive props and remain separate from CMS access and credentials.
Pages use a shared section registry and composer. Editors can manage supported sections within the design system rather than entering arbitrary executable content.
Published pages and draft preview use separate content perspectives. Protected preview lets me inspect editorial changes before publication.
The content layer combines cached page models with signed webhook revalidation. This keeps the publishing workflow separate from code deployments while retaining a fallback cache lifetime.
I organised the interface by responsibility: primitives, blocks, layout, sections, and compositions. Storybook documents reusable components and their states using independent demonstration data.
Tailwind CSS and shared theme tokens keep the visual language consistent. Light and dark themes use the same component structure, with dedicated checks around theme initialisation and stored preferences.
Components handle composition; dedicated hooks manage behaviour such as scrolling, dialogs, and theme preferences. Shared animation variants and transitions live outside component render logic.
Dialogs and media views include keyboard behaviour, focus management, and scroll locking. Motion uses Framer Motion and shared animation recipes, with reduced-motion preferences considered as part of the interaction model.
I used Codex to assist with implementation, content preparation, and iteration. Requirements and decisions were maintained in Confluence and a local documentation snapshot, work was tracked in Jira, and layouts were developed in Figma. Git and Storybook hold the implemented components and design tokens; Sanity holds the published content.
I reviewed the generated work, requested revisions, and used automated checks and browser verification to assess the result. I remain responsible for the architecture, accepted changes, and claims made in this case study.
Vitest covers application logic and component interactions. Playwright checks application journeys and Storybook integration; axe-core supports automated accessibility checks. These checks complement manual review of responsive layouts, themes, keyboard behaviour, and motion.
GitHub Actions runs linting, formatting, schema consistency, type checks, builds, and tests. Changes go through pull requests and owner review before merging. Vercel provides preview deployments and production hosting.
In a PageSpeed Insights run on 6 November 2026, the published homepage scored 100 for Performance, Accessibility, Best Practices and SEO on both mobile and desktop. The mobile run reported FCP and LCP of 0.8 s, TBT of 0 ms, CLS of 0.003 and Speed Index of 2.1 s. It used an emulated Moto G Power, Slow 4G and Lighthouse 13.6.0. These are individual lab results captured before this case study and homepage section were added. No real-user field data was available.
The existing portfolio application runs on vosipov.dev with CMS-managed content, detailed case studies, a shared interface system, draft preview, and automated delivery checks. It demonstrates how I connect content modelling, frontend architecture, interaction design, and verification within one project.
I defined the product requirements, selected the architecture, and directed the design and implementation. My responsibility included reviewing AI-assisted changes, checking the interface, maintaining project documentation, and deciding which changes were ready to merge and release.
Have a project, a technical challenge, or a collaboration in mind? Send me a message.
