Features

Portfolio Page (Public View)

• Profile: Displays name, age, nationality, gender, and job role.
• About Me: Supports rich HTML text for detailed descriptions.
• Skills: Lists skills with proficiency levels.
• Contact: Dynamically configurable contact methods with associated icons show as link or popup message.
• Experiences: Shows professional history including company logo, name, position, work period, and description.
• Portfolio: Features projects with names, photos, open-source status, descriptions, and technology stacks.
• Education: Lists educational background including institute name, address, major, degree, and GPA.
• Language: Displays languages known and their proficiency levels.
• PDF: Provides an option to view/download a PDF version of the portfolio.

LLM Chat Page (Requires dynamic-agent backend)

• Interactive Chat: Allows visitors to ask questions about the portfolio content (profile, experience, projects, etc.).
• Retrieval-Augmented Generation (RAG): When asked about specific details (e.g., "What is your profile fullname?", "Tell me about your experience with Rust"), the dynamic-agent backend can query its configured vector database. This database should be populated with your portfolio information (profile, skills, experiences, etc.). The agent retrieves relevant text chunks and uses them, along with the user's query, to generate an informed answer via the LLM. This ensures responses are grounded in your actual portfolio data.
• Real-time Responses: Provides responses generated by a configured Large Language Model via a WebSocket connection.
• Processing Indicator: Shows when the AI agent is processing a request.
• Timestamps: Displays timestamps for both user messages and agent responses.
• Secure Connection: Supports API key authentication using HMAC-SHA256 (signing a timestamp with a shared secret) and optional TLS (WSS) for the WebSocket connection. This prevents the raw API key from being transmitted and adds a layer of protection against replay attacks.
• Pre-defined Suggestions: Displays a set of categorized question suggestions when the chat interface is first opened, helping guide users. These are configurable via a JSON file.

Configuring Chat Suggestions and RAG

The pre-defined chat suggestions are loaded from the /assets/pre-suggest.json file. You can customize these suggestions to better fit your portfolio content and to trigger specific RAG queries.

1. Edit assets/pre-suggest.json:

The file should be an array of suggestion groups. Each group object has the following structure:

[
  {
    "group_title": "General Topics",
    "icon": "BsChatRightText", // Icon identifier
    "suggestions": [
      "Hello, how are you?",
      "What can you do?"
    ]
  },
  {
    "group_title": "Vector Database (Profile)", // Example for RAG
    "icon": "ImProfile", 
    "suggestions": [
      "What is your profile fullname?", // This query will leverage RAG
      "List profile position name from experiences." // This also uses RAG
    ]
  }
  // Add more groups as needed
]

• group_title: The title displayed for the category of suggestions.
• icon: A string identifier for the icon to be displayed next to the group title.
• suggestions: An array of strings, where each string is a pre-defined question or prompt. Queries aimed at retrieving specific portfolio details (like those under "Vector Database (Profile)") will typically be handled by the dynamic-agent's RAG pipeline.

2. Configure Icons:

The icon field in pre-suggest.json is a key that maps to an actual icon from the icondata crate. This mapping is defined in the ICON_MAP static variable within the src/app/utils/utils.rs file.

• Finding Icons: You can browse available icons at the icondata icon explorer.

• Adding New Icons to ICON_MAP: If you want to use an icon that's not already in ICON_MAP, you'll need to add it. Open src/app/utils/utils.rs and add a new entry to the ICON_MAP. For example, if you find an icon AiStarOutline in icondata (which would be i::AiStarOutline in the code) and you want to use the key "MyStarIcon" in your pre-suggest.json:

  // filepath: src/app/utils/utils.rs
  // ...
  pub static ICON_MAP: phf::Map<
      &'static str,
      &'static icondata_core::IconData
  > = phf_map! {
      // ... existing icons ...
      "BsChatRightText" => i::BsChatRightText,
      "ImProfile" => i::ImProfile,
      "MyStarIcon" => i::AiStarOutline, // Add your new icon here
      // ...
  };
  // ...
  

  Ensure you have the correct use icondata as i; statement at the top of utils.rs. After updating ICON_MAP, you can then use "MyStarIcon" as the value for the icon field in assets/pre-suggest.json.

3. Ensure dynamic-agent is Configured for RAG:

For the chat to effectively answer questions about your "profile" or other specific data using RAG:

• The dynamic-agent backend must be configured with a data source containing your portfolio information (e.g., markdown files, database connection).
• It must be configured with a vector store (e.g., Qdrant, Redis with vector search, SurrealDB) where this information is indexed as embeddings.
• Refer to the dynamic-agent README for detailed instructions on setting up its data sources, vector store, and RAG pipeline. The effectiveness of queries like "What profile fullname?" depends entirely on this backend configuration.

Admin Edit Page

• Permission Modes:
  • Viewer Mode: Allows viewing the admin sections without requiring a password (read-only).
  • Admin Mode: Requires a password (set in .env) to enable adding, editing, and deleting content.
• Editable Sections:
  • Profile: Edit profile details and the "About Me" section using TinyMCE.
  • Skills: Add/Edit/Remove skills order by high level.
  • Experiences: Add/Edit/Remove work experiences order by job start date.
  • Portfolio: Add/Edit/Remove portfolio projects order by index (can reindex).
  • Contact: Add/Edit/Remove contact and dynamic icon order by button type.
  • Education: Add/Edit/Remove education entries order by graduated year .
  • Language: Add/Edit/Remove language proficiencies order by high level.
  • PDF: Configure PDF generation (e.g., use generated HTML or a custom PDF link) and other related settings.

General Features

• WYSIWYG Content: Display your content as HTML, allowing complete freedom to design beautiful information.
• PDF Template: Generate an HTML PDF from portfolio data using a minimal, cool resume template.
• Form Validation: Ensure that all required fields are validated and prevent updates if any required fields are missing.
• Toast Notifications: Provides feedback for actions performed on the admin page.
• Backend Server: A simple Actix Web API server that interacts with the SurrealDB database.
• Responsive UI: The user interface adapts smoothly to all devices screen sizes using Tailwind CSS.
• Caching: Utilizes Redis to cache profile data and generated PDF files, improving website performance by reducing database queries and server processing.
• Site Configuration:
  • Set the website title.
  • Meta Tags: Under development.
  • Other SEO Tags: Planned.
• Dark Mode: Toggle between light and dark themes.
• Security: Password hashing using Argon2 with protection against timing attacks, along with Redis-based IP rate limiting. WebSocket security via API Key and optional TLS.
• Intro Animation: Welcome intro animation using Tailwind CSS..
• Other: Dialog Popup , Text Field Array,

Prerequisites

1. Clone Project:

   git clone https://github.com/DevsHero/leptos_portfolio_admin.git
   cd leptos_portfolio_admin
   

2. Prepare .env file: Copy the example environment file. You will need to fill this file with your specific configuration details.

   cp .env-example .env
   

   Below are the variables defined in .env-example and their purpose:

   # --- SurrealDB Connection ---
   # Defines the protocol (http/https) and host/port for the SurrealDB instance.
   # Example: http:127.0.0.1:8000 or https:[your-cloud-instance.com](https://www.google.com/search?q=