-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (170 loc) · 7.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/53ecea2076.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/Logo.jpg" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="header-text">
<p>Frontend Web-Developer</p>
<h1>Hi, I'm <span>Bhumika</span>
<br>Sharma From Guwahati</h1>
</div>
</div>
</div>
<!------------------------about-------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/user.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>"Hi there! I am a driven and enthusiastic Computer Science student in my second year, with a specialization in IoT (Internet of Things). Currently, I am immersing myself in the world of web development, eagerly learning and creating
dynamic websites. Alongside my coding endeavors, I find joy in expressing myself through dance and indulge in the captivating world of
novels. Additionally, I am fascinated by event management and love organizing and coordinating events that bring people together. Let's connect and share our passion for technology, creativity, and event management!"</p>
<div class="tab-titles">
<p class= "tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class= "tab-links" onclick="opentab('experience')">Experiences</p>
<p class= "tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Web-Developer</span><br>Frontend-Development of the Website</li>
<li><span>C++ Coder</span><br>Working on projects based on c++ oops concept and DSA</li>
<li><span>Python Web-Developer</span><br>working on projects using OpenCV,threading and Windsound</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>Convenor</span><br>Astropihila SRM</li>
<li><span>Executive-Events</span><br>Alexa Developers Students Club SRM</li>
<li><span>Member</span><br>GEN-Y SRM</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2022-2026</span><br>Computer Science Engineering Specialization - IOT<br>From SRM University, KTR Chennai<br>1st semester GPA-9.68/10<br>2nd Semester GPA-9.23</li>
<li><span>2020-2022</span><br>CBSE - 12th Science<br>From Miles Bronson Resedential School, Guwahati <br>Passed with 91.25%.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-------------Service---------------->
<div id="services">
<div class="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-laptop-code"></i>
<h2>Web-Developer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, molestias enim ex vel adipisci iste. Nob</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-crop-simple"></i>
<h2>Canva-Designer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, molestias enim ex vel adipisci iste. Nob</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-code"></i>
<h2>Python Developer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, molestias enim ex vel adipisci iste. Nob</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!------------------------Projects-------------->
<div id="protfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="images/work-1.png">
<div class="layer">
<h3>Online Food Delivery App</h3>
<p>This app allows you to order food online and track you order
with fast delivery services.</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-2.png">
<div class="layer">
<h3>Motion Detection Alarm</h3>
<p>This app allows you to order food online and track you order
with fast delivery services.</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-3.png">
<div class="layer">
<h3>Registration Form</h3>
<p>This app allows you to order food online and track you order
with fast delivery services.</p>
<a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<a href="#" class="btn">See More</a>
</div>
</div>
<!-----------contact-------------->
<div id="contact">
<div class="container">
<div class="row-2">
<div class="contact">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i>[email protected]</p>
<p><i class="fa-solid fa-phone"></i>94564787</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-github"></i></a>
<a href=""><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<a href="images/Bhumika_s_Resume.pdf" download class="btn btn2">Download CV</a>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright <i class="fa-solid fa-copyright"></i> Bhumika. Made with Love<i class="fa-solid fa-heart"></i>.</p>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
</body>
</html>