This website is treated as a product project in its own right, with both technical and editorial iterations.
Back to projects
Web · Next.js · Product Design
Career Portfolio Website
This project is the website you are currently browsing. The objective is to build a credible portfolio for finance and technology recruiters, with a professional level of finish both in substance, through content quality, project structure, and narrative consistency, and in form, through UX, responsiveness, basic SEO, and maintainability. The site follows an App Router architecture with a strict split between content data and components so iterations remain fast without breaking the interface.
Next.js App RouterTypeScriptTailwind CSSVercelESLint
What this project demonstrates
Ability to turn a simple showcase website into a structured editorial product: data-driven content, detailed technical project pages, UX consistency, and an iterative improvement workflow.
My role
I designed the site architecture, structured the data layer in src/data, created the detailed project pages, improved the technical copywriting, fixed UX and SEO issues, and iterated continuously on overall credibility.
Context
The need was to replace an overly generic portfolio with a more demanding, credible, and results-oriented version for recruiters in quantitative finance, asset management, and technical environments.
Objective
Create a readable and convincing site that can present technical projects in depth while keeping navigation clear and the experience smooth on both mobile and desktop.
Deep dive
Technical reading of the project
The site is structured as a maintainable editorial product: centralized data, reusable components, detailed pages, and a logic of incremental improvement.
- • Core pages: home, about, experience, projects, project details, resume, and contact.
- • Content centralized in src/data to avoid duplication and simplify updates.
- • Dynamic project pages generated through slugs for key projects.
- • Light design system based on Tailwind CSS and theme variables.
- • Vercel deployment with lint and type-check verification before shipping.
Gallery
Key screens and visualizations
Architecture
Technical organization
Data layer
All editorial entities such as projects, experience, navigation, and profile content are grouped in src/data to keep content and presentation clearly separated.
Page layer
App Router in src/app with static routes plus the dynamic /projects/[slug] route to support rich and scalable project pages.
Component layer
Reusable UI components for layout, sections, and cards help preserve visual consistency and limit front-end debt.
Delivery quality
Systematic validation through ESLint and TypeScript to secure fast iterations.
Pipeline
Data flow
- 1.Write or update content inside src/data/*.ts.
- 2.Pages and sections read the data they need.
- 3.Project pages are resolved via slug through getProjectBySlug.
- 4.Technical sections such as architecture, pipeline, limitations, and outcomes are rendered from structured data.
- 5.Quality checks run through lint and type-check before deployment.
- 6.Deployment to Vercel followed by functional validation of critical routes.
Technical choices
Structuring decisions
Content-first architecture
Editorial robustness comes first: content is treated as versioned data rather than inline copy scattered inside components.
Dynamic project route
Using /projects/[slug] lets the portfolio scale to more projects without complicating the application structure.
Feedback-driven iteration
The site improves through successive corrections on credibility, UX, and technical precision rather than through one large rewrite.
Controlled simplicity
The project remains intentionally free of a complex backend so maintenance stays low and content updates remain fast.
Reliability
Quality and controls
- • Lint and type-check run on every significant iteration.
- • Stable and readable file structure that supports future additions.
- • Regular manual checks on project routes and critical links.
Limitations
Current attention points
- • The site remains static, with no CMS and no dedicated editing interface.
- • Project proof still depends partly on the quality and quantity of available screenshots.
- • Some advanced SEO enhancements, such as richer project-level structured data, can still be improved.
Roadmap
Next steps
- • Add more project-specific screenshots to strengthen visual proof.
- • Complete Open Graph metadata per project page with dedicated images.
- • Finalize the remaining copywriting adjustments for finance and tech recruiters.
Challenges
Main project challenges
Maintain a consistent tone and technical level across every page, including home, about, projects, and project details.
Avoid the template effect while increasing the density of project content without making the site heavy to read.
Preserve maintainability by keeping all content centralized in src/data rather than scattered across components.
Keep the layout responsive despite long text blocks and information-rich cards.
Outcomes and learnings
What I take away
Clear front-end content base used to drive projects, experience, navigation, and profile information.
Addition of in-depth project pages covering architecture, technical choices, limits, and next steps.
Improved overall credibility through more concrete language and technical proof points such as repository and commit links.
Iterative correction workflow on UX, content, and structure to move toward an application-ready portfolio.
Other projects
Continue exploring
Personal Finance · Python · PyQt6
Wealth Tracking Application
PyQt6 + SQLite desktop application to centralize multi-asset accounts, rebuild weekly history, and analyze portfolio performance.
View this project
Quantitative Finance · Analysis · Python
Portfolio Backtesting and Optimization
Python environment to backtest strategies, compare risk and return metrics, and analyze portfolio behavior.
View this projectDiscuss
I can detail technical choices and outcomes during an interview.
If this project is relevant for you, I can detail the initial need, data structure, assumptions, challenges encountered, and analysis limitations.