Skip to content

Commit 180362d

Browse files
sankalpvbsankalpvb
committed
background
1 parent 5549a4d commit 180362d

File tree

6 files changed

+285
-3
lines changed

6 files changed

+285
-3
lines changed

‎Resume.pdf‎

-183 KB
Binary file not shown.

‎galaxy.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* galaxy.css */
2+
#galaxy-bg {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
z-index: -1; /* Keeps it behind all UI */
7+
width: 100vw;
8+
height: 100vh;
9+
pointer-events: none;
10+
display: block;
11+
}

‎galaxy.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
const canvas = document.createElement("canvas");
2+
canvas.id = "galaxy-bg";
3+
document.body.appendChild(canvas);
4+
5+
const ctx = canvas.getContext("2d");
6+
canvas.width = window.innerWidth;
7+
canvas.height = window.innerHeight;
8+
9+
let mouse = { x: null, y: null };
10+
window.addEventListener("mousemove", e => {
11+
mouse.x = e.x;
12+
mouse.y = e.y;
13+
});
14+
15+
const starColors = ["#ffffff", "#ffe066", "#a0e9ff"];
16+
class Node {
17+
constructor(x, y) {
18+
this.x = x;
19+
this.y = y;
20+
this.vx = Math.random() * 0.5 - 0.25;
21+
this.vy = Math.random() * 0.5 - 0.25;
22+
this.radius = Math.random() * 1.5 + 1;
23+
this.color = starColors[Math.floor(Math.random() * starColors.length)];
24+
}
25+
update() {
26+
this.x += this.vx;
27+
this.y += this.vy;
28+
if (this.x <= 0 || this.x >= canvas.width) this.vx *= -1;
29+
if (this.y <= 0 || this.y >= canvas.height) this.vy *= -1;
30+
31+
if (mouse.x && mouse.y) {
32+
const dx = this.x - mouse.x;
33+
const dy = this.y - mouse.y;
34+
const dist = Math.sqrt(dx * dx + dy * dy);
35+
if (dist < 100) {
36+
this.vx -= dx / dist * 0.01;
37+
this.vy -= dy / dist * 0.01;
38+
}
39+
}
40+
}
41+
draw() {
42+
ctx.beginPath();
43+
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
44+
ctx.shadowColor = this.color;
45+
ctx.shadowBlur = 15;
46+
ctx.fillStyle = this.color;
47+
ctx.fill();
48+
ctx.shadowBlur = 0;
49+
}
50+
}
51+
52+
let nodes = [];
53+
const nodeGroupCount = 10;
54+
const nodesPerGroup = 10;
55+
for (let i = 0; i < nodeGroupCount; i++) {
56+
for (let j = 0; j < nodesPerGroup; j++) {
57+
nodes.push(new Node(Math.random() * canvas.width, Math.random() * canvas.height));
58+
}
59+
}
60+
61+
function connectNodes() {
62+
for (let i = 0; i < nodes.length; i++) {
63+
for (let j = i + 1; j < nodes.length; j++) {
64+
const dx = nodes[i].x - nodes[j].x;
65+
const dy = nodes[i].y - nodes[j].y;
66+
const dist = Math.sqrt(dx * dx + dy * dy);
67+
if (dist < 100) {
68+
const alpha = 1 - dist / 100;
69+
const gradient = ctx.createLinearGradient(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
70+
gradient.addColorStop(0, `rgba(255, 255, 255, ${alpha})`);
71+
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
72+
ctx.beginPath();
73+
ctx.moveTo(nodes[i].x, nodes[i].y);
74+
ctx.lineTo(nodes[j].x, nodes[j].y);
75+
ctx.strokeStyle = gradient;
76+
ctx.lineWidth = 0.3;
77+
ctx.stroke();
78+
}
79+
}
80+
}
81+
}
82+
83+
function animate() {
84+
ctx.clearRect(0, 0, canvas.width, canvas.height);
85+
nodes.forEach(node => {
86+
node.update();
87+
node.draw();
88+
});
89+
connectNodes();
90+
requestAnimationFrame(animate);
91+
}
92+
93+
animate();

‎index.html‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Sankalp Bhosale - Portfolio</title>
88
<link rel="stylesheet" href="style.css" />
9+
<link rel="stylesheet" href="galaxy.css" />
910
<link rel="icon" href="favicon.ico" type="image/x-icon">
1011
<meta property="og:title" content="Sankalp Bhosale - Terminal Portfolio">
1112
<meta property="og:description" content="Cybersecurity Enthusiast | Terminal Portfolio">
@@ -33,6 +34,20 @@
3334
</head>
3435

3536
<body>
37+
<header class="sticky-header">
38+
<div class="navbar">
39+
<div class="nav-left">
40+
<span class="brand-name">Sankalp</span>
41+
</div>
42+
<div class="nav-right">
43+
<a href="#about">About</a>
44+
<a href="#projects">Projects</a>
45+
<a href="assets/resume.pdf" target="_blank" rel="noopener noreferrer">Resume</a>
46+
<a href="#contact">Contact</a>
47+
</div>
48+
</div>
49+
</header>
50+
3651
<div class="custom-cursor" id="cursor"></div>
3752
<div id="progressBar"></div>
3853

@@ -61,12 +76,12 @@ <h1 id="typewriter"></h1>
6176
</header>
6277

6378
<!-- MAIN CONTENT -->
64-
<main class="main-section">
65-
<section class="section about-wrapper" id="about">
79+
<main class="main-section" id="about">
80+
<section class="section about-wrapper" >
6681
<div class="profile-photo">
6782
<img src="assets/profile.png" alt="Sankalp Bhosale">
6883
</div>
69-
<div class="about-text">
84+
<div class="about-text" id="about">
7085
<h2>About Me</h2>
7186
<p>$ whoami<br>Sankalp Vishnu Bhosale</p>
7287
<p class="type-line" id="aboutText"></p><span class="cursor">█</span>
@@ -270,6 +285,8 @@ <h2 id="modalName"></h2>
270285
modal.classList.remove("active");
271286
}
272287
</script>
288+
<script src="galaxy.js"></script>
289+
273290
</body>
274291

275292
</html>

‎script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,3 +377,10 @@ function updateModalDetails(data) {
377377
function closeModal() {
378378
modal.classList.remove("active");
379379
}
380+
// Show sticky navbar after scroll
381+
window.addEventListener("scroll", () => {
382+
const header = document.querySelector(".sticky-header");
383+
if (window.scrollY > 20) {
384+
header.classList.add("visible");
385+
}
386+
});

‎style.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
2+
html {
3+
scroll-behavior: smooth;
4+
}
25

36
:root {
47
--bg: #0d0d0d;
@@ -756,6 +759,7 @@ body.reveal-glow::before {
756759
.about-text {
757760
flex: 1;
758761
margin-left: 100px;
762+
text-align: justify;
759763
}
760764
.progress-section iframe {
761765
border-radius: 6px;
@@ -777,3 +781,153 @@ body.reveal-glow::before {
777781
.no-scroll-frame {
778782
scrollbar-width: none; /* Firefox */
779783
}
784+
/* Responsive Layout Adjustments */
785+
@media screen and (max-width: 768px) {
786+
.about-wrapper {
787+
flex-direction: column;
788+
align-items: center;
789+
text-align: center;
790+
}
791+
792+
.profile-photo img {
793+
width: 180px;
794+
height: 180px;
795+
margin: 0 auto;
796+
}
797+
798+
.about-text {
799+
margin-left: 0;
800+
margin-top: 15px;
801+
}
802+
803+
.dashboard-wrapper {
804+
flex-direction: column;
805+
align-items: center;
806+
padding: 20px 10px;
807+
}
808+
809+
.side-box {
810+
max-width: 100%;
811+
width: 95%;
812+
margin-bottom: 20px;
813+
}
814+
815+
.center-grid {
816+
max-width: 100%;
817+
width: 100%;
818+
}
819+
820+
.custom-grid {
821+
grid-template-columns: 1fr;
822+
}
823+
824+
.projects,
825+
.certs {
826+
grid-column: span 1;
827+
}
828+
829+
nav {
830+
display: flex;
831+
flex-wrap: wrap;
832+
justify-content: center;
833+
gap: 10px;
834+
}
835+
836+
nav a {
837+
margin: 8px 10px;
838+
font-size: 14px;
839+
}
840+
841+
.section h2 {
842+
font-size: 22px;
843+
}
844+
845+
header h1 {
846+
font-size: 32px;
847+
}
848+
849+
header p {
850+
font-size: 14px;
851+
}
852+
853+
.preview-panel {
854+
padding: 10px;
855+
}
856+
857+
.image-container {
858+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
859+
}
860+
861+
#modalImage {
862+
max-width: 90vw;
863+
max-height: 60vh;
864+
}
865+
866+
#modalInfo {
867+
max-width: 90%;
868+
margin: 10px auto;
869+
}
870+
871+
.custom-cursor {
872+
display: none;
873+
}
874+
875+
.btn {
876+
font-size: 14px;
877+
padding: 8px 12px;
878+
}
879+
}
880+
.sticky-header {
881+
position: sticky;
882+
top: 0;
883+
z-index: 999;
884+
background-color: #000;
885+
border-bottom: 1px solid var(--accent);
886+
padding: 10px 20px;
887+
box-shadow: 0 2px 10px rgba(0,255,255,0.1);
888+
}
889+
890+
.navbar {
891+
display: flex;
892+
justify-content: space-between;
893+
align-items: center;
894+
max-width: 1200px;
895+
margin: auto;
896+
flex-wrap: wrap;
897+
}
898+
899+
.brand-name {
900+
font-family: 'Fira Code', monospace;
901+
font-size: 20px;
902+
color: var(--accent);
903+
}
904+
905+
.nav-right a {
906+
color: var(--accent);
907+
font-family: 'Fira Code', monospace;
908+
margin-left: 15px;
909+
text-decoration: none;
910+
transition: color 0.3s ease;
911+
}
912+
913+
.nav-right a:hover {
914+
color: #00ffff;
915+
}
916+
.sticky-header {
917+
position: sticky;
918+
top: 0;
919+
z-index: 999;
920+
background-color: #000;
921+
border-bottom: 1px solid var(--accent);
922+
padding: 10px 20px;
923+
box-shadow: 0 2px 10px rgba(0,255,255,0.1);
924+
opacity: 0;
925+
transform: translateY(-100%);
926+
transition: opacity 0.4s ease, transform 0.4s ease;
927+
}
928+
929+
.sticky-header.visible {
930+
opacity: 1;
931+
transform: translateY(0);
932+
}
933+

0 commit comments

Comments
 (0)