diff --git a/Public/Terminal-Portfolio/index.html b/Public/Terminal-Portfolio/index.html new file mode 100644 index 00000000..ec6c0d9a --- /dev/null +++ b/Public/Terminal-Portfolio/index.html @@ -0,0 +1,31 @@ + + + + + + + Terminal Portfolio + + + + +
+
+
+
+
Terminal Portfolio
+
+
+ $ + +
+
+
+
+ Built by ArjunCodess +
+
+ + + + \ No newline at end of file diff --git a/Public/Terminal-Portfolio/script.js b/Public/Terminal-Portfolio/script.js new file mode 100644 index 00000000..83431d64 --- /dev/null +++ b/Public/Terminal-Portfolio/script.js @@ -0,0 +1,195 @@ +const portfolioInfo = { + name: "John Doe", + personalBrand: 'CodeMaster', + title: "Full Stack Developer", + about: "I'm a passionate full-stack developer with a love for creating innovative web applications and solving complex problems.", + summary: "I'm John Doe, a full-stack developer with experience in building robust web applications. I enjoy working with modern technologies and frameworks to create efficient and scalable solutions. I'm always eager to learn new skills and take on challenging projects.", + skills: [ + "JavaScript", "React.js", "Node.js", "Express.js", "MongoDB", "SQL", + "Python", "Django", "HTML5", "CSS3", "Git", "Docker", + "AWS", "RESTful APIs", "GraphQL" + ], + experience: [ + { + company: "Tech Innovations Inc.", + position: "Senior Full Stack Developer", + duration: "2018 - Present", + description: "Lead development of complex web applications, mentored junior developers, and implemented best practices for code quality and performance optimization." + }, + { + company: "WebSolutions Co.", + position: "Full Stack Developer", + duration: "2015 - 2018", + description: "Developed and maintained various client projects, collaborated with cross-functional teams, and contributed to the company's internal tools and frameworks." + } + ], + education: [ + { + school: "University of Technology", + degree: "Bachelor of Science in Computer Science", + duration: "2011 - 2015" + } + ], + contact: "email: john.doe@example.com | tel: +1 (555) 123-4567", + certificates: { + webDevelopment: [ + "Advanced Web Development Bootcamp", + "React and Redux Masterclass", + "Node.js Advanced Concepts" + ], + cloudComputing: [ + "AWS Certified Solutions Architect", + "Google Cloud Professional Developer", + "Azure Fundamentals" + ] + } +}; + +const asciiBanner = ` +█▀▀ █▀█ █▀▄ █▀▀ █▀▄▀█ ▄▀█ █▀ ▀█▀ █▀▀ █▀█ +█▄▄ █▄█ █▄▀ ██▄ █░▀░█ █▀█ ▄█ ░█░ ██▄ █▀▄ +`; + +let commandHistory = []; + +const terminalOutput = document.getElementById('terminal-output'); +const commandInput = document.getElementById('command-input'); + +function initializeTerminal() { + commandHistory = [ + centerASCII(asciiBanner), + "Type 'help' for available commands.", + ]; + updateTerminal(); +} + +function centerASCII(art) { + const lines = art.split('\n'); + const maxLength = Math.max(...lines.map(line => line.length)); + return lines.map(line => line.padStart(line.length + Math.floor((maxLength - line.length) / 2)).padEnd(maxLength)).join('\n'); +} + +function updateTerminal() { + terminalOutput.innerHTML = commandHistory.map(line => + `${line}` + ).join(''); + terminalOutput.scrollTop = terminalOutput.scrollHeight; +} + +function executeCommand(command) { + const [cmd, ...args] = command.trim().split(" "); + let output = ""; + + switch (cmd.toLowerCase()) { + case "about": + output = getAboutInfo(); + break; + case "skills": + output = getSkillsInfo(); + break; + case "experience": + output = getExperienceInfo(); + break; + case "education": + output = getEducationInfo(); + break; + case "contact": + output = getContactInfo(); + break; + case "clear": + clearTerminal(); + return; + case "help": + output = getHelpInfo(); + break; + case "certificates": + output = getCertificatesInfo(); + break; + default: + output = `Command not recognized: ${cmd}. Type 'help' for available commands.`; + } + + commandHistory.push(`$ ${command}`, output, ""); + updateTerminal(); +} + +function getAboutInfo() { + return `Name: ${portfolioInfo.name}\nPersonal Brand: ${portfolioInfo.personalBrand}\nTitle: ${portfolioInfo.title}\n\n${portfolioInfo.about}\n\n${portfolioInfo.summary}`; +} + +function getSkillsInfo() { + return portfolioInfo.skills.join(", "); +} + +function getExperienceInfo() { + return "Professional Experience:\n\n" + portfolioInfo.experience.map(exp => + `${exp.position} (${exp.duration})\n${exp.company}\n${exp.description}\n` + ).join("\n"); +} + +function getEducationInfo() { + return portfolioInfo.education.map(edu => `${edu.degree}\n${edu.school}\n${edu.duration}\n`).join("\n"); +} + +function getContactInfo() { + return portfolioInfo.contact; +} + +function getCertificatesInfo() { + let output = ""; + output += "Web Development:\n" + portfolioInfo.certificates.webDevelopment.map(cert => `- ${cert}`).join('\n') + "\n\n"; + output += "Cloud Computing:\n" + portfolioInfo.certificates.cloudComputing.map(cert => `- ${cert}`).join('\n'); + return output; +} + +function getHelpInfo() { + return "Available commands:\n\n" + + "about - Display personal information\n" + + "skills - List technical skills\n" + + "experience - Show work experience\n" + + "education - Display educational background\n" + + "certificates - Display CS50 and freeCodeCamp certificates\n" + + "contact - Show contact information\n" + + "clear - Clear the terminal\n" + + "help - Show this help message"; +} + +function clearTerminal() { + commandHistory = [ + centerASCII(asciiBanner), + "Terminal cleared. Type 'help' for available commands.", + ]; + updateTerminal(); +} + +function handleUserInput(e) { + if (e.key === "Enter" && commandInput.value.trim()) { + executeCommand(commandInput.value); + commandInput.value = ""; + } +} + +function generateStars(count) { + const starsContainer = document.getElementById('stars-container'); + for (let i = 0; i < count; i++) { + const star = document.createElement('div'); + star.className = 'star'; + star.style.top = `${Math.random() * 100}%`; + star.style.left = `${Math.random() * 100}%`; + const size = `${Math.random() * 3 + 1}px`; + star.style.width = size; + star.style.height = size; + star.style.opacity = Math.random() * 0.7 + 0.3; + star.style.animation = `twinkle ${Math.random() * 5 + 3}s linear infinite`; + star.style.animationDelay = `${Math.random() * 5}s`; + starsContainer.appendChild(star); + } +} + +function init() { + commandInput.addEventListener('keydown', handleUserInput); + generateStars(200); + initializeTerminal(); +} + +init(); \ No newline at end of file diff --git a/Public/Terminal-Portfolio/style.css b/Public/Terminal-Portfolio/style.css new file mode 100644 index 00000000..ef1c7872 --- /dev/null +++ b/Public/Terminal-Portfolio/style.css @@ -0,0 +1,182 @@ +body, +html { + margin: 0; + padding: 0; + height: 100%; + background-color: #2c2c2c; + overflow: hidden; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 1rem; + box-sizing: border-box; +} + +.terminal-container { + width: 100%; + max-width: 1080px; + z-index: 10; +} + +.terminal { + background-color: #1e1e1e; + border-radius: 12px; + padding: 24px; + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); +} + +.terminal-header { + text-align: center; + font-size: 1.5rem; + font-weight: bold; + color: #4ade80; + margin-bottom: 1.2rem; +} + +.terminal-output { + height: 480px; + overflow-y: auto; + background-color: #000; + color: #4ade80; + padding: 1.2rem; + white-space: pre-wrap; + font-size: 1rem; + margin-bottom: 1.2rem; + border-radius: 6px; +} + +.terminal-input { + display: flex; + align-items: center; + background-color: #000; + padding: 0.75rem; + border-radius: 7px; +} + +.prompt { + color: #4ade80; + margin-right: 0.75rem; + font-size: 1.125rem; +} + +#command-input { + flex-grow: 1; + background-color: transparent; + color: #4ade80; + border: none; + font-family: inherit; + font-size: 1.125rem; +} + +#command-input:focus { + outline: none; +} + +/* Scrollbar Styling */ +.terminal-output::-webkit-scrollbar { + width: 12px; +} + +.terminal-output::-webkit-scrollbar-track { + background: #1a202c; +} + +.terminal-output::-webkit-scrollbar-thumb { + background-color: #4ade80; + border-radius: 6px; +} + +/* Responsive adjustments */ +@media (max-width: 1200px) { + .terminal-container { + width: 80%; + } +} + +@media (max-width: 992px) { + .terminal-container { + width: 90%; + } + + .terminal-header { + font-size: 1.3rem; + } + + .terminal-output { + height: 400px; + } +} + +@media (max-width: 768px) { + .terminal-container { + width: 95%; + } + + .terminal { + padding: 16px; + } + + .terminal-header { + font-size: 1.2rem; + } + + .terminal-output { + height: 350px; + font-size: 0.9rem; + } + + .prompt, + #command-input { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .terminal-container { + width: 100%; + } + + .terminal { + padding: 12px; + border-radius: 8px; + } + + .terminal-header { + font-size: 1.1rem; + } + + .terminal-output { + height: 300px; + font-size: 0.8rem; + } + + .prompt, + #command-input { + font-size: 0.9rem; + } +} + +.credit { + position: fixed; + bottom: 10px; + right: 10px; + font-size: 0.8rem; + color: #4ade80; + text-align: right; + z-index: 100; +} + +.credit a { + color: #4ade80; + text-decoration: none; + font-weight: bold; +} + +.credit a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/README.md b/README.md index d092bd7e..ff5d6460 100644 --- a/README.md +++ b/README.md @@ -265,7 +265,7 @@ git push -u origin | 169. | [Tearable Cloth](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/tearable-cloth.html)| 170. | [Rain Effects](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/RainEffects.html)| 171. | [Camera Web App](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/camera_app.html) | 172. | [Dynamic Picture Frame](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/picture-frame.html)| 173. | [FAQ Collapse](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/FAQcollapse.html)| 174. | [Multiplication Table Generator](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/multiplication-table-generator.html) | 175. | [Expense Tracker Calculator](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/trackerExpense/index.html)| 176. | [Check my IP](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/check-my-ip/check-my-ip.html) | 177. | [SocialTray](https://rococo-praline-28f4e4.netlify.app/) -| 178. | [SimplyRecipes](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/SimplyRecipes/) | 179. | [Employee DataBase](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/employeeDatabase.html) +| 178. | [SimplyRecipes](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/SimplyRecipes/) | 179. | [Employee DataBase](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/employeeDatabase.html) | 180. | [Terminal Portfolio](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/Terminal-Portfolio/index.html) |
diff --git a/assets/Images/Terminal-Portfolio/terminal-portfolio.png b/assets/Images/Terminal-Portfolio/terminal-portfolio.png new file mode 100644 index 00000000..d2701235 Binary files /dev/null and b/assets/Images/Terminal-Portfolio/terminal-portfolio.png differ diff --git a/cards.json b/cards.json index 5993d0d5..5afc4845 100644 --- a/cards.json +++ b/cards.json @@ -48,7 +48,6 @@ "name": "Birthday_card", "image": "assets/Images/birthday_card.png", "link": "Public/Birthday_card.html" - }, { "name": "BMI Calculator", @@ -100,7 +99,6 @@ "image": "assets/Images/Candy Store/cover1.jpg", "link": "Public/Candy Store/index.html" }, - { "name": "Car Race", "image": "assets/Images/car.jpg", @@ -147,9 +145,9 @@ "link": "Public/connectfour.html" }, { - "name":"Color Game", - "image": "assets/Images/color-game.png" , - "link":"Public/color-game.html" + "name": "Color Game", + "image": "assets/Images/color-game.png", + "link": "Public/color-game.html" }, { "name": "Confirm Password Validator", @@ -247,9 +245,9 @@ "link": "Public/EmailValidator.html" }, { - "name": "Employee database management", - "image": "assets/Images/employeeDatabase.png", - "link": "Public/employeeDatabase.html" + "name": "Employee database management", + "image": "assets/Images/employeeDatabase.png", + "link": "Public/employeeDatabase.html" }, { "name": "Expanding Cards UI design", @@ -291,7 +289,7 @@ "image": "assets/Images/food-filter/sweets-1.jpeg", "link": "Public/food-filter.html" }, - { + { "name": "Food Master", "image": "assets/Images/Food Master.png", "link": "Public/Foodmaster.html" @@ -339,7 +337,7 @@ { "name": "Grocery Manager", "image": "assets/Images/grocerymanager.png", - "link": "Public/grocerymanager.html" + "link": "Public/grocerymanager.html" }, { "name": "Guess Color", @@ -517,9 +515,9 @@ "link": "Public/placeholder.html" }, { - "name":"Picture Frame", - "image":"assets/Images/picture-frame.jpg", - "link":"Public/picture-frame.html" + "name": "Picture Frame", + "image": "assets/Images/picture-frame.jpg", + "link": "Public/picture-frame.html" }, { "name": "Pong", @@ -644,7 +642,7 @@ { "name": "SimplyRecipes", "image": "assets/Images/SimplyRecipes/assets/main.jpeg", - "link" : "Public/SimplyRecipes" + "link": "Public/SimplyRecipes" }, { "name": "Snake", @@ -791,7 +789,7 @@ "image": "assets/Images/trackerExpense/logo51-removebg-preview.png", "link": "Public/trackerExpense/index.html" }, - { + { "name": "Tourist Website", "image": "assets/Images/Skardu.jpg", "link": "Public/Tourist_Website/index.html" @@ -865,7 +863,10 @@ "name": "YouTube Clone", "image": "assets/Images/YouTubeClone/YouTubeClone.png", "link": "Public/YouTube_Clone/index.html" + }, + { + "name": "Terminal Portfolio", + "image": "assets/Images/Terminal-Portfolio/terminal-portfolio.png", + "link": "Public/Terminal-Portfolio/index.html" } - -] - +] \ No newline at end of file