## Build & Development Commands
- Project Overview: Clearly explain the purpose of the portfolio site.
Technology Stack: Mention Next.js, Tailwind CSS, Appwrite (database), Firebase (authentication).
Component Documentation:
Navbar: Sticky, minimal design.
Hero Section: Full-screen introduction.
Portfolio Showcase: Grid layout with hover effects.
Testimonials: Carousel or grid format.
Contact Form: Integrated with Firebase authentication, storing inquiries in Appwrite.
Code Examples: Provide snippets for key functionalities.
SEO & Performance:
Use next/image for optimized images.
Implement lazy loading for non-critical components.
Add structured data for better SEO ranking.
## Testing Guidelines
-
## Code Style & Guidelines
Use JSX instead of TYPESCRIPT.
Follow ESLint and Prettier for code formatting.
Maintain a modular folder structure:
components/ → Reusable UI components
layouts/ → Page layouts
pages/ → Next.js pages
lib/ → Utility functions, API calls
Use Next.js Server Components where applicable.
Ensure accessibility:
Proper alt attributes for images.
Good color contrast for readability.
-
## Documentation Guidelines
- Project Overview: Provide a brief description of the architecture portfolio website, its purpose, and key features.
Technology Stack: Mention and link to the official documentation of the technologies used:
Next.js (Frontend Framework) → https://nextjs.org/docs
Tailwind CSS (Styling) → https://tailwindcss.com/docs
Appwrite (Database & Backend) → https://appwrite.io/docs
Firebase (Authentication) → https://firebase.google.com/docs
Folder Structure: Document the project's folder organization:
components/ → UI components (Navbar, Hero, Portfolio, etc.).
layouts/ → Page layouts.
pages/ → Next.js route pages.
lib/ → Utility functions and API handlers.
Component Documentation: Explain the purpose and props of each key component.
Example:
Navbar: Sticky, minimal design with navigation links.
Hero Section: Full-screen introduction with CTA.
Portfolio Showcase: Grid layout with hover effects.
Contact Form: Integrated with Firebase authentication.
API & Database Documentation:
Authentication: Email/password and Google OAuth using Firebase.
Database Structure: Appwrite collections for storing portfolio projects and user inquiries.
API Routes: Explain Next.js API routes for handling database interactions.
Code Examples: Provide essential snippets, such as setting up authentication, fetching data, and UI components.
SEO & Performance Optimization:
Use next/image for optimized images.
Implement lazy loading for non-critical components.
Add structured metadata for SEO improvements.
Deployment & Hosting: Document the deployment process with relevant links:
Netlify (Next.js Hosting) → https://netlify.com/docs
Firebase Hosting (Alternative) → https://firebase.google.com/docs/hosting