Skip to content

Commit 8447f46

Browse files
sankalpvbsankalpvb
committed
Initial portfolio upload
1 parent 319d824 commit 8447f46

File tree

3 files changed

+167
-55
lines changed

3 files changed

+167
-55
lines changed

‎index.html‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -52,61 +52,63 @@ <h1 id="typewriter"></h1>
5252
</nav>
5353
</header>
5454

55-
<div class="content-wrapper">
56-
<!-- LEFT SIDEBAR -->
57-
<aside class="skill-box left-box section reveal">
58-
<h3>> Known Languages</h3>
59-
<ul>
60-
<li>Python</li>
61-
<li>Java</li>
62-
<li>HTML/CSS</li>
63-
<li>JavaScript</li>
64-
<li>SQL</li>
55+
<!-- MAIN CONTENT -->
56+
<main class="main-section">
6557

66-
</ul>
67-
</aside>
68-
69-
<!-- MAIN CONTENT -->
70-
<main class="main-section">
71-
72-
<section class="section" id="about">
73-
<h2>About Me</h2>
74-
<p>$ whoami<br>Sankalp Bhosale</p>
75-
<p class="type-line" id="aboutText"></p><span class="cursor">█</span>
76-
</section>
77-
78-
<section class="section" id="resume">
79-
<h2>Resume</h2>
80-
<p>Click the button below to view or download my resume.</p>
81-
<a href="resume.pdf" class="btn" target="_blank">View Resume</a>
82-
</section>
83-
84-
<section class="section" id="contact">
85-
<h2>Contact</h2>
86-
<p>Email: yourname@example.com</p>
87-
<p>GitHub: <a href="https://github.com/yourusername" target="_blank">github.com/yourusername</a></p>
88-
<p>LinkedIn: <a href="https://linkedin.com/in/yourusername" target="_blank">linkedin.com/in/yourusername</a></p>
89-
</section>
90-
</main>
91-
92-
<!-- RIGHT SIDEBAR -->
93-
<aside class="skill-box right-box">
94-
<h3>> Cyber Skills</h3>
95-
<ul>
96-
<li>SQL Injection</li>
97-
<li>Burp Suite</li>
98-
<li>Wireshark</li>
99-
<li>Metasploit</li>
100-
<li>Nmap</li>
101-
<!--<li>Privilege Escalation</li> -->
102-
</ul>
103-
</aside>
58+
<section class="section" id="about">
59+
<h2>About Me</h2>
60+
<p>$ whoami<br>Sankalp Bhosale</p>
61+
<p class="type-line" id="aboutText"></p><span class="cursor">█</span>
62+
</section>
63+
</main>
64+
</div>
65+
<div class="outer-frame">
66+
<div class="custom-grid">
67+
68+
<!-- Top Row -->
69+
<div class="card skills">
70+
<div class="section-title">> Skills</div>
71+
<ul>
72+
<li>SQL Injection</li>
73+
<li>Burp Suite</li>
74+
<li>Wireshark</li>
75+
<li>Metasploit</li>
76+
<li>Nmap</li>
77+
</ul>
78+
</div>
79+
80+
<div class="card projects">
81+
<div class="section-title">> Projects</div>
82+
<p>BruteMaster – A modular brute-force tool using Bash and Python...</p>
83+
</div>
84+
85+
<!-- Bottom Row -->
86+
<div class="card certs">
87+
<div class="section-title">> Certificates</div>
88+
<p>Cybersecurity Fundamentals – IBM, Web Pentesting – TryHackMe, etc.</p>
89+
</div>
90+
91+
<div class="card languages">
92+
<div class="section-title">> Languages</div>
93+
<ul>
94+
<li>Python</li>
95+
<li>Java</li>
96+
<li>HTML/CSS</li>
97+
<li>JavaScript</li>
98+
<li>SQL</li>
99+
</ul>
100+
</div>
101+
102+
</div>
104103
</div>
105-
<footer>
106-
<p>&copy; 2025 Sankalp Bhosale. All rights reserved.</p>
107-
</footer>
108-
<audio id="typeSound" src="https://assets.mixkit.co/active_storage/sfx/2333/2333-preview.mp3" preload="auto"></audio>
109-
<script src="script.js"></script>
104+
105+
106+
<footer>
107+
<p>&copy; 2025 Sankalp Bhosale. All rights reserved.</p>
108+
</footer>
109+
<audio id="typeSound" src="https://assets.mixkit.co/active_storage/sfx/2333/2333-preview.mp3"
110+
preload="auto"></audio>
111+
<script src="script.js"></script>
110112
</body>
111113

112-
</html>
114+
</html>

‎script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function typeWriter() {
3232
}
3333
}
3434

35-
const aboutText = "I’m a student passionate about cybersecurity, networking, and software development. I love solving real-world problems and experimenting with new tools and technologies.";
35+
const aboutText = "Detail-oriented cybersecurity intern with hands-on experience in red teaming, scripting, and offensive security. Creator of BruteMaster, a Bash and Python-based modular brute-force framework. Completed over 20 CTFs and labs focused on web vulnerabilities, authentication bypass, and exploitation. Seeking to leverage project-based learning and technical capabilities to grow in a cybersecurity internship role.";
3636
let j = 0;
3737
function typeAbout() {
3838
if (j < aboutText.length) {

‎style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,8 +244,11 @@ footer {
244244
.main-section {
245245
flex: 1;
246246
max-width: 700px;
247+
margin: 0 auto; /* Centers the section horizontally */
248+
padding: 20px; /* Optional: adds spacing inside for better visuals */
247249
}
248250

251+
249252
/* Responsive: stack on smaller devices */
250253
@media screen and (max-width: 900px) {
251254
.content-wrapper {
@@ -318,3 +321,110 @@ footer {
318321
opacity: 1;
319322
transform: translateY(0);
320323
}
324+
.section-wrapper {
325+
display: flex;
326+
margin: 40px auto;
327+
max-width: 1200px;
328+
color: #00ff99;
329+
}
330+
331+
.sidebar {
332+
width: 250px;
333+
padding: 20px;
334+
border-right: 1px solid #00ff99;
335+
}
336+
337+
.main-content {
338+
flex: 1;
339+
padding: 20px;
340+
}
341+
342+
.section-title {
343+
font-weight: bold;
344+
font-size: 18px;
345+
margin: 20px 0 10px;
346+
color: #00ffcc;
347+
}
348+
349+
ul {
350+
list-style-type: square;
351+
padding-left: 20px;
352+
}
353+
.sidebar,
354+
.main-content {
355+
padding: 20px;
356+
background: rgba(0, 255, 200, 0.05);
357+
backdrop-filter: blur(6px);
358+
border: 1px solid rgba(0, 255, 200, 0.3);
359+
border-radius: 10px;
360+
margin: 0 10px; /* Adds spacing between the two */
361+
}
362+
.sidebar {
363+
flex: 0.5;
364+
}
365+
.main-content {
366+
flex: 1.5;
367+
}
368+
.outer-frame {
369+
max-width: 1200px;
370+
margin: 40px auto;
371+
padding: 20px;
372+
border-radius: 10px;
373+
}
374+
375+
.grid-container {
376+
display: grid;
377+
grid-template-columns: 1fr 1fr;
378+
gap: 20px;
379+
}
380+
381+
.card {
382+
padding: 20px;
383+
background: rgba(0, 255, 200, 0.06);
384+
border: 1px solid rgba(0, 255, 200, 0.3);
385+
border-radius: 12px;
386+
backdrop-filter: blur(10px);
387+
box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
388+
transition: transform 0.3s ease, box-shadow 0.3s ease;
389+
}
390+
391+
.card:hover {
392+
transform: translateY(-5px);
393+
box-shadow: 0 0 25px rgba(0, 255, 200, 0.4);
394+
}
395+
396+
.section-title {
397+
font-size: 20px;
398+
color: #00ffcc;
399+
margin-bottom: 10px;
400+
border-left: 4px solid #00ffcc;
401+
padding-left: 10px;
402+
text-shadow: 0 0 5px #00ffcc;
403+
}
404+
405+
ul {
406+
list-style-type: square;
407+
padding-left: 20px;
408+
}
409+
.custom-grid {
410+
display: grid;
411+
grid-template-columns: repeat(3, 1fr);
412+
gap: 20px;
413+
grid-template-rows: auto auto;
414+
}
415+
416+
/* Top Row */
417+
.skills {
418+
grid-column: span 1;
419+
}
420+
.projects {
421+
grid-column: span 2;
422+
}
423+
424+
/* Bottom Row */
425+
.certs {
426+
grid-column: span 2;
427+
}
428+
.languages {
429+
grid-column: span 1;
430+
}

0 commit comments

Comments
 (0)