Nurul Amaliah's Portfolio

AMA Portfolio — Personal portfolio site for Nurul Amaliah, a governance researcher and social media strategist, showcasing research, publications, and social content work.

Problem

No single place consolidated her academic profile, published research (SINTA-accredited journals, book chapters, thesis work), NGO/brand social media output, and teaching experience. Social media work lived inside Instagram and was hard for recruiters or collaborators to review alongside the policy research side. Needed a credible, shareable profile that presented both halves of the work — governance research and digital storytelling — without feeling like two disconnected CVs.

Approach

Single-page Next.js 16 (App Router) site with sections composed from a typed data file — experience, publications, research works, Instagram posts/reels — so content updates don't touch component code. Instagram embeds render as blockquote fallbacks (crawlable) and hydrate client-side, with CSS overrides so embeds respect the grid. Animation stack (GSAP for hero parallax/typing/ScrollTrigger, framer-motion for reveals, gallery pagination, layout filtering) is gated by a two-tier system: a server-side decision using Client Hints (Sec-CH-Device-Memory, prefers-reduced-motion) and UA sniffing for old Safari/iOS <16 where framer-motion 12 crashes on hydration, plus a client-side belt that re-checks hardwareConcurrency and reduced-motion. Low-end or old devices get plain-visible HTML instead of opacity:0 markup waiting for JS. Full SEO pass: JSON-LD @graph (WebSite + ProfilePage + Person + ScholarlyArticle/Thesis), dynamic OG image via next/og, sitemap/robots, canonical, OpenGraph/Twitter cards, AVIF/WebP image formats, security headers with Critical-CH for device hints.

Impact

Shipped as a single deployable Vercel project with no backend. Consolidates research grants, SINTA-accredited publications, thesis work, NGO social campaigns, teaching roles, and 17 Instagram posts/reels into one navigable page with filterable portfolio, expandable experience modals, and a swipeable photo gallery per role. Adaptive animation means the site degrades gracefully from GSAP parallax → static layout on low-end devices, and from framer-motion → plain markup on browsers where it crashes — no blank paints for iOS 15 users. SEO structured data makes publications and the professional profile indexable as discrete entities, not just text.