Cinematic, Netflix-inspired storytelling site built with Next.js App Router, Material UI, Redux Toolkit, slick sliders, and custom audio orchestration.
Demo • Highlights • Tech Stack • Quick Start • Env • Structure • Lighthouse • Flow • Screens • Roadmap • Contributing • License Tests • Accessibility • Performance • Analytics • i18n • Browser Support • Known Issues • ADR
- Netflix tarzı giriş (splash) → ilk kullanıcı etkileşimiyle sesi açar, persona seçimine yönlendirir
- Persona-aware dashboard → seçimi kalıcı tutar,
/projects,/stalker,/adventurergibi rotalara yönlendirir - Projects → masaüstünde senkronize carousels, mobilde stacked layout + TMDB vari metadata ve global arama
- Detail modal →
SoundProviderile sesi senkronize eden CTA’lar, GSAP/Framer geçişleri - “Stalker” deneyimi → client-side starfield, zamanlanmış lettering animasyonları, gecikmeli audio playback
- Interactive intro mirroring Netflix splash; unlocks audio on first gesture
- Persona-aware navigation with persistent profile state
- Projects page with synchronized desktop carousels + mobile stacks and TMDB-style metadata
- Detail modal pipeline with
PlayButton,AgeLimitChip,QualityChip, and read-more gradients - Among Us-inspired “Stalker” scene using tsparticles/starfield + deferred sound
- Core: Next.js 15 (App Router), React 19, TypeScript 5
- UI: Material UI 5 (Emotion), custom fonts via
next/font, PillNav shell - State: Redux Toolkit (slices + RTK patterns), Context Providers (
DetailModalProvider,SoundProvider) - Motion: Slick Carousel (+ custom pagination HOC), GSAP, Framer Motion, tsparticles
- Media: Video.js + YouTube plugin
- Tooling: ESLint, (optionally) Prettier, Turbopack in dev
- Live: https://yagmurcemgul.vercel.app/
- Repository: https://github.com/YagmurCemGul/MyPortfolio
# 1) Requirements
node -v # >= 18
# 2) Install
pnpm install # or npm install / yarn
# 3) Dev
pnpm dev # Next.js + Turbopack
# 4) Build & Run
pnpm build
pnpm startpnpm dev→ start dev serverpnpm build→ production buildpnpm start→ serve productionpnpm lint→ run ESLint
- Unit/Component: Vitest/Jest + Testing Library
- E2E: Playwright veya Cypress
pnpm test # component tests
pnpm exec playwright install
pnpm exec playwright test## ♿ Accessibility (A11y)
- [ ] Tek `<h1>` ve mantıklı başlık hiyerarşisi
- [ ] Görsellerde anlamlı `alt`
- [ ] Kontrast (WCAG AA), görünür focus
- [ ] Tam klavye erişimi, “skip to content”
- [ ] `prefers-reduced-motion` fallback
- [ ] Formlarda `label`, hatalarda `aria-live`Create .env.local in the project root:
# Optional – enables TMDB fetches alongside local data
NEXT_PUBLIC_TMDB_V3_API_KEY=...
# Optional – remote JSON source if you externalize content
NEXT_PUBLIC_API_ENDPOINT_URL=...src/
app/ # Next.js App Router routes (intro, accounts, projects, stalker, etc.)
components/ # Reusable UI: HeroSection, DetailModal, InlineDetailCard, PillNav
constant/ # UI tuning knobs (read more timing, header spacing)
data/ # myProjects.ts -> TMDB-like metadata powering carousels & detail cards
hoc/withPagination/ # Slick wrapper injecting TMDB fetch + pagination state
providers/ # Cross-cutting providers: detail modal, portals, audio
store/ # Redux Toolkit slices, async thunks, store bootstrap
utils/ # Formatters (durations), media link builders, sound helpers
public/assets/ # Screens, gifs, audio cues used across the experience
src/app/layout.tsx— wraps Redux, MUI registry, fonts, preloaded audiosrc/app/intro/page.tsx— Netflix-style splash + autoplay policy handling + timed redirectsrc/app/projects/page.tsx— hero banners, section sliders, mobile stacks, global search bussrc/data/myProjects.ts— single source of truth (blurbs, skills, gifs, links)src/providers/SoundProvider.tsx— global audio toggler syncing background & modal playbacksrc/components/slick-slider/SlickSlider.tsx— carousel shell withwithPaginationsrc/components/DetailModal.tsx— responsive drawer/modal with CTA stack
- App Router + Server Components
- MUI + Emotion → tema & tasarım sistemi
- Redux Toolkit → UI state, modal, global sound
- Motion: GSAP/Framer + reduced-motion fallback
- Media: Video.js + YouTube (lazy)
Example local scores (update after running Lighthouse):
| Metric | Desktop | Mobile |
|---|---|---|
| Performance | 97 | 92 |
| Accessibility | 100 | 99 |
| Best Practices | 100 | 100 |
| SEO | 98 | 98 |
- Kahraman görsellere
priority+ doğrusizes -
<Image>ile WebP/AVIF ve sabit boyut → düşük CLS -
next/dynamicve route-level code-splitting - 3P scriptler
async/defer+ mümkünse azalt - ISR/SSG → CDN cache
-
next/fontile self-hosted font
- Hafif ve çerezsiz: Plausible / Umami
- Event’ler: "Project Viewed", "Detail Opened", "CV Downloaded"
- Kişisel veri toplamıyorsan belirt; topluyorsan Privacy Policy linki ekle.
- Altyapı:
next-intl(önerilen) veyanext-translate src/messages/en.json,src/messages/tr.json- URL:
/[locale]/...veya domain-based
| Browser | Min |
|---|---|
| Chrome | 109 |
| Edge | 109 |
| Firefox | 102 |
| Safari | 15.4 |
| iOS | 15.4 |
- Autoplay politikaları → kullanıcı etkileşimi gerekebilir.
- Slick SSR reflow → stabil
keyve sabit yükseklik önerilir. - YouTube embed → 3P scriptleri performansı etkileyebilir; lazy-load aktif.
Update locally
# Chrome DevTools → Lighthouse → Generate report
# or CLI:
npm i -g lighthouse
lighthouse https://yagmurcemgul.vercel.app/ --view --preset=desktopflowchart LR
A[Splash / Intro] -->|User gesture unlocks audio| B[Accounts]
B --> C{Persona Selected?}
C -->|Developer| D[Dashboard: Developer]
C -->|Recruiter| E[Dashboard: Recruiter]
D --> F[/projects]
E --> F[/projects]
F --> G[Carousels / Mobile Stacks]
G --> H[Detail Modal]
H --> I[Play Trailer (Video.js)]
H --> J[CTAs: PlayButton • AgeLimitChip • QualityChip]
D --> K[/stalker (starfield scene)]
E --> L[/adventurer (future)]
subgraph Global
M[SoundProvider]:::svc
N[DetailModalProvider]:::svc
end
A --- M
F --- N
classDef svc fill:#f6f8fa,stroke:#bbb,stroke-width:1px;
public/assets/home-page.png— landing heropublic/assets/detail-modal.png— detail modal with CTA stackpublic/assets/grid-genre.png— desktop slider gridpublic/assets/mini-portal.png— persona chooserpublic/assets/watch.png— watch view
- Ship-ready for Vercel (
next.config.ts, optionalvercel.json) - Mirror env vars in your host (TMDB key, API endpoints)
- Replace favicon at
src/app/favicon.icoorpublic/favicon.icobefore deploy
- Snapshot tests for hero, carousels, detail modal
- Lazy TMDB fetch blending live data with handcrafted copy
- Persona-specific dashboards (developer vs. recruiter) with tailored CTAs
- Accessibility polish (focus rings, reduced-motion fallbacks)
- SEO: structured data for project detail pages
- Fork & create a feature branch
- Commit with Conventional Commits (e.g.,
feat: add trailer autoplay toggle) - Open a PR describing the change and screenshots for UI updates
Issues: good first issue • help wanted
flowchart LR
A[Fork] --> B[Feature Branch]
B --> C[Commit + Tests]
C --> D[Pull Request]
D --> E{Review}
E -->|Request changes| C
E -->|Approve| F[Merge]
- Autoplay doesn’t start? Most browsers require a user gesture. The intro page unlocks audio on first interaction.
- Carousels glitch on resize? Ensure Slick is wrapped in the provided HOC and that slides have stable keys.
- TMDB disabled? The app gracefully falls back to local metadata in
src/data/myProjects.ts.
- Portfolio: https://yagmurcemgul.vercel.app
- LinkedIn: https://linkedin.com/in/yagmurcemgul
- Email: yagmurcemgul@gmail.com
- Meeting: Book a Call
TBD — no open-source license specified yet. Consider MIT if you plan to open-source.
Add a LICENSE file and update the badge at the top.