[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81137":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":15,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":13,"starSnapshotCount":13,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},81137,"mwakidenis.com","mwakidenis\u002Fmwakidenis.com","mwakidenis","⚡mwakidenis.com — Modern Next.js Creative Portfolio & Blog Platform with GSAP Animations, Markdown Content Management, Dynamic Project Layouts, Responsive Design, and Cloudflare Pages Deployment","https:\u002F\u002Fmwakidenis-com.pages.dev\u002F",null,"JavaScript",46,0,27,14,41.4,"Other",false,"main",true,[],"2026-06-12 04:01:32","# mwakidenis Next.js Portfolio  and  Blog Site\n\nThis is a modern **portfolio** built with **Next.js** and **React**, featuring rich animations, interactive components, and Markdown-powered content management. It provides a scalable, performant foundation for creative professionals to showcase their work and publish engaging content.\n\n---\n\n## Features\n\n- Modern UI built with **Next.js** + **React** + **Sass**\n- Dynamic animations powered by **GSAP** and **Parallax.js**\n- Interactive carousels with **Swiper**\n- **Markdown-based content management** for posts and projects\n- Component-based architecture (Hero, About, Services, Team, Testimonials, etc.)\n- Responsive design and smooth page transitions\n- Blog with pagination and dynamic routing\n- Project portfolio with masonry and grid layouts\n- Contact forms with **Formik** validation\n- Date utilities with **date-fns**\n- Cursor effects and scroll animations\n- SEO-optimized pages\n\n---\n\n## Project Structure\n\n```\nmwakidenis-Next.js-Template\u002F\n├── src\u002F\n│   ├── common\u002F                                    # Shared utilities & hooks\n│   │   ├── cursor.js                             # Custom cursor effects\n│   │   ├── preloader.js                          # Page preloader\n│   │   ├── scrollAnims.js                        # Scroll animations\n│   │   ├── sliderProps.js                        # Slider properties\n│   │   ├── useClickOutside.js                    # Hook for click outside detection\n│   │   ├── useLocalStorage.js                    # Local storage hook\n│   │   └── utilits.js                            # Utility functions\n│   │\n│   ├── components\u002F                               # Reusable UI components\n│   │   ├── ImageView.jsx                         # Image viewer component\n│   │   ├── PageBanner.jsx                        # Page banner section\n│   │   ├── PageBannerDark.jsx                    # Dark theme banner\n│   │   ├── PaginatedBlog.jsx                     # Paginated blog posts\n│   │   ├── Pagination.jsx                        # Pagination controls\n│   │   ├── ProjectInner[One-Six].jsx             # Project detail templates\n│   │   ├── ProjectsGrid.jsx                      # Grid layout for projects\n│   │   ├── ProjectsMasonry.jsx                   # Masonry layout for projects\n│   │   │\n│   │   ├── sections\u002F                             # Page sections\n│   │   │   ├── About.jsx\n│   │   │   ├── CallToAction.jsx\n│   │   │   ├── HeroOne.jsx & HeroTwo.jsx\n│   │   │   ├── LatestPosts.jsx\n│   │   │   ├── PopularPosts.jsx\n│   │   │   ├── Pricing.jsx\n│   │   │   ├── RelatedPosts.jsx\n│   │   │   ├── RelatedServices.jsx\n│   │   │   ├── Services.jsx\n│   │   │   ├── Subscribe.jsx\n│   │   │   └── Team.jsx\n│   │   │\n│   │   └── sliders\u002F                             # Slider components\n│   │       ├── Partners.jsx\n│   │       ├── Projects.jsx\n│   │       └── Testimonial.jsx\n│   │\n│   ├── data\u002F                                     # Content & configuration\n│   │   ├── app.json                              # App configuration\n│   │   ├── posts\u002F                                # Markdown blog posts\n│   │   │   └── *.md                              # Individual post files\n│   │   ├── projects\u002F                             # Project data\n│   │   ├── sections\u002F                             # Section configurations\n│   │   ├── services\u002F                             # Services data\n│   │   └── sliders\u002F                              # Slider data\n│   │\n│   ├── layouts\u002F                                  # Layout components\n│   │   ├── Layouts.js                            # Main layout wrapper\n│   │   ├── back-to-top\u002F                          # Back to top button\n│   │   ├── cursor\u002F                               # Cursor layout\n│   │   ├── footers\u002F                              # Footer components\n│   │   ├── headers\u002F                              # Header components\n│   │   ├── pentagon\u002F                             # Pentagon shape layout\n│   │   ├── preloader\u002F                            # Preloader component\n│   │   ├── scrollbar-progress\u002F                   # Scrollbar progress indicator\n│   │   └── svg-icons\u002F                            # SVG icon components\n│   │\n│   ├── lib\u002F                                      # Helper libraries\n│   │   ├── categories.js                         # Category utilities\n│   │   ├── date.js                               # Date utilities\n│   │   ├── posts.js                              # Blog post utilities\n│   │   ├── projects.js                           # Project utilities\n│   │   ├── services.js                           # Services utilities\n│   │   └── usePagination.js                      # Pagination hook\n│   │\n│   ├── pages\u002F                                    # Next.js pages\n│   │   ├── _app.js                               # App wrapper\n│   │   ├── _document.js                          # Document wrapper\n│   │   ├── index.jsx                             # Home page\n│   │   ├── 404.jsx                               # 404 error page\n│   │   ├── blog.jsx                              # Blog listing\n│   │   ├── contact.jsx                           # Contact page\n│   │   ├── projects.jsx                          # Projects page\n│   │   ├── projects-2.jsx & projects-3.jsx       # Project layout variants\n│   │   ├── services.jsx                          # Services page\n│   │   ├── team.jsx                              # Team page\n│   │   ├── home-2.jsx                            # Alternative home layout\n│   │   ├── api\u002F                                  # API routes\n│   │   ├── blog\u002F                                 # Dynamic blog routes\n│   │   ├── projects\u002F                             # Dynamic project routes\n│   │   └── services\u002F                             # Dynamic service routes\n│   │\n│   └── styles\u002F                                   # Styles\n│       ├── globals.css                           # Global styles\n│       └── scss\u002F                                 # SCSS files\n│\n├── public\u002F                                       # Static assets\n│   ├── css\u002F                                      # CSS assets\n│   │   └── plugins\u002F                              # Third-party CSS\n│   │       ├── bootstrap-grid.css\n│   │       ├── font-awesome.min.css\n│   │       ├── magnific-popup.css\n│   │       └── swiper.min.css\n│   │\n│   └── img\u002F                                      # Images\n│       ├── blog\u002F                                 # Blog images\n│       ├── faces\u002F                                # Profile images\n│       ├── icons\u002F                                # Icon assets\n│       ├── partners\u002F                             # Partner logos\n│       ├── photo\u002F                                # General photos\n│       └── works\u002F                                # Portfolio work images\n│\n├── Documentation\u002F                                # Project documentation\n│   ├── index.html\n│   ├── css\u002F                                      # Documentation styles\n│   ├── fonts\u002F                                    # Fonts\n│   ├── img\u002F                                      # Documentation images\n│   └── js\u002F                                       # Documentation scripts\n│\n├── jsconfig.json                                 # JavaScript path aliases\n├── next.config.js                               # Next.js configuration\n├── package.json                                 # Project dependencies\n├── LICENSE                                      # License file\n└── SECURITY.md                                  # Security guidelines\n```\n\n---\n\n## Installation\n\n1. **Clone the repository**\n\n   ```bash\n  git clone https:\u002F\u002Fgithub.com\u002FAymaneMehdi\u002Fmwakidenis-Next.js-Template.git\n  cd mwakidenis-Next.js-Template\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n---\n\n## Running the Project\n\n```bash\nnpm run dev\n```\n\nRuns the project on **http:\u002F\u002Flocalhost:3000**\n\n---\n\n## Building for Production\n\n```bash\nnpm run build\nnpm start\n```\n\n---\n\n## Tech Stack\n\n| Tool \u002F Library         | Version  | Description                                    |\n|------------------------|----------|------------------------------------------------|\n| **Next.js**            | 13.4.3   | React framework for production apps           |\n| **React**              | 18.2.0   | UI library                                     |\n| **Sass**               | 1.49.7   | CSS preprocessor for styling                  |\n| **GSAP**               | 3.11.5   | Animation library for smooth effects          |\n| **Parallax.js**        | 3.1.0    | Parallax scrolling effects                    |\n| **Swiper**             | 9.0.0    | Modern carousel\u002Fslider component              |\n| **Formik**             | 2.4.2    | Form management and validation                |\n| **Gray-matter**        | 4.0.3    | Markdown frontmatter parser                   |\n| **Remark**             | 14.0.3   | Markdown processor                            |\n| **Remark-HTML**        | 15.0.2   | Convert Markdown to HTML                      |\n| **date-fns**           | 2.30.0   | Modern date utility library                   |\n\n---\n\n## Scripts\n\n| Command           | Description                     |\n|------------------|---------------------------------|\n| `npm run dev`     | Run development server          |\n| `npm run build`   | Build for production            |\n| `npm start`       | Start production server         |\n| `npm run lint`    | Run ESLint for code quality     |\n\n---\n\n## Content Management\n\n### Blog Posts\n\nBlog posts are written in **Markdown** format and stored in `src\u002Fdata\u002Fposts\u002F`. Each post file includes:\n\n- **Frontmatter** (title, date, author, category, image, etc.)\n- **Markdown content** for the post body\n\nExample: `src\u002Fdata\u002Fposts\u002Fmy-blog-post.md`\n\n```markdown\n---\ntitle: \"My Blog Post Title\"\ndate: \"2024-01-15\"\nauthor: \"Author Name\"\ncategory: \"Design\"\nimage: \"\u002Fimg\u002Fblog\u002Fpost-image.jpg\"\ndescription: \"Post description...\"\n---\n\n# Blog content goes here...\n```\n\n### Projects\n\nProjects are stored in `src\u002Fdata\u002Fprojects\u002F` with similar structure to blog posts, supporting both grid and masonry layouts.\n\n### Services\n\nService information is managed in `src\u002Fdata\u002Fservices\u002F` for the services page.\n\n---\n\n## Customization\n\n### Adding Custom Animations\n\nUse GSAP in your components:\n\n```jsx\nimport { useEffect } from 'react';\nimport gsap from 'gsap';\n\nexport default function MyComponent() {\n  useEffect(() => {\n    gsap.to('.element', { duration: 1, opacity: 1 });\n  }, []);\n\n  return \u003Cdiv className=\"element\">Animated content\u003C\u002Fdiv>;\n}\n```\n\n### Styling with Sass\n\nGlobal styles are in `src\u002Fstyles\u002Fscss\u002F`. Create component-specific styles and import them into your components.\n\n### Custom Hooks\n\nUse provided hooks in `src\u002Fcommon\u002F`:\n\n- `useClickOutside()` - Detect clicks outside elements\n- `useLocalStorage()` - Manage local storage\n\n--- \n\n## License\n\nThis project is licensed under the [Strict Proprietary License](LICENSE).\n\n---\n\n","mwakidenis.com 是一个基于 Next.js 和 React 构建的现代化创意作品集和博客平台。该项目利用 GSAP 动画、Markdown 内容管理和动态项目布局等技术，提供了一个可扩展且高性能的基础架构，使创意专业人士能够展示其作品并发布引人入胜的内容。它采用了组件化架构，支持响应式设计和平滑的页面过渡效果，并通过 Cloudflare Pages 进行部署。该平台非常适合个人或小型团队用于创建专业且视觉吸引力强的作品集网站及博客，尤其适用于设计师、开发者和其他创意工作者。",2,"2026-06-11 04:03:40","CREATED_QUERY"]