-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (144 loc) · 7.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon_io/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon_io/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon_io/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon_io//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon_io/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Gotu&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title>Responsive Navbar & Footer</title>
<!-- <link rel="stylesheet" href="hfooter.css"> -->
<!-- <link rel="stylesheet" href="animaton.css"> -->
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Background Animation... -->
<div class="animated-background">
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
<div class="sphere"></div>
</div>
<nav class="navbar">
<div class="logo-container" href="#">
<img src="assets/logo.png" alt="Logo" class="logo">
</div>
<!-- <h2 class="logo" src="../New folder (2)/assets/2.png">MyWebsite</h2> -->
<ul class="nav-links">
<li><a href="index.html" onclick="loadPage('home')">Home</a></li>
<li><a href="../pages/about.html" onclick="loadPage('pages/about.html')">About</a></li>
<li><a href="../pages/skill.html" onclick="loadPage('pages/skills.html')">Skills</a></li>
<li><a href="../pages/project.html" onclick="loadPage('pages/project.html')">Projects</a></li>
<li><a href="../pages/contact.html" onclick="loadPage('pages/contact.html')">Contact</a></li>
</ul>
<button class="toggle-btn" onclick="toggleMenu()">☰</button>
</nav>
<div class="menu-overlay" id="menuOverlay">
<button class="close-btn" onclick="toggleMenu()">✖</button>
<ul class="menu">
<li><a href="index.html" onclick="loadPage('home')">Home</a></li>
<li><a href="../pages/about.html" onclick="loadPage('pages/about.html')">About</a></li>
<li><a href="../pages/skill.html" onclick="loadPage('pages/skills.html')">Skills</a></li>
<li><a href="../pages/project.html" onclick="loadPage('pages/project.html')">Projects</a></li>
<li><a href="../pages/contact.html" onclick="loadPage('pages/contact.html')">Contact</a></li>
</ul>
</div>
<!-- Home pages details -->
<div class="content-wrapper">
<div class="main-container">
<!-- Left Side: Text Content -->
<div class="text-content">
<h1>
<span class="nepali-text" data-text="संदिप कुमार">संदिप कुमार</span>
<span class="english-text" data-text="Sundeep kumarr">Sundeep Kumarr</span>
</h1>
<h2>I'm
<span class="animated-role" data-text="App Developer">App Developer</span>
<span class="animated-role" data-text="YouTuber">YouTuber</span>
<span class="animated-role" data-text="Ethical Hacker">Ethical Hacker</span>
</h2>
<p>
Passionate tech writer with a keen interest in technology and innovation.
I enjoy creating clear and concise documentation that helps users understand and utilize technology
effectively.
With a background in software development, I have honed my skills in app development, ethical
hacking, and content creation.
I am always eager to learn new things and share my knowledge with others.
</p>
<div class="btn-soc">
<div class="soc">
<a href="https://github.com/Sundeepkumarr" target="_blank"><i class="bx bxl-github"></i></a>
<a href="https://instagram.com/Sundeepkumarrr" target="_blank"><i
class="bx bxl-instagram"></i></a>
<a href="https://linkedin.com/in/Sundeepkumarr" target="_blank"><i
class="bx bxl-linkedin"></i></a>
<a href="https://youtube.com/iSundeepkumarr" target="_blank"><i class="bx bxl-youtube"></i></a>
</div>
<div class="btn">
<a href="../assets/Sandeep Kumar Yadav.pdf" download>Download Resume
<i class="fa-solid fa-download"></i>
</a>
</div>
</div>
</div>
<!-- Right Side: Image Content -->
<div class="image-content">
<div class="hom-img">
<div class="img-item">
<img src="assets/1.png" alt="myimage">
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="social-media">
<a href="https://www.github.com/sundeepkumarr" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/sundeepkumarrr" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://linkedin.com/in/Sundeepkumarr" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/iSundeepkumarr" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
<p>© <span id="year"></span> Sundeep Kumarr | Designed with <span style="color: #f2023a;">❤</span>
</p>
</footer>
<script>
function toggleMenu() {
const menuOverlay = document.getElementById("menuOverlay");
const contentWrapper = document.querySelector('.content-wrapper');
document.body.classList.toggle('menu-open');
menuOverlay.classList.toggle("active");
}
// Update Footer Year
const currentYear = new Date().getFullYear();
document.getElementById("year").textContent = currentYear;
const nameElement = document.getElementById('name');
const roleElement = document.getElementById('role');
const names = ['संदिप कुमार', 'Sundeep Kumarr'];
const roles = ['App Developer', 'YouTuber', 'Ethical Hacker'];
let nameIndex = 0;
let roleIndex = 0;
function updateText() {
nameElement.textContent = names[nameIndex];
roleElement.textContent = roles[roleIndex];
nameIndex = (nameIndex + 1) % names.length;
roleIndex = (roleIndex + 1) % roles.length;
}
setInterval(updateText, 3000); // Change text every 3 seconds
</script>
</body>
</html>