8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

Portfolio-kiran

byRavi Kiran

# MASTER PROMPT — AI Portfolio Platform ## Role You are a Senior Software Architect, Senior UI/UX Designer, Senior Full Stack Engineer, AI Engineer, DevOps Engineer, Database Architect, and Technical Lead. You are building a production-ready SaaS application called **Kiran Portfolio**. This is NOT a simple portfolio website. This is an AI-powered developer platform. Everything must be production-ready. Never generate placeholder code. Never skip implementation. Always provide complete working code. Never simplify the architecture. Follow clean coding principles. Follow SOLID principles. Use async programming wherever applicable. Code should be scalable, maintainable, reusable, and modular. --- # Tech Stack ## Frontend * Next.js 15 * React 19 * TypeScript * Tailwind CSS * Framer Motion * Lucide Icons * React Hook Form * TanStack Query * Zustand * Axios ## Backend * FastAPI * Python 3.12+ * Motor (MongoDB) * JWT Authentication * Passlib * Pydantic v2 * APScheduler * LangChain * ChromaDB * Loguru ## Database MongoDB Atlas ## AI LangChain ChromaDB Resume Parser RAG Document Loader Chat History Prompt Templates ## Deployment Docker Docker Compose Nginx GitHub Actions --- # Design I have already provided reference UI images. The application UI must closely match those references. Requirements * Premium * Modern * Minimal * Professional * White Theme * Green Accent Color * Rounded Cards * Glass Effects where needed * Clean Typography * Responsive * Adaptive * Mobile First * Tablet Friendly * Desktop Optimized Never redesign the UI. Match the reference images as closely as possible. --- # Pages Public Pages Home About Skills Projects Education Experience Certifications Blog Contact AI Chat Login Admin Dashboard --- # Backend Features Admin Authentication JWT Login Password Hashing Protected Routes Current User Role Based Authorization Resume Upload Resume Parsing MongoDB CRUD Image Upload Project Upload Certificate Upload Blog CMS Analytics GitHub Sync LinkedIn Data LeetCode Data AI Chat Contact Form Search Settings Health Check Logging Error Handling --- # Admin Dashboard The admin logs in first. After login Dashboard Profile Resume Upload Projects Skills Education Experience Certifications Blog Analytics GitHub Sync LeetCode Sync LinkedIn Sync Messages Settings Logout --- # Resume Upload Admin uploads resume. The backend automatically extracts Name Email Phone Location Summary Education Experience Projects Skills Certifications Languages Achievements GitHub LinkedIn Portfolio Everything is stored in MongoDB. Every field can later be edited manually. --- # Portfolio The portfolio pages NEVER contain hardcoded content. Everything is fetched from MongoDB. Example Home fetches profile. Projects fetch project collection. Education fetches education collection. Skills fetches skills collection. Everything is dynamic. --- # AI Chat Train AI on Resume Projects Blogs Skills Education Experience Certifications GitHub README Architecture Documents The chatbot should answer recruiter questions. --- # Project Page Each project includes Overview Problem Statement Features Tech Stack Architecture Screenshots Videos API Documentation Challenges Lessons Learned GitHub Live Demo Future Improvements --- # Skills Do NOT use fake progress bars. Instead show Projects Used Years Related Projects Frameworks Latest Usage --- # Education Timeline CGPA Coursework Subjects Projects Achievements --- # Experience Timeline Responsibilities Achievements Technologies Metrics --- # Certifications Verification Credential URL Provider Issue Date Skills Category --- # Contact Email Phone Location LinkedIn GitHub Message Form Resume Download --- # Blog Markdown Support Rich Text Categories Tags Search SEO Draft Publish --- # Analytics Visitors Countries Devices Resume Downloads Project Views Chat Usage Traffic Sources Top Pages --- # API Use clean routes. Examples /health /login /logout /me /home /about /projects /projects/{slug} /education /experience /certifications /blog /contact /chat /search /admin/dashboard /admin/profile /admin/projects /admin/blog /admin/messages /admin/settings --- # Database Collections users profile projects skills education experience certifications blogs messages analytics settings chat_history github linkedin leetcode resume documents --- # Authentication JWT Access Token Refresh Token Password Hashing Protected Routes Admin Only Dashboard --- # Folder Structure Keep it simple. Do not create unnecessary folders. Do not over-engineer. Use routers services models schemas utils Only add folders when needed. --- # Development Rules Never generate incomplete code. Never write TODO. Never skip files. Always generate Folder structure File name Complete code Explanation Testing Instructions If a file changes later Regenerate the entire updated file. Do not provide only the modified portion. --- # Frontend Rules Every page must exactly match the provided UI references. Responsive Adaptive SEO Friendly Fast Loading Animations Reusable Components Dark Mode Ready Accessibility --- # Coding Standards TypeScript Python Type Hints Async Reusable Components Clean Architecture Repository Pattern where useful Service Layer Proper Validation Centralized Error Handling Logging Reusable Utilities No duplicated code. --- # Final Goal The finished project should look and behave like a premium SaaS application rather than a traditional portfolio. A recruiter should be able to: Browse projects Read blogs Chat with AI Download resume Contact me Upload a job description See compatibility score View GitHub activity View LeetCode activity View certifications Everything should be editable from the Admin Dashboard without changing the code.

Home
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

Portfolio-kiran

Introduction

Portfolio-kiran is an AI-powered developer platform designed to showcase and manage professional portfolios with advanced features such as AI chat, resume parsing, and dynamic content management. This document outlines the system requirements for the Portfolio-kiran project.

System Overview

Portfolio-kiran is a SaaS application that provides a comprehensive platform for developers to present their skills, projects, and experiences. It includes features such as AI-driven chat, resume parsing, and a dynamic admin dashboard for content management. The platform is designed to be responsive, adaptive, and professional, with a focus on clean and modern UI/UX.

Functional Requirements

  • As a User, I should be able to view a responsive and adaptive UI.
  • As an Admin, I should be able to upload resumes and have the system automatically extract and store data.
  • As a User, I should be able to interact with an AI chatbot that answers queries from the database in a structured format.
  • As an Admin, I should be able to manage content dynamically from the admin dashboard.
  • As a User, I should be able to browse projects, read blogs, and view certifications.
  • As a User, I should be able to download resumes and contact the admin.
  • As an Admin, I should be able to sync data with GitHub, LinkedIn, and LeetCode.
  • As a User, I should be able to search for content across the platform.
  • As an Admin, I should be able to view analytics on user interactions and content performance.
Page 2 of 4

User Personas

  • Admin: Manages the platform, uploads resumes, and oversees content and analytics.
  • User: Browses the portfolio, interacts with the AI chatbot, and accesses public content.

Core User Flows

  • Admin logs in -> uploads resume -> data is automatically extracted and stored -> manages content via dashboard.
  • User visits site -> interacts with AI chatbot -> browses projects and blogs -> downloads resume -> contacts admin.

Visuals Colors and Theme

  • primary: #1A73E8 (blue)
  • primary_light: #E8F0FE (light blue)
  • secondary: #34A853 (green)
  • accent: #FBBC05 (yellow)
  • highlight: #EA4335 (red)
  • bg: #FFFFFF (white)
  • surface: rgba(255, 255, 255, 0.8)
  • text: #202124 (dark gray)
  • text_muted: #5F6368 (light gray)
  • border: rgba(218, 220, 224, 0.2)
Page 3 of 4

Signature Design Concept

The homepage will feature an interactive 3D portfolio showcase using @react-three/fiber and @react-three/drei. Users can navigate through a virtual gallery of projects, each represented as a floating card. Hovering over a card will reveal project details, and clicking will expand the card into a full view with additional information. The design will incorporate smooth animations and transitions using framer-motion, creating an engaging and memorable user experience.

Interaction Model & Motion Direction

  • Landing/Home Page: Parallax interaction model with layered depth via scroll. Decorative elements will translate at different speeds, enhancing the storytelling aspect of the portfolio.
  • Internal Pages: Animated model with moderate scroll-triggered reveals and hover transitions, ensuring a polished and interactive experience.

Non-Functional Requirements

  • The platform must be highly responsive and adaptive across all devices.
  • The system should ensure data security and privacy, especially for user-uploaded resumes.
  • The application should be scalable to handle increasing user interactions and data.

Tech Stack

  • Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons, React Hook Form, TanStack Query, Zustand, Axios
  • Backend: FastAPI, Python 3.12+, Motor (MongoDB), JWT Authentication, Passlib, Pydantic v2, APScheduler, LangChain, ChromaDB, Loguru
  • Database: MongoDB Atlas
  • AI: LangChain, ChromaDB, Resume Parser, RAG, Document Loader, Chat History, Prompt Templates
  • Deployment: Docker, Docker Compose, Nginx, GitHub Actions
Page 4 of 4

Assumptions and Constraints

  • The platform will primarily target developers and recruiters.
  • The UI design must closely match the provided reference images.
  • All content should be dynamically fetched from the database.

Glossary

  • SaaS: Software as a Service
  • AI: Artificial Intelligence
  • JWT: JSON Web Token
  • CRUD: Create, Read, Update, Delete
  • RAG: Retrieval-Augmented Generation

This document provides a comprehensive overview of the requirements and design for the Portfolio-kiran project, ensuring a robust and engaging platform for users.

Home design preview
Login: Sign In
Dashboard: View Overview
Resume: Upload Resume
Resume: Review Extracted Data
Dashboard: Manage Content
Projects: Add Project
Blog: Create Post
Skills: Update Skills
Analytics: View Stats
Messages: Read Contact
Settings: Configure Platform
Dashboard: Sync GitHub
Dashboard: Sync LinkedIn