-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (178 loc) · 11.1 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>J0e PortFolio</title>
<link rel="stylesheet" href="styles.css">
<title>Responsive Menu with Virtual Keyboard</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Baskerville:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
<!-- Scroll Indicator -->
<div id="scrollIndicator"></div>
<div id="overlay"></div>
<div class="custom-alert" id="customAlert">
<p id="alertMessage">This is a custom hacker alert!</p>
<button id="closeButton" onclick="closeAlert()">Close</button>
</div>
<div class="navbar">
<div class="logo"> <img src="https://i.ibb.co/ccqCJcD/l-1.png" alt="Logo Image"> <span>_j0e_Mj</span> </div> <button class="menu-btn" onclick="toggleMenu()">☰</button>
<div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#projects">projects</a> <a href="#skills">skills</a> <a href="#contact">Contact</a> </div>
</div>
<div id="home" class="content active">
<div class="home-content">
<div class="home-text">
<h1>Home</h1> <span class="first-part" style="color: #73c5ff;">Iam Jothish aka Joe</span> <br> <span class="developer" style="color:#f56200;">[FULL-STACK DEVELOPER]</span> <span class="cybersecurity" style="color:#ffffff;">[CYBERSECURITY ENTHUSIAST]</span> <span class="blockchain" style="color:#00ff22;">[BLOCKCHAIN FANATIC]</span> <br> <br> <a href="resume.pdf" class="resume-btn">Resume</a>
</div>
<div class="home-image"> <img src="https://i.ibb.co/ccqCJcD/l-1.png" alt="Profile Photo"> </div>
</div> <!-- Virtual Keyboard -->
<div class="input-container">
<label for="command">Enter Command:</label>
<input type="text" id="command" name="command" placeholder="Type 'cmd' and press Enter">
</div>
<div id="terminal" class="terminal">
<div class="terminal-header">
<span>Hacker Terminal</span>
</div>
<div id="terminal-content">
<p class="command-line">Initializing...</p>
<p class="command-line">$ <span id="terminal-input"></span></p>
</div>
</div>
</div> <button id="fullscreen-btn">🤖</button>
</div>
</div>
</div> <!-- Your existing sections for About, Projects, Skills, and Contact -->
<!-- ... -->
<div id="about" class="about-section" style="scroll-behavior: smooth;">
<h1>About Me</h1>
<p>Hello, I'm Jothish, currently pursuing a Bachelor's degree with a keen interest in various tech fields including cybersecurity, blockchain, web development, and cloud computing.</p>
<p>I have hands-on experience with cybersecurity tools such as <span class="tools">Nmap</span>, <span class="tools">Wireshark</span>, and many others. I am proficient in programming languages like <span class="tools">Python</span>, <span class="tools">PHP</span>, and have familiarity with <span class="tools">Java</span>, <span class="tools">C</span>, and <span class="tools">JavaScript</span>. Additionally, I am skilled in database tools like <span class="tools">MongoDB</span> and <span class="tools">Oracle</span>, and frameworks such as <span class="frameworks">Django</span> and <span class="frameworks">Flask</span>. </p>
<p>I am eager to work in a reputed company with a positive environment and supportive colleagues. I am excited about the opportunity to test my skills on real-time problems and contribute effectively to a dynamic team.</p>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="hacker-console">
<div class="console-header">
<h2>Console Output</h2>
</div>
<div class="console-body">
<div id="quoteDisplay" class="hacker-quote"></div>
</div>
</div>
<div id="projects" class="">
<h1>Projects</h1>
<div class="projects-container">
<div class="project-card"> <img src="https://i.ibb.co/613TRLQ/DALL-E-2024-10-12-19-51-07-A-minimalist-hacker-themed-portfolio-display-image-with-the-word-Portfoli.webp" alt="Project Image">
<div class="project-info">
<h2>Portfolio</h2>
<p>Personal Portfolio To Showcase My Skills Projects with Simple UI Design </p>
<div class="languages"> <span>Html</span> <span>Css</span> <span>Js</span> <span>Node.Js</span> <span>MangoDb</span> <br> </div> <br> <a href="#" class="project-link">View Project</a>
</div>
</div>
<div class="project-card"> <img src="https://i.ibb.co/mcYxLkt/DALL-E-2024-10-12-20-10-44-A-minimalistic-blockchain-themed-interface-with-Meta-Mask-and-Ethereum-el.webp" alt="Project Image">
<div class="project-info">
<h2>BlockChain TimeCapsule</h2>
<p>Blockchain: A secure, decentralized ledger for transparent, tamper-proof transactions.</p>
<div class="languages"> <span>MetaMask</span> <span>Ethereum</span> <span>Solidity</span> <span>Django</span> <br> </div> <br> <a href="#" class="project-link">View Project</a>
</div> <!-- Add more project cards as needed -->
</div>
<div class="project-card">
<h2>Mini Projects</h2>
<div class="projects">
<div class="projectmin">
<h3>Music app Using SPOTIFY </h3>
<p> A simple music player using spoyify api with search bar and iframes from api SPOTIFY</p>
<div class="languages"> <span>HTML</span> <span>CSS</span> <span>Js</span> <span>SPOTIFY API</span> </div> <br> <a href="#" class="project-link">View Project</a>
</div>
<div class="projectmin">
<h3>QR Code Generator</h3>
<p>generate Qr code and also downloads it</p>
<div class="languages"> <span>Html</span> <span>Css</span> <span>Js</span> </div> <br> <a href="#" class="project-link">View Project</a>
</div>
<div class="projectmin">
<h3>Project 3: Blog Platform</h3>
<p>An online blogging platform where users can write, edit, and share articles.</p>
<div class="languages"> <span>Vue.js</span> <span>Python</span> <span>Django</span> <span>SQLite</span> </div> <br> <a href="#" class="project-link">View Project</a>
</div>
</div>
</div>
</div>
<div id="skills" class="">
<h1>Skills</h1>
<div class="skills-container">
<!-- Frontend Section -->
<div class="skills-section">
<h2 class="section-title">Frontend</h2>
<div class="skills-grid">
<div class="skill-box"> <span class="glitch" data-text="HTML5">HTML5</span> </div>
<div class="skill-box"> <span class="glitch" data-text="CSS3">CSS3</span> </div>
<div class="skill-box"> <span class="glitch" data-text="JavaScript">JavaScript</span> </div>
<div class="skill-box"> <span class="glitch" data-text="React.js">React.js</span> </div>
</div>
</div> <!-- Backend Section -->
<div class="skills-section">
<h2 class="section-title">Backend</h2>
<div class="skills-grid">
<div class="skill-box"> <span class="glitch" data-text="Node.js">Node.js</span> </div>
<div class="skill-box"> <span class="glitch" data-text="SQL">SQL</span> </div>
<div class="skill-box"> <span class="glitch" data-text="MongoDB">MongoDB</span> </div>
<div class="skill-box"> <span class="glitch" data-text="Django">Django</span> </div>
</div>
</div> <!-- Tools Section -->
<div class="skills-section">
<h2 class="section-title">Tools</h2>
<div class="skills-grid">
<div class="skill-box"> <span class="glitch" data-text="Docker">Docker</span> </div>
<div class="skill-box"> <span class="glitch" data-text="AWS">AWS</span> </div>
<div class="skill-box"> <span class="glitch" data-text="ChatGPT">ChatGPT</span> </div>
</div>
</div> <!-- Blockchain Section -->
<div class="skills-section">
<h2 class="section-title">Blockchain</h2>
<div class="skills-grid">
<div class="skill-box"> <span class="glitch" data-text="Solidity">Solidity</span> </div>
<div class="skill-box"> <span class="glitch" data-text="Ethereum">Ethereum</span> </div>
<div class="skill-box"> <span class="glitch" data-text="MetaMask">MetaMask</span> </div>
</div>
</div> <!-- Languages Section -->
<div class="skills-section">
<h2 class="section-title">Languages</h2>
<div class="skills-grid">
<div class="skill-box"> <span class="glitch" data-text="Python">Python</span> </div>
<div class="skill-box"> <span class="glitch" data-text="JavaScript">JavaScript</span> </div>
<div class="skill-box"> <span class="glitch" data-text="SQL">SQL</span> </div>
</div>
</div>
</div>
</div>
<div id="contact" class="">
<h1>Contact</h1>
<form class="contact-form"> <input type="text" name="name" placeholder="Your Name" required> <input type="email" name="email" placeholder="Your Email" required> <textarea name="message" placeholder="Your Message" required></textarea> <button type="submit">Send</button> </form>
<div class="social-media-icons">
<a href="https://github.com/Joe6905" target="_blank">
<img src="https://i.ibb.co/HrDzCHB/l-4.png" alt="GitHub" class="neon-icon">
</a>
<a href="https://www.linkedin.com/in/jothiramalingam" target="_blank">
<img src="https://i.ibb.co/X8t8d8b/l-2.png" alt="LinkedIn" class="neon-icon">
</a>
<a href="https://youtube.com/Mj_here" target="_blank">
<img src="https://i.ibb.co/27FC7zt/l-6.png" alt="YouTube" class="neon-icon">
</a>
</div>
<footer class="neumorphic-footer">
<p>Made by Joe with ❤️</p>
</footer>
</body>
</html>
</body>
</html>