-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (112 loc) · 4.18 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navneet.sh</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
body {
background-color: #000;
color: #0f0;
font-family: 'Ubuntu Mono', monospace;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h3 {
color: #f07178;
margin-bottom: 14px;
align-self: flex-start;
margin-left: 5%;
}
#terminal {
width: 90%;
height: 65%;
border: 4px solid #f07178;
padding: 10px;
overflow-y: auto;
background-color: #2c001e;
color: #ffffff;
}
#input-line {
display: flex;
}
#input-line span {
color: #c5a5c5;
margin-right: 5px;
}
#command-input {
background: none;
border: none;
outline: none;
color: #ffffff;
flex-grow: 1;
}
a {
color: #6f91d4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h3>navneet-portfolio.sh</h3>
<div id="terminal">
<div id="output"></div>
<div id="input-line">
<span>></span>
<input type="text" id="command-input" autofocus autocomplete="off">
</div>
</div>
<script>
const output = document.getElementById('output');
const commandInput = document.getElementById('command-input');
const commands = {
help: `Available commands:<br><br>
whoami - About me<br>
contact - Contact/socials<br>
resume - Resume`,
whoami: `Hi, I'm Navneet, a passionate developer with a love for learning and building cool stuff! <br> <br>
Worked on Data processing and Development of new layers of the map under the Content Engineering Team as part of the Uni-Map Project in Here Technologies on technologies like Scala, Spark, and GitLab. <br> <br>
Experienced Full Stack Engineer with a demonstrated history of working in the development and research industry. Skilled in Spring Boot, Android Development, Business Intelligence, Front-End Development, and Linux. Strong engineering professional and student of Birla Institute of Technology and Science, Pilani.`,
contact: `Find me here:<br>
<a href="https://www.linkedin.com/in/navneetsharmapro/" target="_blank">LinkedIn</a><br>
<a href="https://github.com/NavneetSharmaPro" target="_blank">GitHub</a>`,
resume: `Find my resume here: <br>
<a href="https://drive.google.com/file/d/1AIEwl8aJ6Eye6R5HLBeYEsYuT_3M6AVj/view?usp=sharing" target="_blank">NAVNEET_SHARMA</a><br>`
};
function printToTerminal(text) {
const line = document.createElement('div');
line.innerHTML = text;
output.appendChild(line);
output.scrollTop = output.scrollHeight;
}
function executeCommand(command) {
const cmd = command.trim().toLowerCase();
if (commands[cmd]) {
printToTerminal(commands[cmd]);
} else {
printToTerminal(`Command not recognized. Type 'help' for a list of commands.`);
}
}
commandInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const command = commandInput.value;
printToTerminal(`> ${command}`);
executeCommand(command);
commandInput.value = '';
}
});
document.getElementById('terminal').addEventListener('click', () => {
commandInput.focus();
});
</script>
</body>
</html>