| title | description | date | image | site | category | author | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
My Creative Portfolio |
A dynamic, interactive portfolio showcasing photography, 3D modeling, and web development work. |
2025-06-01 |
Development |
|
A dynamic, interactive portfolio showcasing photography, 3D modeling, and web development work.
- Dynamic Frame Layout: Interactive grid with hover effects
- Project Galleries: Click any frame to view detailed project information
- Asset Preloading: Comprehensive loading system for smooth user experience
- Responsive Design: Works seamlessly across all device sizes
- Custom Typography: Beautiful custom fonts and typography system
- Node.js 18+
- npm or yarn
- Clone or download this project
- Install dependencies:
```bash npm install
yarn install ```
- Run the development server:
```bash npm run dev
yarn dev ```
- Open http://localhost:3000 in your browser
├── app/
│ ├── fonts.ts # Font configurations
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── components/
│ ├── ui/ # Reusable UI components
│ ├── DynamicFrameLayout.tsx
│ ├── FrameComponent.tsx
│ ├── ImageGallery.tsx
│ └── Loader.tsx
├── hooks/
│ └── useAssetLoader.ts # Asset loading hook
└── lib/
└── utils.ts # Utility functions
Edit the initialFrames array in components/DynamicFrameLayout.tsx:
```typescript { id: 10, video: "your-video-url.mp4", title: "Your Project Title", description: "Project description...", technologies: ["Tech1", "Tech2"], category: "Your Category", year: "2024", images: ["image1.jpg", "image2.jpg"], // ... other properties } ```
- Main colors and theme:
app/globals.css - Component styles: Individual component files
- Tailwind config:
tailwind.config.js
- Next.js 15 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Framer Motion - Animations
- Radix UI - Accessible components
```bash npm run build npm start ```
This project is for portfolio purposes.