Vaibhav-s-portfolio/interview.html at main · Vaibhav75058/Vaibhav-s-portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Mock Interview Practice Platform</title>
  <link rel="shortcut icon" href="logo.png" type="image/x-icon">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background-image: linear-gradient(to right, #d4e0ff, #c2f7d0);
      color: #333;
    }
    .container {
      width: 90%;
      max-width: 1000px;
      margin: auto;
      padding: 20px;
    }
    .container p {
      font-size: 22px;
    }
    ul li {
      font-size: 20px;
    }
    h1, h2 {
      color: #222;
    }

    .screenshots {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 20px 0;
      align-items: center;
    }

    .screenshots img {
      width: 1000px;
      border-radius: 18px;
      box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
    }

    .btn {
      display: inline-block;
      padding: 12px 24px;
      background: linear-gradient(90deg, #6a5acd, #00c6ff);
      color: #fff;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      transition: 0.3s;
    }
    .btn:hover {
      transform: scale(1.05);
      background: linear-gradient(90deg, #00c6ff, #6a5acd);
    }

    .back-btn button {
      padding: 10px 20px;
      background: #444;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 20px;
      transition: 0.3s;
    }
    .back-btn button:hover {
      background: #222;
    }

  </style>
</head>
<body>

  <div class="container">

    <h1>🎤 AI Mock Interview Practice Platform – Overview</h1>

    <a class="back-btn" href="index.html"><button>Back</button></a>

    <h2>🔹 About the Project</h2>
    <p>
      The <strong>AI Mock Interview Practice Platform</strong> is a smart web application
      designed to help users prepare for real interviews. It uses
      <strong>AI-based speech analysis, face detection, real-time evaluation,
      and automated feedback</strong> to simulate an actual interview environment.
    </p>
    <p>
      This project highlights my skills in <strong>React.js, Node.js, AI APIs,
      speech-to-text processing, and real-time user interaction</strong>.
    </p>

    <h2>🔹 Key Features</h2>
    <ul>
      <li>🎙️ Voice-based Q/A interaction (Speech-to-Text powered)</li>
      <li>🧠 AI-generated interview questions (HR + Technical)</li>
      <li>📝 Real-time answer analysis: clarity, fluency, confidence</li>
      <li>👁️ Face detection & attention monitoring</li>
      <li>💬 Auto-feedback and performance scoring</li>
      <li>📊 Result summary with suggestions for improvement</li>
      <li>🔁 Unlimited practice sessions</li>
    </ul>

    <h2>🔹 Tech Stack Used</h2>
    <ul>
      <li><strong>Frontend:</strong> React.js</li>
      <li><strong>Backend:</strong> Node.js + Express.js</li>
      <li><strong>AI:</strong> Speech-to-Text API, face-api.js</li>
      <li><strong>Video & Audio:</strong> WebRTC</li>
    </ul>

    <h2>🔹 Project Screenshots</h2>
    <div class="screenshots">
      <img src="interviewdashboard.png" alt="Mock Interview Homepage"><br>
      <img src="agent .png" alt="Real-Time Speech Analysis"><br>
      <img src="compani.png" alt="Interview Result Page">
    </div>

    <h2>🔹 Future Improvements</h2>
    <ul>
      <li>🤖 AI avatar for asking live interview questions</li>
      <li>📈 Advanced analytics dashboard for performance tracking</li>
      <li>📱 Mobile app version (React Native)</li>
      <li>🌐 Multi-language interview support</li>
    </ul>

    <div>
      <a href="https://github.com/YourGitHub/mock-interview-platform"
         target="_blank" class="btn">
        🔗 View Source Code
      </a>
    </div>

  </div>

</body>
</html>