Skip to content

Commit 430d504

Browse files
Nityasaha13Nityasaha13
committed
2 parents 987214b + cce192e commit 430d504

File tree

5 files changed

+636
-0
lines changed

5 files changed

+636
-0
lines changed

‎Single Window Portfolio/css/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* Animation */
2+
3+
@import url('https://fonts.googleapis.com/css?family=Roboto');
4+
* {
5+
-webkit-box-sizing: border-box;
6+
-moz-box-sizing: border-box;
7+
box-sizing: border-box;
8+
}
9+
10+
html,
11+
body {
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
}
16+
17+
body {
18+
background: #003b59;
19+
font-family: 'Montserrat', sans-serif;
20+
color: #fff;
21+
line-height: 1.3;
22+
-webkit-font-smoothing: antialiased;
23+
}
24+
25+
#animations {
26+
width: 100%;
27+
height: 100%;
28+
overflow: hidden;
29+
}
30+
31+
#main_body {
32+
position: absolute;
33+
left: 0;
34+
top: 50%;
35+
padding: 0;
36+
width: 100%;
37+
text-align: center;
38+
}
39+
40+
.body_class img {
41+
width: 10vw;
42+
border-radius: 50%;
43+
}
44+
45+
.body_class a {
46+
font-size: 1.3rem;
47+
padding: 10px;
48+
}
49+
50+
.body_class a:hover {
51+
font-size: 1.2rem;
52+
color: white;
53+
cursor: pointer;
54+
transition: 0.4s;
55+
}
56+
57+
58+
/* Responsiveness via screen widths */
59+
60+
@media screen and (max-width: 768px) {
61+
.body_class img {
62+
width: 30%;
63+
border-radius: 50%;
64+
}
65+
.body_class a {
66+
font-size: 1.3rem;
67+
padding: 0px;
68+
}
69+
}
70+
71+
@media screen and (max-width: 1024px) {
72+
.body_class img {
73+
width: 25%;
74+
border-radius: 50%;
75+
}
76+
.body_class a {
77+
font-size: 1.3rem;
78+
padding: 4px;
79+
}
80+
}

‎Single Window Portfolio/images/ng.png‎

441 KB
Loading

‎Single Window Portfolio/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
4+
<head>
5+
<title>Nitya Saha</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<link rel="stylesheet" href="css/style.css">
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" crossorigin="anonymous">
11+
<script type="text/javascript" src="js/index.js"></script>
12+
<script type="text/javascript" src="js/main_animation.js"></script>
13+
</head>
14+
15+
<body>
16+
<div id="animations">
17+
<div id="main_body" class="body_class">
18+
<img src="images/ng.png" alt="Profile pic">
19+
<h1 style="font-family: 'Roboto', sans-serif; font-style: initial;">Nitya Gopal Saha</h1>
20+
<h2 class="desc" style="font-weight: 10; font-size: 20px;">
21+
I'm a
22+
<span class="text-switcher" style="font-style: initial; font-size: 22px;" data-hold-time="1000"
23+
data-switch-content='[ "Web Developer.", "WordPress Developer.","Content Creator.", "Blogger.", "Tech Enthusiast."]'></span>
24+
</h2>
25+
<hr style="width: 50%; background-color: #1D2951; border-color: #1D2951;">
26+
<a href="https://www.instagram.com/newzimo/" style="color: white;"><i class="fab fa-instagram"
27+
style="font-size: 2em;"></i></a>
28+
<a href="https://github.com/Nityasaha13" style="color: white;"><i class="fab fa-github"
29+
style="font-size: 2em;"></i></a>
30+
<a href="https://www.linkedin.com/in/nitya-gopal-saha-a668b024b/" style="color: white;"><i
31+
class="fab fa-linkedin" style="font-size: 2em;"></i></a>
32+
</div>
33+
</div>
34+
</body>
35+
36+
</html>

‎Single Window Portfolio/js/index.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* JS code used to start the animation */
2+
document.addEventListener('DOMContentLoaded', function() {
3+
particleground(document.getElementById('animations'), {
4+
dotColor: '#5cbdaa',
5+
lineColor: '#5cbdaa'
6+
});
7+
var intro = document.getElementById('main_body');
8+
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
9+
}, false);
10+
11+
/* JS code used for text switcher */
12+
var textSwitcher = function(el, toRotate, period) {
13+
this.toRotate = toRotate;
14+
this.el = el;
15+
this.loopNum = 0;
16+
this.period = parseInt(period, 10) || 2000;
17+
this.txt = "";
18+
this.tick();
19+
this.isDeleting = false;
20+
};
21+
22+
textSwitcher.prototype.tick = function() {
23+
var i = this.loopNum % this.toRotate.length;
24+
var fullTxt = this.toRotate[i];
25+
26+
if (this.isDeleting) {
27+
this.txt = fullTxt.substring(0, this.txt.length - 1);
28+
} else {
29+
this.txt = fullTxt.substring(0, this.txt.length + 1);
30+
}
31+
32+
this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
33+
34+
var that = this;
35+
var delta = 200 - Math.random() * 100;
36+
37+
if (this.isDeleting) {
38+
delta /= 2;
39+
}
40+
41+
if (!this.isDeleting && this.txt === fullTxt) {
42+
delta = this.period;
43+
this.isDeleting = true;
44+
} else if (this.isDeleting && this.txt === "") {
45+
this.isDeleting = false;
46+
this.loopNum++;
47+
delta = 500;
48+
}
49+
50+
setTimeout(function() {
51+
that.tick();
52+
}, delta);
53+
};
54+
55+
window.onload = function() {
56+
var elements = document.getElementsByClassName("text-switcher");
57+
for (var i = 0; i < elements.length; i++) {
58+
var toRotate = elements[i].getAttribute("data-switch-content");
59+
var period = elements[i].getAttribute("data-hold-time");
60+
if (toRotate) {
61+
new textSwitcher(elements[i], JSON.parse(toRotate), period);
62+
}
63+
}
64+
// INJECT CSS
65+
var css = document.createElement("style");
66+
css.type = "text/css";
67+
css.innerHTML = ".text-switcher > .wrap { border-right: 0.08em solid #666 }";
68+
document.body.appendChild(css);
69+
};
70+
71+
document.querySelectorAll('nav a').forEach(anchor => {
72+
anchor.addEventListener('click', function(e) {
73+
e.preventDefault();
74+
const targetId = this.getAttribute('href').substring(1);
75+
const targetSection = document.getElementById(targetId);
76+
if (targetSection) {
77+
window.scrollTo({
78+
top: targetSection.offsetTop,
79+
behavior: 'smooth'
80+
});
81+
}
82+
});
83+
});

0 commit comments

Comments
 (0)