Add Node.js portfolio API with Docker

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.env
+*.log
+.DS_Store
+logs/

Dockerfile

@@ -0,0 +1,27 @@
+# Dockerfile لـ Node.js
+FROM node:18-alpine
+
+# Create app directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Create necessary directories
+RUN mkdir -p public/images views docs logs
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:7860/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
+
+# Start server
+CMD ["node", "server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ibrahim Al-Asfar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,37 @@
 ---
-title: Server
-emoji: 📊
-colorFrom: yellow
+title: Portfolio API
+emoji: 🚀
+colorFrom: purple
 colorTo: blue
 sdk: docker
+app_port: 7860
 pinned: false
 license: apache-2.0
-short_description: portfolio-api
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Ibrahim Al-Asfar Portfolio API
+
+Full-stack web developer portfolio backend API with authentication, file uploads, and AI features.
+
+## API Endpoints
+
+- `GET /` - Homepage
+- `GET /api/health` - System health check
+- `GET /api/projects` - Get all public projects
+- `GET /api/skills` - Get all skills
+- `POST /api/register` - Register new user
+- `POST /api/login` - User login
+- `GET /api/profile/:nickname` - Get user profile
+
+## Documentation
+
+Interactive API documentation available at `/api-docs`
+
+## Technology Stack
+
+- Node.js & Express
+- MongoDB
+- JWT Authentication
+- Cloudinary for media
+- Google/Facebook/GitHub OAuth
+- Google Gemini AI

docs/swagger.yaml

@@ -0,0 +1,1510 @@
+openapi: 3.0.0
+info:
+  title: Portfolio API
+  version: 1.0.0
+  description: API for Ibrahim Al-Asfar's portfolio website, supporting user authentication, project management, profile handling, and more.
+servers:
+  - url: https://portfolio-backend-beta-two.vercel.app
+    description: Production server
+  - url: http://localhost:3000
+    description: Local development server
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    Project:
+      type: object
+      properties:
+        _id:
+          type: string
+        title:
+          type: string
+        description:
+          type: string
+        image:
+          type: string
+        rating:
+          type: string
+        stars:
+          type: number
+        links:
+          type: array
+          items:
+            type: object
+            properties:
+              option:
+                type: string
+              value:
+                type: string
+              isPrivate:
+                type: boolean
+    Comment:
+      type: object
+      properties:
+        _id:
+          type: string
+        projectId:
+          type: string
+        userId:
+          type: object
+          properties:
+            username:
+              type: string
+            email:
+              type: string
+        rating:
+          type: number
+        text:
+          type: string
+        timestamp:
+          type: string
+          format: date-time
+        replies:
+          type: array
+          items:
+            type: object
+            properties:
+              text:
+                type: string
+              timestamp:
+                type: string
+                format: date-time
+    Skill:
+      type: object
+      properties:
+        _id:
+          type: string
+        name:
+          type: string
+        icon:
+          type: string
+        percentage:
+          type: number
+    UserProfile:
+      type: object
+      properties:
+        username:
+          type: string
+        profile:
+          type: object
+          properties:
+            nickname:
+              type: string
+            portfolioName:
+              type: string
+            avatar:
+              type: string
+            avatarDisplayType:
+              type: string
+              enum: ['svg', 'normal']
+            svgColor:
+              type: string
+            jobTitle:
+              type: string
+            bio:
+              type: string
+            phone:
+              type: string
+            socialLinks:
+              type: object
+              properties:
+                linkedin:
+                  type: string
+                behance:
+                  type: string
+                github:
+                  type: string
+                whatsapp:
+                  type: string
+            education:
+              type: array
+              items:
+                type: object
+                properties:
+                  institution:
+                    type: string
+                  degree:
+                    type: string
+                  year:
+                    type: string
+            experience:
+              type: array
+              items:
+                type: object
+                properties:
+                  company:
+                    type: string
+                  role:
+                    type: string
+                  duration:
+                    type: string
+            certificates:
+              type: array
+              items:
+                type: object
+                properties:
+                  name:
+                    type: string
+                  issuer:
+                    type: string
+                  year:
+                    type: string
+            skills:
+              type: array
+              items:
+                type: object
+                properties:
+                  name:
+                    type: string
+                  percentage:
+                    type: number
+            projects:
+              type: array
+              items:
+                type: object
+                properties:
+                  title:
+                    type: string
+                  description:
+                    type: string
+                  image:
+                    type: string
+                  links:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        option:
+                          type: string
+                        value:
+                          type: string
+            interests:
+              type: array
+              items:
+                type: string
+            customFields:
+              type: array
+              items:
+                type: object
+                properties:
+                  key:
+                    type: string
+                  value:
+                    type: string
+    Notification:
+      type: object
+      properties:
+        message:
+          type: string
+paths:
+  /api/login:
+    post:
+      summary: Log in a user
+      description: Authenticates a user with email and password. Returns tokens for admin users or sends OTP for non-admin users.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                email:
+                  type: string
+                  example: user@example.com
+                password:
+                  type: string
+                  example: password123
+              required:
+                - email
+                - password
+      responses:
+        '200':
+          description: OTP sent or tokens returned
+          content:
+            application/json:
+              schema:
+                oneOf:
+                  - type: object
+                    properties:
+                      message:
+                        type: string
+                        example: OTP sent to your email
+                  - type: object
+                    properties:
+                      token:
+                        type: string
+                      refreshToken:
+                        type: string
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '401':
+          description: Invalid credentials
+        '500':
+          description: Server error
+  /api/login/verify-otp:
+    post:
+      summary: Verify OTP for login
+      description: Verifies the OTP sent to the user's email to complete login.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                email:
+                  type: string
+                  example: user@example.com
+                otp:
+                  type: string
+                  example: "123456"
+              required:
+                - email
+                - otp
+      responses:
+        '200':
+          description: Login successful, returns tokens
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  token:
+                    type: string
+                  refreshToken:
+                    type: string
+        '400':
+          description: Invalid or expired OTP
+        '500':
+          description: Server error
+  /api/register:
+    post:
+      summary: Register a new user
+      description: Creates a new user account with username, email, and password.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                username:
+                  type: string
+                  example: testuser
+                email:
+                  type: string
+                  example: user@example.com
+                password:
+                  type: string
+                  example: password123
+              required:
+                - email
+                - password
+      responses:
+        '201':
+          description: User registered successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  token:
+                    type: string
+                  refreshToken:
+                    type: string
+        '400':
+          description: Invalid input or email already exists
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '500':
+          description: Server error
+  /api/verify-token:
+    get:
+      summary: Verify JWT token
+      description: Verifies the provided JWT token and returns user information.
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: Token is valid
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  valid:
+                    type: boolean
+                  userId:
+                    type: string
+                  isAdmin:
+                    type: boolean
+                  username:
+                    type: string
+                  profile:
+                    $ref: '#/components/schemas/UserProfile'
+        '401':
+          description: Token is required
+        '403':
+          description: Invalid token
+        '404':
+          description: User not found
+  /api/logout:
+    post:
+      summary: Log out a user
+      description: Invalidates the refresh token and logs out the user.
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                refreshToken:
+                  type: string
+              required:
+                - refreshToken
+      responses:
+        '200':
+          description: Logged out successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: Logged out successfully
+        '404':
+          description: User not found
+        '500':
+          description: Server error
+  /api/upload:
+    post:
+      summary: Upload a file
+      description: Uploads a file (JPEG, PNG, or PDF) to Cloudinary (authenticated users only).
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          multipart/form-data:
+            schema:
+              type: object
+              properties:
+                file:
+                  type: string
+                  format: binary
+              required:
+                - file
+      responses:
+        '200':
+          description: File uploaded successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: "File uploaded successfully: <fileUrl>"
+        '400':
+          description: No file uploaded or invalid file type
+        '401':
+          description: Authentication required
+  /api/projects:
+    get:
+      summary: Get all projects
+      description: Retrieves a list of all projects.
+      responses:
+        '200':
+          description: List of projects
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Project'
+        '500':
+          description: Server error
+    post:
+      summary: Create a new project
+      description: Creates a new project (admin only).
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                  example: Project Title
+                description:
+                  type: string
+                  example: Project description
+                image:
+                  type: string
+                  example: https://example.com/image.jpg
+                rating:
+                  type: string
+                  example: High
+                stars:
+                  type: number
+                  example: 5
+                links:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      option:
+                        type: string
+                      value:
+                        type: string
+                      isPrivate:
+                        type: boolean
+              required:
+                - title
+                - description
+                - image
+                - rating
+                - stars
+                - links
+      responses:
+        '201':
+          description: Project created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Project'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/projects/{projectId}:
+    put:
+      summary: Update a project
+      description: Updates an existing project (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: projectId
+          required: true
+          schema:
+            type: string
+          description: The ID of the project to update
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                title:
+                  type: string
+                  example: Updated Project Title
+                description:
+                  type: string
+                  example: Updated project description
+                image:
+                  type: string
+                  example: https://example.com/updated-image.jpg
+                rating:
+                  type: string
+                  example: High
+                stars:
+                  type: number
+                  example: 4
+                links:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      option:
+                        type: string
+                      value:
+                        type: string
+                      isPrivate:
+                        type: boolean
+              required:
+                - title
+                - description
+                - image
+                - rating
+                - stars
+                - links
+      responses:
+        '200':
+          description: Project updated
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Project'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '403':
+          description: Admin access required
+        '404':
+          description: Project not found
+        '500':
+          description: Server error
+    delete:
+      summary: Delete a project
+      description: Deletes a project and its associated comments (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: projectId
+          required: true
+          schema:
+            type: string
+          description: The ID of the project to delete
+      responses:
+        '204':
+          description: Project deleted
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/comments/{projectId}:
+    get:
+      summary: Get comments for a project
+      description: Retrieves all comments for a specific project.
+      parameters:
+        - in: path
+          name: projectId
+          required: true
+          schema:
+            type: string
+          description: The ID of the project
+      responses:
+        '200':
+          description: List of comments
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Comment'
+        '500':
+          description: Server error
+  /api/comments:
+    get:
+      summary: Get all comments
+      description: Retrieves all comments with user and project details (admin only).
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: List of comments
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    _id:
+                      type: string
+                    projectId:
+                      type: string
+                    projectTitle:
+                      type: string
+                    userId:
+                      type: object
+                      properties:
+                        username:
+                          type: string
+                        email:
+                          type: string
+                    rating:
+                      type: number
+                    text:
+                      type: string
+                    timestamp:
+                      type: string
+                      format: date-time
+                    replies:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          text:
+                            type: string
+                          timestamp:
+                            type: string
+                            format: date-time
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+    post:
+      summary: Add a comment
+      description: Adds a new comment to a project (authenticated users only).
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                projectId:
+                  type: string
+                  example: 507f1f77bcf86cd799439011
+                rating:
+                  type: number
+                  example: 5
+                text:
+                  type: string
+                  example: Great project!
+              required:
+                - projectId
+                - rating
+                - text
+      responses:
+        '201':
+          description: Comment added
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Comment'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '401':
+          description: Authentication required
+        '500':
+          description: Server error
+  /api/comments/{commentId}/reply:
+    post:
+      summary: Reply to a comment
+      description: Adds a reply to an existing comment (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: commentId
+          required: true
+          schema:
+            type: string
+          description: The ID of the comment to reply to
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                text:
+                  type: string
+                  example: Thanks for your feedback!
+              required:
+                - text
+      responses:
+        '200':
+          description: Reply added
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Comment'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '403':
+          description: Admin access required
+        '404':
+          description: Comment not found
+        '500':
+          description: Server error
+  /api/comments/{commentId}:
+    delete:
+      summary: Delete a comment
+      description: Deletes a comment (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: commentId
+          required: true
+          schema:
+            type: string
+          description: The ID of the comment to delete
+      responses:
+        '204':
+          description: Comment deleted
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/skills:
+    get:
+      summary: Get all skills
+      description: Retrieves a list of all skills.
+      responses:
+        '200':
+          description: List of skills
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Skill'
+        '500':
+          description: Server error
+    post:
+      summary: Create a new skill
+      description: Creates a new skill (admin only).
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                name:
+                  type: string
+                  example: JavaScript
+                icon:
+                  type: string
+                  example: https://example.com/icon.png
+                percentage:
+                  type: number
+                  example: 90
+              required:
+                - name
+                - icon
+                - percentage
+      responses:
+        '201':
+          description: Skill created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Skill'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/skills/{skillId}:
+    put:
+      summary: Update a skill
+      description: Updates an existing skill (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: skillId
+          required: true
+          schema:
+            type: string
+          description: The ID of the skill to update
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                name:
+                  type: string
+                  example: Updated JavaScript
+                icon:
+                  type: string
+                  example: https://example.com/updated-icon.png
+                percentage:
+                  type: number
+                  example: 95
+              required:
+                - name
+                - icon
+                - percentage
+      responses:
+        '200':
+          description: Skill updated
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Skill'
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '403':
+          description: Admin access required
+        '404':
+          description: Skill not found
+        '500':
+          description: Server error
+    delete:
+      summary: Delete a skill
+      description: Deletes a skill (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: skillId
+          required: true
+          schema:
+            type: string
+          description: The ID of the skill to delete
+      responses:
+        '204':
+          description: Skill deleted
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/profile/{nickname}:
+    get:
+      summary: Get a user's profile
+      description: Retrieves a user's profile by nickname or username.
+      parameters:
+        - in: path
+          name: nickname
+          required: true
+          schema:
+            type: string
+          description: The nickname or username of the user
+      responses:
+        '200':
+          description: User profile
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserProfile'
+        '404':
+          description: User not found
+  /api/profile:
+    put:
+      summary: Update user profile
+      description: Updates the authenticated user's profile, including optional file uploads for avatar and project images.
+      security:
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          multipart/form-data:
+            schema:
+              type: object
+              properties:
+                nickname:
+                  type: string
+                  example: johndoe
+                jobTitle:
+                  type: string
+                  example: Full-Stack Developer
+                bio:
+                  type: string
+                  example: Experienced developer with a passion for web technologies
+                phone:
+                  type: string
+                  example: +1234567890
+                socialLinks:
+                  type: string
+                  example: '{"linkedin":"https://linkedin.com/in/johndoe","github":"https://github.com/johndoe"}'
+                education:
+                  type: string
+                  example: '[{"institution":"University","degree":"BSc","year":"2020"}]'
+                experience:
+                  type: string
+                  example: '[{"company":"Tech Corp","role":"Developer","duration":"2020-2022"}]'
+                certificates:
+                  type: string
+                  example: '[{"name":"AWS Certified","issuer":"Amazon","year":"2021"}]'
+                skills:
+                  type: string
+                  example: '[{"name":"JavaScript","percentage":90}]'
+                projects:
+                  type: string
+                  example: '[{"title":"Project X","description":"A web app","image":"https://example.com/image.jpg"}]'
+                interests:
+                  type: string
+                  example: '["coding","gaming"]'
+                isPublic:
+                  type: boolean
+                  example: true
+                avatarDisplayType:
+                  type: string
+                  enum: ['svg', 'normal']
+                  example: normal
+                svgColor:
+                  type: string
+                  example: '#000000'
+                avatar:
+                  type: string
+                  format: binary
+                projectImages:
+                  type: array
+                  items:
+                    type: string
+                    format: binary
+      responses:
+        '200':
+          description: Profile updated
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  success:
+                    type: boolean
+                  message:
+                    type: string
+                    example: Profile updated successfully
+                  profile:
+                    $ref: '#/components/schemas/UserProfile'
+                  hasTransparency:
+                    type: boolean
+        '400':
+          description: Invalid input
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '401':
+          description: Authentication required
+        '404':
+          description: User not found
+        '500':
+          description: Server error
+  /api/profile/pdf/{nickname}:
+    get:
+      summary: Generate a PDF resume
+      description: Generates a PDF resume for a user by nickname, using jsPDF with autoTable for professional formatting. Only accessible for public profiles or authenticated users.
+      parameters:
+        - in: path
+          name: nickname
+          required: true
+          schema:
+            type: string
+          description: The nickname or username of the user
+      responses:
+        '200':
+          description: PDF resume generated
+          content:
+            application/pdf:
+              schema:
+                type: string
+                format: binary
+        '403':
+          description: Profile is private
+        '404':
+          description: User not found
+        '500':
+          description: Server error
+  /api/notifications:
+    get:
+      summary: Get user notifications
+      description: Retrieves all notifications for the authenticated user (admin only).
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: List of notifications
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Notification'
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/user-interactions:
+    get:
+      summary: Get user interactions
+      description: Retrieves all comments made by the authenticated user.
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: List of user comments
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Comment'
+        '401':
+          description: Authentication required
+        '500':
+          description: Server error
+  /api/users:
+    get:
+      summary: Get all users
+      description: Retrieves a list of all users (admin only).
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: List of users
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    username:
+                      type: string
+                    email:
+                      type: string
+                    profile:
+                      $ref: '#/components/schemas/UserProfile'
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/users/{userId}:
+    delete:
+      summary: Delete a user
+      description: Deletes a user and their comments (admin only).
+      security:
+        - bearerAuth: []
+      parameters:
+        - in: path
+          name: userId
+          required: true
+          schema:
+            type: string
+          description: The ID of the user to delete
+      responses:
+        '204':
+          description: User deleted
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/forgot-password:
+    post:
+      summary: Request password reset
+      description: Sends a password reset OTP to the user's email.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                email:
+                  type: string
+                  example: user@example.com
+              required:
+                - email
+      responses:
+        '200':
+          description: Reset code sent
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: Reset code sent to your email
+        '400':
+          description: Email required
+        '404':
+          description: User not found
+        '500':
+          description: Server error
+  /api/reset-password:
+    post:
+      summary: Reset password
+      description: Resets the user's password using the OTP.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                email:
+                  type: string
+                  example: user@example.com
+                otp:
+                  type: string
+                  example: "123456"
+                newPassword:
+                  type: string
+                  example: newpassword123
+              required:
+                - email
+                - otp
+                - newPassword
+      responses:
+        '200':
+          description: Password reset successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: Password reset successfully
+        '400':
+          description: Invalid input or OTP
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  errors:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        msg:
+                          type: string
+                        param:
+                          type: string
+                        location:
+                          type: string
+        '500':
+          description: Server error
+  /api/health:
+    get:
+      summary: Check server health
+      description: Checks the health of the server and MongoDB connection.
+      responses:
+        '200':
+          description: Server is healthy
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                    example: ok
+                  mongodb:
+                    type: string
+                    example: connected
+                  timestamp:
+                    type: string
+                    format: date-time
+        '500':
+          description: Server error
+  /api/users/search:
+    get:
+      summary: Search users
+      description: Searches for public users by nickname or username.
+      parameters:
+        - in: query
+          name: query
+          required: true
+          schema:
+            type: string
+          description: Search query for nickname or username
+      responses:
+        '200':
+          description: List of matching users
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    username:
+                      type: string
+                    nickname:
+                      type: string
+                    avatar:
+                      type: string
+                    profileUrl:
+                      type: string
+                    portfolioName:
+                      type: string
+        '500':
+          description: Server error
+  /api/conversations/export:
+    get:
+      summary: Export conversations
+      description: Exports all conversations as a CSV file (admin only).
+      security:
+        - bearerAuth: []
+      responses:
+        '200':
+          description: Conversations exported as CSV
+          content:
+            text/csv:
+              schema:
+                type: string
+                format: binary
+        '403':
+          description: Admin access required
+        '500':
+          description: Server error
+  /api/github-projects:
+    get:
+      summary: Get GitHub projects
+      description: Retrieves the GitHub repositories for the user Mark-Lasfar.
+      responses:
+        '200':
+          description: List of GitHub repositories
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: number
+                    name:
+                      type: string
+                    description:
+                      type: string
+                    html_url:
+                      type: string
+                    created_at:
+                      type: string
+                      format: date-time
+        '500':
+          description: Server error
+  /auth/google:
+    get:
+      summary: Initiate Google OAuth login
+      description: Redirects to Google for OAuth authentication.
+      responses:
+        '302':
+          description: Redirect to Google authentication
+  /auth/facebook:
+    get:
+      summary: Initiate Facebook OAuth login
+      description: Redirects to Facebook for OAuth authentication.
+      responses:
+        '302':
+          description: Redirect to Facebook authentication
+          /api/revoke-token:
+  post:
+    summary: Revoke a specific refresh token
+    tags: [Authentication]
+    security:
+      - bearerAuth: []
+    requestBody:
+      required: true
+      content:
+        application/json:
+          schema:
+            type: object
+            properties:
+              refreshToken:
+                type: string
+                description: The refresh token to revoke
+            required:
+              - refreshToken
+    responses:
+      200:
+        description: Refresh token revoked successfully
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                success:
+                  type: boolean
+                message:
+                  type: string
+      400:
+        description: Invalid request
+      401:
+        description: Unauthorized
+      500:
+        description: Server error
+  /auth/github:
+    get:
+      summary: Initiate GitHub OAuth login
+      description: Redirects to GitHub for OAuth authentication.
+      responses:
+        '302':
+          description: Redirect to GitHub authentication
+  /auth/google/callback:
+    get:
+      summary: Google OAuth callback
+      description: Handles the callback from Google OAuth and redirects with tokens.
+      responses:
+        '302':
+          description: Redirect to client with tokens or error
+  /auth/facebook/callback:
+    get:
+      summary: Facebook OAuth callback
+      description: Handles the callback from Facebook OAuth and redirects with tokens.
+      responses:
+        '302':
+          description: Redirect to client with tokens or error
+  /auth/github/callback:
+    get:
+      summary: GitHub OAuth callback
+      description: Handles the callback from GitHub OAuth and redirects with tokens.
+      responses:
+        '302':
+          description: Redirect to client with tokens or error
+  /:
+    get:
+      summary: Welcome message
+      description: Returns a welcome message for the API.
+      responses:
+        '200':
+          description: Welcome message
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    example: Welcome to Ibrahim Al-Asfar's Portfolio Backend API

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@mark-lasfar/portfolio-backend",
+  "version": "1.0.1",
+  "description": "Backend for Ibrahim Al-Asfar's portfolio website, supporting authentication, project management, and AI-powered chat.",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "build": "echo \"No build step needed for backend\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "portfolio",
+    "backend",
+    "express",
+    "mongodb",
+    "cloudinary",
+    "authentication",
+    "oauth",
+    "ai"
+  ],
+  "author": "Ibrahim Al-Asfar <admin@elasfar.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/Mark-Lasfar/portfolio-backend#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mark-Lasfar/portfolio-backend.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Mark-Lasfar/portfolio-backend/issues"
+  },
+  "dependencies": {
+    "@canva/app-ui-kit": "^4.10.0",
+    "@sentry/node": "^7.120.4",
+    "@sentry/profiling-node": "^10.0.0",
+    "@sentry/tracing": "^7.120.4",
+    "axios": "^1.14.0",
+    "bcryptjs": "^2.4.3",
+    "cloudinary": "^1.41.3",
+    "compression": "^1.8.1",
+    "cookie-parser": "^1.4.7",
+    "cors": "^2.8.6",
+    "csurf": "^1.11.0",
+    "docx": "^9.6.1",
+    "dotenv": "^16.6.1",
+    "ejs": "^5.0.1",
+    "express": "^4.22.1",
+    "express-rate-limit": "^8.3.2",
+    "express-timeout-handler": "^2.2.2",
+    "express-validator": "^7.3.1",
+    "googleapis": "^154.1.0",
+    "helmet": "^8.1.0",
+    "jimp": "^1.6.0",
+    "jsonwebtoken": "^9.0.3",
+    "jspdf": "^3.0.4",
+    "jspdf-autotable": "^5.0.7",
+    "lru-cache": "^11.2.7",
+    "mongoose": "^8.23.0",
+    "morgan": "^1.10.1",
+    "multer": "^1.4.5-lts.1",
+    "multer-storage-cloudinary": "^4.0.0",
+    "node-cron": "^4.2.1",
+    "nodemailer": "^6.10.1",
+    "passport": "^0.7.0",
+    "passport-facebook": "^3.0.0",
+    "passport-github2": "^0.1.12",
+    "passport-google-oauth20": "^2.0.0",
+    "passport-mgzon": "^1.0.2",
+    "passport-oauth2": "^1.8.0",
+    "sharp": "^0.32.6",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.1",
+    "validator": "^13.12.0",
+    "web-push": "^3.6.7",
+    "winston": "^3.19.0"
+  }
+}

translations.json

@@ -0,0 +1,7 @@
+{
+  "en-US": {
+    "app_name": "Asafr",
+    "short_description": "Generate professional resumes from user profiles",
+    "tagline": "Create stunning resumes with ease",
+    "description": "Asafr helps users create professional PDF resumes from their portfolio profiles, supporting Arabic and English."
+  }}

vercel.json

@@ -0,0 +1,51 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "server.js",
+      "use": "@vercel/node",
+      "config": {
+        "includeFiles": [
+          "views/**",
+          "public/**",
+          "docs/**"
+        ]
+      }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/api/(.*)",
+      "dest": "server.js"
+    },
+    {
+      "src": "/auth/(.*)",
+      "dest": "server.js"
+    },
+    {
+      "src": "/api-docs/(.*)",
+      "dest": "server.js"
+    },
+    {
+      "src": "/",
+      "dest": "server.js"
+    },
+    {
+      "src": "/(.*\\.(ejs|html|css|js|png|jpg|jpeg|gif|svg|ico|json|yaml|yml))$",
+      "dest": "/public/$1"
+    },
+    {
+      "src": "/(.*)",
+      "dest": "server.js"
+    }
+  ],
+  "env": {
+    "NODE_ENV": "production"
+  },
+  "functions": {
+    "server.js": {
+      "memory": 1024,
+      "maxDuration": 10
+    }
+  }
+}

views/index.ejs

@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Ibrahim Al-Asfar Portfolio API - Full-stack web developer portfolio backend API">
+    <meta name="keywords" content="portfolio, API, Node.js, Express, MongoDB, developer">
+    <meta name="author" content="Ibrahim Al-Asfar">
+    <meta property="og:title" content="Ibrahim Al-Asfar Portfolio API">
+    <meta property="og:description" content="Full-stack web developer portfolio API">
+    <meta property="og:type" content="website">
+    <title> Portfolio API</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+
+    <!-- Custom Styles -->
+    <style>
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .animate-fadeInUp {
+            animation: fadeInUp 0.6s ease-out;
+        }
+
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #5a67d8;
+        }
+
+        /* Logo styling */
+        .logo-img {
+            width: 32px;
+            height: 32px;
+            object-fit: contain;
+            border-radius: 8px;
+        }
+
+        /* Fallback styles if Tailwind doesn't load */
+        .bg-gradient-to-br {
+            background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
+        }
+
+        .shadow-lg {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .rounded-lg {
+            border-radius: 0.5rem;
+        }
+
+        .p-2 {
+            padding: 0.5rem;
+        }
+
+        .p-3 {
+            padding: 0.75rem;
+        }
+
+        .p-5 {
+            padding: 1.25rem;
+        }
+
+        .p-6 {
+            padding: 1.5rem;
+        }
+
+        .py-8 {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+
+        .py-16 {
+            padding-top: 4rem;
+            padding-bottom: 4rem;
+        }
+
+        .py-20 {
+            padding-top: 5rem;
+            padding-bottom: 5rem;
+        }
+
+        .px-4 {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .text-center {
+            text-align: center;
+        }
+
+        .text-white {
+            color: white;
+        }
+
+        .text-gray-600 {
+            color: #4b5563;
+        }
+
+        .text-gray-800 {
+            color: #1f2937;
+        }
+
+        .text-xl {
+            font-size: 1.25rem;
+        }
+
+        .text-2xl {
+            font-size: 1.5rem;
+        }
+
+        .text-3xl {
+            font-size: 1.875rem;
+        }
+
+        .text-5xl {
+            font-size: 3rem;
+        }
+
+        .font-bold {
+            font-weight: 700;
+        }
+
+        .font-semibold {
+            font-weight: 600;
+        }
+
+        .bg-white {
+            background-color: white;
+        }
+
+        .bg-gray-800 {
+            background-color: #1f2937;
+        }
+
+        .bg-green-500 {
+            background-color: #10b981;
+        }
+
+        .mb-2 {
+            margin-bottom: 0.5rem;
+        }
+
+        .mb-4 {
+            margin-bottom: 1rem;
+        }
+
+        .mb-6 {
+            margin-bottom: 1.5rem;
+        }
+
+        .mb-8 {
+            margin-bottom: 2rem;
+        }
+
+        .mb-12 {
+            margin-bottom: 3rem;
+        }
+
+        .mt-2 {
+            margin-top: 0.5rem;
+        }
+
+        .mr-2 {
+            margin-right: 0.5rem;
+        }
+
+        .flex {
+            display: flex;
+        }
+
+        .inline-flex {
+            display: inline-flex;
+        }
+
+        .grid {
+            display: grid;
+        }
+
+        .items-center {
+            align-items: center;
+        }
+
+        .justify-center {
+            justify-content: center;
+        }
+
+        .justify-between {
+            justify-content: space-between;
+        }
+
+        .gap-4 {
+            gap: 1rem;
+        }
+
+        .gap-6 {
+            gap: 1.5rem;
+        }
+
+        .gap-8 {
+            gap: 2rem;
+        }
+
+        .max-w-2xl {
+            max-width: 42rem;
+        }
+
+        .max-w-7xl {
+            max-width: 80rem;
+        }
+
+        .mx-auto {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .w-12 {
+            width: 3rem;
+        }
+
+        .h-12 {
+            height: 3rem;
+        }
+
+        .w-3 {
+            width: 0.75rem;
+        }
+
+        .h-3 {
+            height: 0.75rem;
+        }
+
+        .rounded-full {
+            border-radius: 9999px;
+        }
+
+        .rounded-xl {
+            border-radius: 0.75rem;
+        }
+
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: .5;
+            }
+        }
+
+        .sticky {
+            position: sticky;
+        }
+
+        .top-0 {
+            top: 0;
+        }
+
+        .z-50 {
+            z-index: 50;
+        }
+
+        .absolute {
+            position: absolute;
+        }
+
+        .relative {
+            position: relative;
+        }
+
+        .inset-0 {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        .overflow-hidden {
+            overflow: hidden;
+        }
+
+        .bg-opacity-10 {
+            opacity: 0.1;
+        }
+
+        .transition {
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 150ms;
+        }
+
+        .hover\:shadow-lg:hover {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        .hover\:bg-gray-900:hover {
+            background-color: #111827;
+        }
+
+        .hover\:text-purple-600:hover {
+            color: #7c3aed;
+        }
+
+        @media (min-width: 640px) {
+            .sm\:px-6 {
+                padding-left: 1.5rem;
+                padding-right: 1.5rem;
+            }
+        }
+
+        @media (min-width: 768px) {
+            .md\:grid-cols-2 {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+
+            .md\:grid-cols-3 {
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+
+            .md\:text-6xl {
+                font-size: 3.75rem;
+            }
+        }
+
+        @media (min-width: 1024px) {
+            .lg\:grid-cols-3 {
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+
+            .lg\:px-8 {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
+
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center space-x-3">
+                    <!-- Logo Image -->
+                    <img src="images/logo.png" alt="Logo" class="logo-img"
+                        onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'gradient-bg rounded-lg p-2\'><i class=\'fas fa-code text-white text-xl\'></i></div>'">
+                    <h1
+                        class="text-xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+                        Portfolio API
+                    </h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="/api-docs" target="_blank" class="text-gray-600 hover:text-purple-600 transition"
+                        title="API Documentation">
+                        <i class="fas fa-book text-lg"></i>
+                    </a>
+                    <a href="https://github.com/Mark-Lasfar" target="_blank"
+                        class="text-gray-600 hover:text-purple-600 transition" title="GitHub">
+                        <i class="fab fa-github text-lg"></i>
+                    </a>
+                    <a href="https://linkedin.com/in/ibrahim-elasfar" target="_blank"
+                        class="text-gray-600 hover:text-purple-600 transition" title="LinkedIn">
+                        <i class="fab fa-linkedin text-lg"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <div class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-10"></div>
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+            <div class="text-center animate-fadeInUp">
+                <div class="inline-flex items-center justify-center p-2 bg-green-100 rounded-full mb-4">
+                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
+                    <span class="text-green-600 text-sm font-medium">API is running</span>
+                </div>
+                <h1
+                    class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+                    Welcome to My Portfolio API
+                </h1>
+                <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+                    Full-stack web developer passionate about building modern web applications with cutting-edge
+                    technologies.
+                </p>
+                <div class="flex flex-wrap justify-center gap-4">
+                    <a href="/api-docs"
+                        class="gradient-bg text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition-all inline-flex items-center">
+                        <i class="fas fa-rocket mr-2"></i>
+                        Explore API
+                    </a>
+                    <a href="https://github.com/Mark-Lasfar" target="_blank"
+                        class="bg-gray-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-900 transition-all inline-flex items-center">
+                        <i class="fab fa-github mr-2"></i>
+                        GitHub
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Stats Section with Real-time Data -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover animate-fadeInUp" style="animation-delay: 0.1s">
+                <div class="gradient-bg w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-database text-white text-xl"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-2">Database Status</h3>
+                <div class="flex items-center">
+                    <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse mr-2"></div>
+                    <p class="text-gray-600" id="db-status">MongoDB Connected</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover animate-fadeInUp" style="animation-delay: 0.2s">
+                <div class="gradient-bg w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-cloud-upload-alt text-white text-xl"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-2">Cloudinary</h3>
+                <p class="text-gray-600" id="cloudinary-status">Media Storage Active</p>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-lg p-6 card-hover animate-fadeInUp" style="animation-delay: 0.3s">
+                <div class="gradient-bg w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-chart-line text-white text-xl"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-2">Analytics</h3>
+                <p class="text-gray-600" id="sentry-status">Sentry Monitoring Active</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- API Endpoints Section -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">API Endpoints</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-green-100 text-green-600 text-xs font-semibold px-2 py-1 rounded">GET</span>
+                    <i class="fas fa-users text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/api/projects</code>
+                <p class="text-gray-500 text-sm mt-2">Get all public projects</p>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-green-100 text-green-600 text-xs font-semibold px-2 py-1 rounded">GET</span>
+                    <i class="fas fa-chart-simple text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/api/skills</code>
+                <p class="text-gray-500 text-sm mt-2">Get all skills</p>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-green-100 text-green-600 text-xs font-semibold px-2 py-1 rounded">GET</span>
+                    <i class="fas fa-heart text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/api/health</code>
+                <p class="text-gray-500 text-sm mt-2">Check system health</p>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-blue-100 text-blue-600 text-xs font-semibold px-2 py-1 rounded">POST</span>
+                    <i class="fas fa-user-plus text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/api/register</code>
+                <p class="text-gray-500 text-sm mt-2">Create new account</p>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-blue-100 text-blue-600 text-xs font-semibold px-2 py-1 rounded">POST</span>
+                    <i class="fas fa-sign-in-alt text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/api/login</code>
+                <p class="text-gray-500 text-sm mt-2">Authenticate user</p>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="bg-purple-100 text-purple-600 text-xs font-semibold px-2 py-1 rounded">AUTH</span>
+                    <i class="fab fa-google text-gray-400"></i>
+                </div>
+                <code class="text-sm text-gray-700">/auth/google</code>
+                <p class="text-gray-500 text-sm mt-2">Google OAuth</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Tech Stack Section -->
+    <div class="bg-white py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Technology Stack</h2>
+            <div class="flex flex-wrap justify-center gap-8">
+                <div class="text-center">
+                    <i class="fab fa-node-js text-5xl text-green-600"></i>
+                    <p class="mt-2 text-gray-600">Node.js</p>
+                </div>
+                <div class="text-center">
+                    <i class="fab fa-react text-5xl text-blue-500"></i>
+                    <p class="mt-2 text-gray-600">React</p>
+                </div>
+                <div class="text-center">
+                    <i class="fas fa-database text-5xl text-green-700"></i>
+                    <p class="mt-2 text-gray-600">MongoDB</p>
+                </div>
+                <div class="text-center">
+                    <i class="fas fa-project-diagram text-5xl text-pink-500"></i>
+                    <p class="mt-2 text-gray-600">GraphQL</p>
+                </div>
+
+                <div class="text-center">
+                    <i class="fab fa-docker text-5xl text-blue-600"></i>
+                    <p class="mt-2 text-gray-600">Docker</p>
+                </div>
+                <div class="text-center">
+                    <i class="fab fa-aws text-5xl text-orange-500"></i>
+                    <p class="mt-2 text-gray-600">AWS</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="text-gray-400">&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
+            <p class="text-gray-500 text-sm mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p>
+            <p class="text-gray-600 text-xs mt-4">
+                <i class="fas fa-code mr-1"></i> API Version 1.0.0
+            </p>
+        </div>
+    </footer>
+
+    <script>
+        // Fetch real-time data
+        async function fetchStats() {
+            try {
+                const response = await fetch('/api/health');
+                const data = await response.json();
+                console.log('System Health:', data);
+
+                // Update statuses based on real data
+                if (data.mongodb === 'connected') {
+                    document.getElementById('db-status').innerHTML = 'MongoDB Connected ✅';
+                    document.getElementById('db-status').className = 'text-green-600';
+                }
+                if (data.cloudinary === 'configured') {
+                    document.getElementById('cloudinary-status').innerHTML = 'Cloudinary Active ✅';
+                    document.getElementById('cloudinary-status').className = 'text-green-600';
+                }
+                if (data.sentry === 'configured') {
+                    document.getElementById('sentry-status').innerHTML = 'Sentry Active ✅';
+                    document.getElementById('sentry-status').className = 'text-green-600';
+                }
+            } catch (error) {
+                console.error('Error fetching stats:', error);
+                document.getElementById('db-status').innerHTML = 'Connection Error ❌';
+                document.getElementById('db-status').className = 'text-red-600';
+            }
+        }
+        fetchStats();
+
+        // Refresh stats every 30 seconds
+        setInterval(fetchStats, 30000);
+
+        // Dark mode handling
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+
+        // Add smooth scroll behavior
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+
+        // Add page load animation
+        window.addEventListener('load', () => {
+            document.body.style.opacity = '0';
+            document.body.style.transition = 'opacity 0.5s ease';
+            setTimeout(() => {
+                document.body.style.opacity = '1';
+            }, 100);
+        });
+    </script>
+</body>
+
+</html>