SOLUTION
Open to new opportunities
Looking forward to contributing to a team that values thoughtful engineering, collaboration, and continuous learning.
Full-Stack Developer
Project 01 · Team / Academic
A responsive portfolio built with Next.js, TypeScript, and headless WordPress, featuring dynamic project pages, interactive animations, and an editorial-inspired design.
This personal portfolio was designed and developed from the ground up to showcase my projects, technical skills, and approach to web development. Built with Next.js, TypeScript, and SCSS Modules, the website uses WordPress as a headless CMS to manage project content independently of the front end. The design combines modern editorial typography, a minimal visual language, and subtle interactions to create a cohesive and responsive browsing experience. I also incorporated AI-assisted tools into my development workflow to support implementation, troubleshooting, and refinement. Rather than relying on AI to make design or technical decisions, I used it as a supporting tool while evaluating the results and maintaining control over the final implementation.
UI Design & Front-End Development
I independently designed and developed the portfolio, from visual planning and component architecture to CMS integration, responsive styling, and deployment.
- Designed the visual identity and responsive layouts in Figma. - Developed reusable components with Next.js, TypeScript, and SCSS Modules. - Integrated WordPress and Advanced Custom Fields through the REST API. - Built dynamic project detail pages using reusable content sections. - Implemented responsive navigation, page transitions, and scroll-based animations. - Added interactive features such as image galleries, accordions, and email copying with toast feedback. - Refined accessibility, loading states, and cross-device usability.
03 — PROBLEM SOLVING
Too many animations can make a website feel overwhelming, while too little movement can make the experience feel static. The challenge was to introduce meaningful motion without distracting users from the content.
04 — DEVELOPMENT
The portfolio is built with Next.js App Router and TypeScript, using SCSS Modules for component-scoped styling. WordPress serves as a headless CMS, with ACF providing structured project data through the REST API. The front end includes dynamic project routes, reusable content sections, responsive layouts, image and video previews, and lightweight interactive components. The architecture keeps content management separate from the presentation layer.
SYSTEM ARCHITECTURE
WordPress manages project content and media, while Advanced Custom Fields defines the structured data. The Next.js application retrieves this information through the WordPress REST API and renders it using reusable, typed React components.
IMPLEMENTATION NOTE
This component supports different types of project media without changing the page layout. When a video is available, it displays an autoplaying preview; otherwise, it falls back to the project's image. This keeps the presentation flexible while reusing the same component across projects.
{videoUrl ? (
<video
className={styles.image}
autoPlay
muted
loop
playsInline
poster={imageUrl}
>
<source
src={videoUrl}
type={videoMimeType || "video/mp4"}
/>
</video>
) : (
imageUrl && (
<Image
src={imageUrl}
alt={imageAlt || `${title} screenshot`}
fill
sizes="(max-width: 767px) 100vw, 1200px"
className={styles.image}
/>
)
)}
Created dynamic routes and reusable project sections that render content retrieved from WordPress. Each project can have its own descriptions, technical details, media, and reflections while maintaining a consistent design.
05 — VISUAL SHOWCASE
Screenshots and demonstrations support the technical story rather than decorate it.
Homepage · Editorial-inspired design and navigation
Selected Work · Dynamic project content powered by WordPress
Reflecting on the outcomes, lessons learned, and opportunities for improvement.
Delivered a responsive, content-driven portfolio that brings together selected projects, technical explanations, and interactive demonstrations in a consistent visual experience. The headless CMS architecture enables project content to be maintained independently, while reusable components make it easier to expand the portfolio as new work is completed.
One of the biggest challenges I encountered while working with a headless CMS was understanding how caching behaves across WordPress and Next.js. When content updates were not reflected on the frontend, I had to investigate where stale data was being served and how the different caching layers interacted. I eventually resolved the issue by purging the WordPress-side cache and triggering a fresh data fetch. For production updates, I plan to accommodate a reasonable delay rather than requiring immediate content synchronization. I had previously developed a headless CMS website professionally using Contentful and Next.js, so I was already familiar with this architecture. However, Contentful's pricing made it difficult to recommend for every client. Through this project, I gained practical experience using WordPress as an alternative headless CMS. Having another option allows me to make more flexible recommendations based on a client's budget, requirements, and long-term maintenance needs. This project also reinforced the importance of balancing visual design, performance, usability, and maintainability when making technical decisions.
Continue refining performance and accessibility, expand the project collection, and improve the presentation of technical case studies as I gain more development experience.
Implemented a responsive header with scroll-aware visibility, animated navigation text, and a mobile menu. Added a page-introduction transition and interactive effects while keeping animation behavior separate from navigation logic.
Developed reusable image galleries, lightbox interactions, expandable challenge sections, and video previews to communicate project details more effectively. Added an email-copy interaction with toast feedback to make contact information easier to access.