├── README.md
├── self intro.html
├── self intro.css
└── self intro.js
/README.md:
--------------------------------------------------------------------------------
1 | # Introvert
2 | self-intro-generator with voice-generator-pronounciation-checker
3 |
--------------------------------------------------------------------------------
/self intro.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Self-Introduction Generator
7 |
8 |
9 |
10 |
11 | Self-Introduction Generator
12 |
13 |
45 |
46 | Your Self-Introduction:
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/self intro.css:
--------------------------------------------------------------------------------
1 |
2 | body {
3 | font-family: 'Poppins', sans-serif;
4 | background: linear-gradient(135deg, #667eea, #764ba2);
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: center;
8 | align-items: center;
9 | height: 150vh;
10 | margin: 0;
11 | color: #fff;
12 | }
13 |
14 | h2 {
15 | font-size: 26px;
16 | text-transform: uppercase;
17 | margin-bottom: 20px;
18 | text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.4);
19 | }
20 |
21 | form {
22 | background: rgba(255, 255, 255, 0.15);
23 | backdrop-filter: blur(12px);
24 | padding: 20px;
25 | border-radius: 15px;
26 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
27 | text-align: center;
28 | width: 350px;
29 | transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
30 | }
31 |
32 | form:hover {
33 | transform: translateY(-10px);
34 | box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
35 | }
36 |
37 | input, textarea, select {
38 | width: 100%;
39 | padding: 10px;
40 | margin: 15px 0;
41 | border: darkmagenta;
42 | border-width: 1px;
43 | border-radius: 8px;
44 | font-size: 16px;
45 | background: rgba(255, 255, 255, 0.3);
46 | color: #000;
47 | }
48 |
49 | input:focus, textarea:focus, select:focus {
50 | background: rgba(255, 255, 255, 0.5);
51 | box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
52 | transform: scale(1.05);
53 | }
54 |
55 | button {
56 | background: #ff4081;
57 | color: white;
58 | border: none;
59 | padding: 12px 18px;
60 | margin-top: 10px;
61 | font-size: 18px;
62 | border-radius: 25px;
63 | cursor: pointer;
64 | transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
65 | }
66 |
67 | button:hover {
68 | background: #ff79a1;
69 | transform: scale(1.1) translateY(-5px);
70 | box-shadow: 0 10px 20px rgba(255, 64, 129, 0.4);
71 | }
72 |
73 | #output {
74 | margin-top: 15px;
75 | font-weight: bold;
76 | font-size: 18px;
77 | text-align: center;
78 | background: rgba(0, 0, 0, 0.3);
79 | padding: 12px;
80 | border-radius: 10px;
81 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
82 | transition: transform 0.3s ease-in-out;
83 | }
84 |
85 | #output:hover {
86 | transform: scale(1.05);
87 | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
88 | }
89 |
--------------------------------------------------------------------------------
/self intro.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", function () {
2 | const generateBtn = document.getElementById("generateBtn");
3 | const output = document.getElementById("output");
4 |
5 | generateBtn.addEventListener("click", generateIntroduction);
6 |
7 | function generateIntroduction() {
8 | const name = document.getElementById("name").value;
9 | const age = document.getElementById("age").value;
10 | const profession = document.getElementById("profession").value;
11 | const schooling = document.getElementById("schooling").value;
12 | const certifications = document.getElementById("certifications").value;
13 | const achievements = document.getElementById("achievements").value;
14 | const hobbies = document.getElementById("hobbies").value;
15 | const introType = document.getElementById("introType").value;
16 |
17 | let intro = "";
18 |
19 | if (introType === "casual") {
20 | intro = `Hey, I'm ${name}. I'm ${age} years old and work as a ${profession}. I studied at ${schooling}.
21 | I love ${hobbies} and have some experience in ${certifications}. One of my key achievements is ${achievements}.`;
22 | } else if (introType === "professional") {
23 | intro = `Hello, my name is ${name}. I am a ${profession} with ${age} years of experience. I graduated from ${schooling}
24 | and hold certifications in ${certifications}. My notable achievements include ${achievements}. In my free time, I enjoy ${hobbies}.`;
25 | } else if (introType === "academic") {
26 | intro = `Hi, I'm ${name}, a student from ${schooling}. I am ${age} years old and currently studying in the field of ${profession}.
27 | I have achieved ${achievements} and hold certifications in ${certifications}. My hobbies include ${hobbies}.`;
28 | } else if (introType === "social") {
29 | intro = `Hey everyone! I'm ${name}, a ${profession} who loves ${hobbies}. I studied at ${schooling} and hold certifications in ${certifications}.
30 | One of my biggest achievements is ${achievements}. Excited to connect with you all!`;
31 | }
32 |
33 | output.textContent = intro;
34 |
35 | speakText(intro);
36 | }
37 |
38 | function speakText(text) {
39 | let speech = new SpeechSynthesisUtterance(text);
40 | speech.lang = "en-US";
41 | speech.rate = 1;
42 | speech.pitch = 1;
43 | window.speechSynthesis.speak(speech);
44 | }
45 |
46 | function startSpeechRecognition() {
47 | let recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
48 | recognition.lang = "en-US";
49 | recognition.start();
50 |
51 | recognition.onresult = function (event) {
52 | let spokenText = event.results[0][0].transcript;
53 | compareText(output.textContent, spokenText);
54 | };
55 |
56 | recognition.onerror = function (event) {
57 | alert("Speech recognition error: " + event.error);
58 | };
59 | }
60 |
61 | function compareText(original, spoken) {
62 | if (original.toLowerCase().trim() === spoken.toLowerCase().trim()) {
63 | alert("Perfect match! You spoke correctly.");
64 | } else {
65 | alert("Mismatch detected. Here’s the correction:\n\n" +
66 | "Expected: " + original + "\n" +
67 | "You said: " + spoken);
68 | }
69 | }
70 | const voiceCheckBtn = document.createElement("button");
71 | voiceCheckBtn.textContent = "Check My Voice";
72 | voiceCheckBtn.style.marginTop = "10px";
73 | voiceCheckBtn.onclick = startSpeechRecognition;
74 | document.body.appendChild(voiceCheckBtn);
75 | });
76 |
--------------------------------------------------------------------------------