on the image is single candidate page. On the right side has AI analisys, education, experience year, job history. On the left side has resume pdf viewer and skills. Lets do redisign. I am also adding video upload. Candidate will uoload video upload in the apply page. And we must show it on the single candidate page with image infos. video will be analisysing and give summary and scores. Lets give me modern, minimalistic and undersatndable UI. this is video analisys's response:
{
"en": {
"summary": [
"The candidate presented their experience confidently and concisely.",
"Demonstrated strong communication and a good command of vocabulary.",
"Showed signs of self-motivation and adaptability to team environments."
],
"core_criteria": [
{
"name": "Communication Clarity",
"score": 9,
"explanation": "The candidate spoke fluently, clearly, and maintained consistent pacing."
},
{
"name": "Confidence & Tone",
"score": 8,
"explanation": "Tone was energetic and self-assured without sounding rehearsed."
},
{
"name": "Language Proficiency",
"score": 8,
"explanation": "Used precise vocabulary and correct grammar throughout the video."
},
{
"name": "Content Quality",
"score": 7,
"explanation": "The response was structured well, with clear and relevant points."
},
{
"name": "Non-verbal Cues",
"score": 6,
"explanation": "Maintained eye contact and neutral expressions, but gestures were minimal."
}
],
"advanced_criteria": [
{
"name": "Technical Knowledge",
"score": 7,
"explanation": "Mentioned relevant technologies and tools with a good understanding."
},
{
"name": "Analytical Thinking",
"score": 7,
"explanation": "Presented ideas logically, showing clear thought progression."
},
{
"name": "Team Compatibility",
"score": 8,
"explanation": "Expressed openness to collaboration and shared responsibility."
},
{
"name": "Learning Agility",
"score": 9,
"explanation": "Demonstrated curiosity and discussed previous learning experiences."
},
{
"name": "Proactivity",
"score": 8,
"explanation": "Took initiative in past roles and expressed eagerness to contribute."
},
{
"name": "Leadership Traits",
"score": 6,
"explanation": "Some leadership qualities evident, but not deeply emphasized."
},
{
"name": "Cultural Fit",
"score": 8,
"explanation": "Values and communication style appear aligned with company culture."
},
{
"name": "Time Management",
"score": 7,
"explanation": "Talked about prioritizing tasks and meeting deadlines effectively."
},
{"name": "Creative Thinking",
"score": 6,
"explanation": "Some innovation in answers, though room for more unique insights."
},
{
"name": "Emotional Intelligence",
"score": 8,
"explanation": "Showed empathy and awareness of social dynamics in teams."
}
]
},
"ru": {
"summary": ["...", "..."],
"core_criteria": [
{
"name": "...",
"score": ...,
"explanation": "..."
}
// ...
],
"advanced_criteria": [
{
"name": "...",
"score": ...,
"explanation": "..."
}
// ...
]
},
"uz": {
"summary": ["...", "..."],
"core_criteria": [
{
"name": "...",
"score": ...,
"explanation": "..."
}
// ...
],
"advanced_criteria": [
{
"name": "...",
"score": ...,
"explanation": "..."
}
// ...
]
}
}
I'll create a modern, minimalistic redesign of the candidate profile page that incorporates the video analysis feature. The design will be clean and organized with clear sections for all the information.
I've created a modern, minimalistic redesign of the candidate profile page with the following key features:
Key Features:
- Clean Header Section: Displays candidate avatar, name, and contact information prominently
- Video Interview Section: Large video player with controls for the candidate's video interview
AI Video Analysis:
- Overall score display with visual indicators
- Summary points from the analysis
- Detailed breakdown with tabs for Core Skills and Advanced criteria
- Progress bars and color-coded scores for easy understanding
- Resume Viewer: Placeholder for PDF viewer with download functionality
- Skills Section: Clean badge layout for technical skills
- Resume Analysis: Separate AI analysis for the resume with match percentage
- Education & Experience: Well-organized cards with clear information hierarchy
Design Principles:
- Minimalistic: Clean white cards with subtle shadows and proper spacing
- Modern: Uses contemporary UI patterns with tabs, progress bars, and badges
- Understandable: Clear visual hierarchy with icons and color coding
- Responsive: Grid layout that adapts to different screen sizes
- Accessible: Proper contrast ratios and semantic HTML structure
The video analysis data is integrated seamlessly with visual score indicators, explanations, and an overall assessment that makes it easy for recruiters to quickly understand candidate performance.
Build a responsive web component using BreadcrumbEllipsis or similar tab/navigation component. This will serve as a section switcher between:
Resume – Show parsed or PDF resume with analitics.
Video – Candidate’s intro or interview video with analitics.
Questions – AI-powered Q&A section (detailed below).
The entire component should be user-friendly and suitable for recruiter use (quick insights, minimal clicks, good alignment, and layout spacing).
🧠 Detailed Breakdown:
🧭 Top-Level Layout:
Use BreadcrumbEllipsis or Tab component to toggle between three sections:
Resume
Video
Questions
📄 Resume Tab:
Show resume preview (either embedded PDF viewer or structured parsed data).
Clean spacing and scroll if content overflows.
🎥 Video Tab:
Modern + Minimal UX. Each question block includes:
Question tab:
Questions title
Candidate’s audio answer
Playable audio (audio waveform or simple player).
STT transcription (Uzbek or multilingual support).
Analytics:
Sentiment (Positive / Neutral / Negative)
Fluency score (0–100)
Answer length/time
Custom scoring tags (e.g., "Confident", "Relevant", etc.). belove example for resume and video. Lets do question part yourself and do your best:
{
"candidate_uuid": "15c70263-4ad4-4b2b-9cfe-701464b4639c",
"first_name": "azizbek",
"last_name": "shokirov",
"email": "azizbekshokirov.per@gmail.com",
"resume_url": "https://topkadr.uz/media/resumes/CV_HMwR3F0.pdf",
"video_url": "https://topkadr.uz/media/videos/video_I6WXh0a.mp4",
"phone_number": "123456789",
"experience": 0,
"telegram_url": "https://t.me/azizbek_shokirov",
"portfolio_url": "https://t.me/azizbekshokriov.github.io",
"github_url": "https://github.com/AzizbekShokirov",
"skills": [
"Python",
"Django",
"Django Rest Framework",
"PostgreSQL",
"Celery",
"Redis",
"JWT",
"Google Gemini sun'iy intellekti",
"AWS",
"Docker",
"Git",
"Linux",
"JavaScript",
"HTML",
"CSS",
"Bootstrap",
"Tailwind",
"MySQL",
"SQLite",
"RESTful API",
"Mikroservislar (loyihalar tavsifidan kelib chiqib)",
"Ma'lumotlar bazasini loyihalash"
],
"education": [
{
"year": 2025,
"degree": "Dasturiy ta'minot muhandisligi bo'yicha bakalavr",
"institution": "Millat Umidi universiteti"
}
],
"resume_analysis": {
"resume_uuid": "0a4fc4d4-615e-406a-951e-3f15b44da0dc",
"rating_percentage": 85,
"rating_category": "High",
"analysis": {
"job_history": [],
"skills_relevance": "Nomzod vakansiya talablariga juda mos keladigan kuchli ko'nikmalarga ega. Python, Django va tegishli freymvorklarni bilishi juda yaxshi. Ma'lumotlar bazalari (PostgreSQL, MySQL, SQLite) va DevOps vositalari (Git, Docker) bilan ishlash tajribasi ham muhim aktivlar hisoblanadi. Google Gemini sun'iy intellekti bilan integratsiya tajribasi qimmatli qo'shimcha hisoblanadi.",
"education_relevance": "Nomzodning Millat Umidi universitetidagi dasturiy ta'minot muhandisligi bo'yicha bakalavr darajasi Backend Developer lavozimiga juda mos keladi.",
"salary_expectations": "Rezyumeda ko'rsatilmagan.",
"experience_relevance": "Nomzodda rasmiy ish tajribasi bo'lmasa-da, ko'rsatilgan loyihalar ko'nikmalarning amaliy qo'llanilishini va backendni ishlab chiqish tamoyillarini yaxshi tushunishini ko'rsatadi. Buni kirish darajasidagi tajribaga teng deb hisoblash mumkin.",
"qualifications_relevance": "Umuman olganda, nomzodning malakasi lavozim talablariga juda mos keladi. Ta'lim, loyihalar va ko'nikmalar birlashmasi uni kuchli da'vogar qiladi. Rasmiy ish tajribasining yo'qligi ko'rsatilgan ko'nikmalar va loyihalarning murakkabligi bilan qoplanadi.",
"current_employment_status": "Ehtimol, hozirda o'qiyapti va faol ravishda ish qidiryapti."
},
"summary": "Azizbek Shokirov Backend Developer lavozimi uchun kuchli nomzoddir. Rasmiy ish tajribasining yo'qligiga qaramay, uning akademik tayyorgarligi va ta'sirchan shaxsiy loyihalari uning kuchli texnik ko'nikmalarini ko'rsatib, uni istiqbolli nomzod qiladi. Python, Django va tegishli texnologiyalarni bilishi vakansiya talablariga mukammal mos keladi.",
"created_at": "2025-06-04T15:10:59"
},
"video_analysis": {
"summary": [
"Nomzod yaxshi muloqot ko'nikmalari va ishonchni namoyish etadi, lekin backend dasturchisi lavozimiga tegishli texnik ko'nikmalar bo'yicha aniq ma'lumotlarni keltirmaydi.",
"Uning ishtiyoqi yaqqol ko'rinadi, ammo uning tajribasi va ish talablari o'rtasidagi bog'liqlikni yanada aniqlashtirish kerak.",
"U tegishli texnologiyalarni eslatib o'tsa-da, uning amaliy tajribasini chuqurroq tahlil qilish zarur."
],
"core_criteria": [
{
"name": "Muloqot ravshanligi",
"score": 8,
"explanation": "Nutq tushunarli va oson tushuniladi. Talaffuzi yaxshi."
},
{
"name": "Ishonch va ohang",
"score": 7,
"explanation": "Nomzod o'zini ishonchli va g'ayratli his qiladi, lekin yanada professional ohangdan foydalanishi mumkin."
},
{
"name": "Tilga egalik darajasi",
"score": 8,
"explanation": "Yaxshi lug'at va grammatika. Suyuqligi yuqori."
},
{
"name": "Kontent sifati",
"score": 5,
"explanation": "Kontent tegishli bo'lsa-da, unda texnik ko'nikmalar va tajriba bo'yicha aniq misollar yo'q. Loyihalar va yutuqlar haqida batafsil ma'lumot kerak."
},
{
"name": "Noverbal ko'rinishlar",
"score": 7,
"explanation": "Yaxshi ko'z aloqasini saqlaydi. Tana tili bo'shashgan va professional."
}
],
"overall_score": 6,
"advanced_criteria": [
{
"name": "Texnik bilimlar",
"score": 4,
"explanation": "C++, Python va Google Cloud Platformni eslatadi, lekin backend dasturlashda ushbu texnologiyalarni egallash va amaliy qo'llash bo'yicha tafsilotlarni keltirmaydi. RESTful API, mikroservislar yoki ma'lumotlar bazasi bilan ishlash tajribasi haqida hech narsa aytilmagan."
},
{
"name": "Vaqtni boshqarish",
"score": 6,
"explanation": "Videoda bevosita baholanmaydi."
},
{
"name": "Tahliliy va ijodiy fikrlash",
"score": 6,
"explanation": "Videoda bevosita baholanmaydi. Muammolarni hal qilish qobiliyati namoyish etilmagan."
},
{
"name": "Jamoada ishlash mosligi",
"score": 7,
"explanation": "Jamoada ishlashni eslatadi, lekin aniq misollar keltirilmaydi."
},
{
"name": "O'rganish tezligi",
"score": 8,
"explanation": "U o'zini qiziquvchan talaba sifatida taqdim etadi, lekin amaliy namoyish yo'q."
},
{
"name": "Oldini olish",
"score": 6,
"explanation": "Videoda bevosita baholanmaydi."
},
{
"name": "Rahbariyat fazilatlari",
"score": 5,
"explanation": "Videoda bevosita baholanmaydi. O'zini ishonchli his qilsa-da, rahbarlik fazilatlari sezilib turmaydi."
},
{
"name": "Madaniy moslik",
"score": 7,
"explanation": "Bevosita baholanmaydi, lekin uning muloqot uslubi hamkorlikdagi ish muhitiga mos keladi."
}
]
},
"candidate_status": "applied",
"created_at": "2025-06-04T15:10:44"
}
I'll create a comprehensive responsive component with tab navigation for the three sections. This will be perfect for recruiters to quickly assess candidates.
I've created a comprehensive, responsive candidate assessment component with three main sections:
Key Features:
Resume Tab
- AI Analysis Card: Shows 85% match score with detailed insights
- Skills Display: Clean badge layout for technical skills
- Education Section: Academic background information
- Resume Preview: Placeholder with download functionality
- Key Insights: Detailed analysis breakdown
Video Tab
- Video Player: Full-featured HTML5 video player
- AI Analysis: Overall score with summary points
- Core Criteria: Progress bars with scores and explanations
- Advanced Criteria: Scrollable detailed assessment
- Color-coded Scoring: Green/Yellow/Red based on performance
Questions Tab
- Interactive Audio Players: Play/pause with progress bars
- Speech-to-Text Transcription: Full candidate responses
Comprehensive Analytics:
- Sentiment analysis with icons
- Fluency and relevance scores
- Confidence level indicators
- Answer duration tracking
- Key trait tags
Design Highlights:
- Modern Tab Navigation: Clean, accessible tab switching
- Responsive Grid Layout: Adapts to different screen sizes
- Professional Color Scheme: Blue/Green/Gray palette
- Consistent Spacing: Proper padding and margins throughout
- Visual Hierarchy: Clear information organization
- Interactive Elements: Hover states and smooth transitions
Recruiter-Friendly Features:
- Quick Insights: Key metrics prominently displayed
- Minimal Clicks: Everything accessible within tabs
- Visual Scoring: Progress bars and color coding
- External Links: Direct access to GitHub, portfolio, etc.
- Downloadable Content: Resume and contact information
- Comprehensive Analysis: Both AI and manual assessment tools
The component is perfect for recruiters who need to quickly assess candidates across multiple dimensions while maintaining a professional, easy-to-use interface.
Lets fix some problems. first is remove circle image from candidate, because candidate will not be image and also position(backend developer). Lets show years of experience more watchable. Add phone number. Lets change postion of skills and education to the left side with Key Insights. Show the Job history after Key Insights. this is the json data for these:
"job_history": [
{
"company": "Opticom",
"duration": "2022-yil iyul - oktyabr",
"position": "Flutter stajyor",
"achievements": [],
"responsibilities": [
"Optimedia mobil ilovasini ishlab chiqdi"
],
"career_progression": "Bu Flutter dasturini ishlab chiqishga yo'naltirilgan kirish darajasi lavozimi edi.",
"reason_for_leaving": "Ma'lum emas"
},
{
"company": "Google Developers Students Club (GDSC)",
"duration": "2022-yil avgust - 2023-yil avgust",
"position": "Rahbar",
"achievements": [],
"responsibilities": [
"Oflayn IT tadbirlari va seminarlarni tashkil qildi",
"Tashkiliy vazifalarni topshirdi",
"Ijtimoiy tarmoqlarda tadbirlarni targ'ib qildi"
],
"career_progression": "Rahbarlik va tashkiliy ko'nikmalarni namoyish etadi.",
"reason_for_leaving": "Muddat tugashi/ko'ngillilik roli"
},
{
"company": "CIC maktabi",
"duration": "2022-yil sentyabr - oktyabr",
"position": "IT menejer",
"achievements": [],
"responsibilities": [
"Veb-saytning ishlashini tekshirdi va xatolarni tuzatdi",
"Maktab kompyuterlarining dasturiy ta'minot muammolarini hal qildi",
"O'qituvchilar va o'quvchilar uchun Khan Academy profillarini yaratdi"
],
"career_progression": "IT-yordam va muammolarni hal qilish ko'nikmalarini namoyish etadi.",
"reason_for_leaving": "Muddat tugashi/shartnoma"
},
{
"company": "GDSC Markaziy Osiyo",
"duration": "2023-yil iyun - avgust",
"position": "Kontent yaratuvchi",
"achievements": [],
"responsibilities": [
"Instagram va YouTube uchun kontent yaratdi"
],
"career_progression": "Kontent yaratish ko'nikmalarini namoyish etadi.",
"reason_for_leaving": "Muddat tugashi/ko'ngillilik roli"
},
{
"company": "TEDx Kembrij Xalqaro Universiteti",
"duration": "2023-yil fevral - hozirgi kungacha",
"position": "TEDx tashkilotchisi",
"achievements": [],
"responsibilities": [
"TEDx tadbirlarini rejalashtirdi va tashkil qildi",
"Spikerlarni jalb qildi",
"Tadbir byudjetini boshqardi",
"Tadbirni targ'ib qildi"
],
"career_progression": "Tadbirlarni boshqarish va tashkiliy ko'nikmalarini ko'rsatadi.",
"reason_for_leaving": "Davom etmoqda"
}
],
"skills_relevance": "Nomzod Flutter dasturini ishlab chiqish bo'yicha ba'zi tegishli ko'nikmalarga ega, ammo holatni boshqarish va sinov kabi asosiy sohalardagi tajriba chuqurligi yanada aniqlashtirishni talab qiladi. Bekend xizmatlari bilan tajriba tilga olinadi, ammo tafsilotlar yetishmaydi.",
"education_relevance": "Nomzod hozirda bakalavr darajasini o'qiyotgan bo'lib, bu tegishli, lekin dasturiy ta'minot ishlab chiqish bo'yicha keng ixtisoslashgan bilimlarni ta'minlamaydi.",
"salary_expectations": "Ko'rsatilmagan",
"experience_relevance": "Nomzod bir yildan kam to'g'ridan-to'g'ri professional Flutter dasturini ishlab chiqish tajribasiga ega, asosan amaliyotlar orqali. Boshqa rollar kuchli tashkiliy va rahbarlik ko'nikmalarini namoyish etadi, ammo Flutter dasturini ishlab chiqish bilan bevosita bog'liq emas.",
"qualifications_relevance": "Nomzodning malakasi qisman tegishli. O'rta darajadagi lavozim talablariga javob berish uchun Flutter bo'yicha qo'shimcha amaliy tajribaga oid dalillar kerak.",
"current_employment_status": "Hozirda bir necha ko'ngilli va tashkiliy rollarda ishtirok etmoqda, asosan tadbirlarni boshqarishga yo'naltirilgan."
},
Lets change Core Criteria and Advanced Criteria belove the video player in the video section.
In the questions section, lets add explenation each answers rating using resume parsing data and vacancy requirments. And do all page responsive to mobile and tabs