A high-fidelity, cinematic portfolio designed for social media content creators and attention engineers. This project showcases a premium archive of reels, creative processes, and interactive experiences with a focus on visual excellence and emotional impact.
- Dynamic Reel Posters: High-quality visual representations of every project.
- Seamless Transitions: Smooth modal openings and video playbacks using Framer Motion.
- Psychological Breakdowns: Every reel includes a deep dive into Hook Strategy, Retention Tactics, and Emotional Pacing.
- Data-Driven Metrics: Real-world performance data including Retention %, Replay Factor, and CTR Increases.
- Cinematic Transitions: Sophisticated page transitions and element animations powered by GSAP.
- Ultra-Smooth Scrolling: Integrated Lenis for a refined, natural scroll feel.
- Bento-style Layouts: Clean, modern categorization of creative services.
- Next.js 15+ (React 19): Leveraging the latest React features for performance and stability.
- Tailwind CSS 4: Modern utility-first styling with a focus on design tokens.
- Responsive Architecture: Meticulously crafted for seamless experiences across desktop, tablet, and mobile.
| Category | Technologies |
|---|---|
| Framework | Next.js (App Router), React 19, TypeScript |
| Styling | Tailwind CSS 4, CSS Modules |
| Animations | GSAP, Framer Motion |
| Scroll Engine | Lenis Smooth Scroll |
| Icons | Lucide React |
Unlike standard portfolios, this project uses a dual-engine approach for maximum performance:
- GSAP: Handles high-precision, scroll-triggered timelines and complex sequenced animations where performance is critical.
- Framer Motion: Used for React state-based transitions, layout animations (Shared Layout), and UI micro-interactions.
- Lenis: Provides the smooth-scroll foundation that allows GSAP and Framer to sync perfectly without "jank".
Follow these steps to run the project locally on your machine.
- Node.js (v20 or higher recommended)
- npm or yarn / pnpm
-
Clone the repository:
git clone https://github.com/AndreiNeptune/site-alex-social-media.git cd site-alex-social-media -
Install dependencies:
npm install # or npm install --legacy-peer-deps -
Run the development server:
npm run dev
-
Open the application: Navigate to http://localhost:3000 in your browser.
├── app/ # Next.js App Router routes and layouts
├── components/ # Reusable UI components
│ ├── reels/ # Reel-specific logic (Cards, Modals)
│ ├── sections/ # Large page sections (Hero, Archive, Footer)
│ └── ui/ # Base UI primitives
├── data/ # Static content and reel metadata
├── hooks/ # Custom React hooks (Sound, Scroll, etc.)
├── lib/ # Utility functions and shared logic
└── public/ # Static assets (Images, Videos, Icons)
This project is built on the principle of "Attention Engineering". Every transition, sound effect, and visual element is designed to keep the user engaged while maintaining a premium, high-end aesthetic.
- Dark Mode First: A sleek, black-themed interface to make content pop.
- Micro-interactions: Subtle feedback on every click and hover.
- Performance: Optimized for fast LCP (Largest Contentful Paint) despite heavy media usage.
Acest proiect folosește un flux de lucru hibrid om-AI. Regulile de context pentru agenții de codare pot fi găsite în AGENTS.md.
This project is private and intended for portfolio demonstration purposes.
Built with ❤️ by Andrei