-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (189 loc) · 9.27 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mriganka Brahma</title>
<!-- AOS -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- FAVICON -->
<link class="favicon" rel="icon" type="image/img" sizes="32x32" href="images/mriganka.jpg">
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- TYPE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"
integrity="sha512-3J8teBiHrSyaaRBajZyIEtpDsXdPq1gsznKWIVb5CnorQuFhjWGhWe54z8YNnHHr7MZuExb9m5kvf964HiT1Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- jQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SWEET ALERT -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<nav class="navbar">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="max-width">
<div class="logo">
<a href="#">My<span> personal Website</span></a>
</div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#services" class="menu-btn">Services</a></li>
<li><a href="#skills" class="menu-btn">Skills</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="material-icons">menu</i>
</div>
</div>
</nav>
<!-- Scroll to top button -->
<button id="btnScrollToTop">
<i class="material-icons">arrow_upward</i>
</button>
<!-- home section start-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1" data-aos="fade-up">Hello, my name is</div>
<div class="text-2">Mriganka Brahma</div>
<div class="text-3">Im a <span class="typing"></span></div>
</div>
</div>
</section>
<!-- about section -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title" data-aos="fade-down" >About Me</h2>
<div class="about-content">
<div class="column left" data-aos="fade-right" >
<img src="images/P3021961.jpg" alt="" />
</div>
<div class="column right" data-aos="fade-up">
<div class="text">
I'm Mriganka Brahma and Im a <span class="typing-2"></span>
</div>
<p class="paragraph">
Hii everyone!
I am Mriganka Brahma, CSE Engineering from BPPIMT. I have learnt languages like C, Cpp and Python. I also like to explore cloud computing. The world of Data Science and Machine Learning fascinates me!
I have built few projects on Web Development and machine learning.
I am also a innovative Blog writer Bringing forth a love of writing, combined with extraordinary networking skills and a desire to connect with others through writing
Like to collaborate with peers, thereby expanding community and gaining knowledge.
</p>
<a href="https://drive.google.com/file/d/1aOvo1ED6fcbQwaakTp0xmLlKK-aNvPKw/view?usp=sharing">Download
Resume</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title" data-aos="fade-down">My projects</h2>
<div class="serv-content">
<div class="card" data-aos="flip-left">
<div class="box">
<i class="fas fa-laptop-code"></i>
<div class="text">Anonymous Chat App</div>
<p>
A Realtime Chat App which allows multiple users to join and chat anonymously. Built using Node and Socket.io.This app uses the Web Socket API which allows bi-directional communication between web clients and servers.
The user after choosing a username can connect and chat anonymously with multiple users in real time.
</div>
</div>
<div class="card" data-aos="flip-left">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Invoice Generator</div>
<p>
The organization's invoice management system may be efficiently managed with the aid of automated invoice-generating software. Decreasing manual inputs, which lowers the possibility of mistakes, accelerates the invoice-generating process.
</p>
</div>
</div>
<div class="card" data-aos="flip-left">
<div class="box">
<i class="fas fa-mobile-alt"></i>
<div class="text">Hotstar Clone</div>
<p>
We utilised the following technologies in our project:HTML CSS JavaScript React Node Express Mongoose
Our project is responsive since we used media queries when we made this copy of the Hotstar website. Our primary goal in copying Hotstar.com was to develop it with the following functionality and aesthetics: Backend, which made it much easier to manage a large amount of data and routes. React was a tool that helped us develop the front end, including the website's look and structure. designing all the buttons, graphics, etc. with hover effects
</p>
</div>
</div>
</div>
</div>
</section>
<!-- skills section services -->
<section class="skills" id="skills">
<div class="max-width" data-aos="fade-down">
<h2 class="title" data-aos="fade-up">My Skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">
My creative skills & experiences.
</div>
<p class="paragraph-2">
Along with Python, worked earlier in C++, C. Worked with HTML,CSS,JavaScript. Worked on libraries like numpy,pandas , open cv others I am also familiar with sql , PHP etc.I am also a innovative Blog Writer with several years of experience working to create interesting, entertaining, and informative blog posts for my own personal website.
</p>
<a href="#about">Read More</a>
</div>
<div class="column right skill-box">
<div class="icons">
<img src="images\skill-icons\icons8-css3.svg" alt="css" id="css-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-javascript.svg" alt="js" id="js-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-react-native.svg" alt="react" id="react-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-flutter.svg" alt="flutter" id="flutter-icon" data-aos="flip-left">
</div>
<div class="icons">
<img src="images\skill-icons\icons8-html-5.svg" alt="html", id="html-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-nodejs.svg" alt="nodedjs" id="nodejs-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-visual-studio-code-2019.svg" alt="vscode" id="vscode-icon" data-aos="flip-left">
<img src="images\skill-icons\icons8-c++.svg" alt="c++" id="cpp-icon" data-aos="flip-left">
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title" data-aos="fade-down">Contact Me</h2>
<div class="contact-content">
<div class="column left" data-aos="flip-left">
<div class="text">Let's Get in Touch</div>
<p class="paragraph-3">Coffee Chat! Please do not hesitate to schedule a meeting. Alternatively, feel free to reach out directly by email at [email protected]
</p>
</div>
</div>
</div>
</section>
<!-- footer section start -->
<footer>
<div class="text-center">
<span>
Created By <a href="#">Mriganka Brahma</a> | <span class="far fa-copyright"> </span> <script>document.write(new Date().getFullYear())</script> All rights reserved.
<div>
<a href="https://www.linkedin.com/in/mriganka-brahma-871483217">linked In</a>
<a href="https://github.com/mrigankabrahma">Github </a>
<a href="https://www.instagram.com/iammriganka2021/">Instagram</a>
<a href="https://www.facebook.com/mriganka.brahma.9">Facebook</a>
</div>
</span>
</div>
</footer>
<script src="script.js"></script>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>AOS.init({easing : 'ease-in',delay: 100,duration: 300,offset:100});window.addEventListener('load', AOS.refresh);</script>
</body>
</html>