-
Notifications
You must be signed in to change notification settings - Fork 0
/
my portfolio website.html
265 lines (236 loc) · 9.3 KB
/
my portfolio website.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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html>
<head>
<title>Vrinda Mittal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Courgette|Gochi+Hand|Itim|Patrick+Hand|Shadows+Into+Light+Two|Short+Stack|Sriracha" rel="stylesheet">
<style>
.navbar-fixed-left {
width: 160px;
position: fixed;
border-radius: 0;
height: 100%;
float: left;
background-image: url("http://bingewatchshows.com/wp-content/uploads/2015/10/dark-wood-desk-texture.jpg");
}
.navbar-fixed-left .navbar-nav > li {
/* Cancel default li float: left */
display: inline-block;
font-family: 'Architects Daughter', cursive;
font-size: 200%;
font-align: left;
width: 140px;
margin-left: 0px;
padding-top: 25px;
padding-right: 10px;
}
.navbar-fixed-left + .container {
margin-top: 100px;
margin-left: 0px;
float: left;
}
body {
position: relative;
}
#home {padding-top:0px;height:700px;color: #fff; background-image: url("dreamcatcher.jpg"); font-family: 'Shadows Into Light', cursive; font-size: 300%;}
#about {padding-top:0px;height:700px;color: #fff; background-color: black; font-family: 'Short Stack', cursive;font-size: 150%;}
#leaves{padding-top:0px;height:700px;color: #fff; background-image: url("trees.jpg"); font-size: 250%;font-family: 'Shadows Into Light', cursive;}
#projects{padding-top:0px;height:700px;color: #fff; background-color: black;font-family: 'Short Stack', cursive;}
#bulb{padding-top:0px;height:700px;color: #fff; background-image: url("workspace.jpg");background-repeat: no-repeat;background-color: black;font-family: 'Shadows Into Light', cursive;font-size: 250%;}
#blogs {padding-top:0px;height:700px;color: #fff; background-color: black;font-family: 'Short Stack', cursive;}
#contact{padding-top:0px;height:700px;color: #fff; background-image: url("contact.jpg"); background-repeat: no-repeat;font-family: 'Short Stack', cursive;font-size: 150%;}
#about h1{
font-family: 'Short Stack', cursive;
font-size: 200%;
margin-top: 50px;
}
a{
color: white;
}
.main{
margin-left: 160px;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100%);
scroll-snap-coordinate: 50% 50%;
}
.page{
scroll-snap-align: none start;
}
.docScroller{
width: 500px;
overflow-x: hidden;
overflow-y: auto;
scroll-padding: 100px 0 0;
scroll-snap-type: proximity;
}
.btn{
background-color: black;
border-color: black;
}
.btn:hover{
background-color: grey;
border-color: grey;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-left">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand" href="#" style="font-family:'Architects Daughter', cursive; font-size:200%;">VRINDA MITTAL</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" style="margin-top 100 px">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#bulb">Projects</a></li>
<li><a href="#leaves">Blogs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="main docscroller">
<div id="home" class="container-fluid page" style="color: white; padding-top: 100px;">
<center>
<p>The future belongs to those who believe in the beauty of their dreams ...</p>
</center>
</div>
<!-- About-->
<div id="about" class="container-fluid page">
<div class="row">
<div class="col-lg-6 col-lg-offset-1">
<br>
<h1>Hi :)<br>
I am Vrinda Mittal.</h1>
<br>
<p>I am a computer science enthusiast currently pursuing Computer Science and Applied Mathematics at IIIT Delhi.
My interests lie in the field of cryptography ,cyber security and web development.
<br>Besides this I am also fond of reading books, painting, solving sudokus and watching movies in my free time.
<br>Sometimes a bit eccentric but a wanderer by heart. I love going to the mountains for vacations.</p>
</div>
<div class="col-lg-3 col-lg-offset-1">
<br><br><br><br>
<img src="dp.jpg" class="img-circle" alt="Oops" width="250" height="400">
</div>
</div>
</div>
<!--Projects - Intro-->
<div id="bulb" class="row" >
<div class="container-fluid" style="height: 250px; margin-top: 200px;color: white; background: rgba(0,0,0,0.8);" >
<center>
<div class="projectintro">
<p><br>Projects are an interesting way to jiggle out that brain of ours <br>from the revere of learning from textbooks.<br>Checkout what I've been upto.</p>
</div>
</center>
</div>
</div>
<!--projects-->
<div id="projects" class="container-fluid page">
<div class="row">
<div class="col-lg-4" style="margin-top: 50px">
<center>
<h2>Creative Learning</h2>
<p>This was a group project in which we had to explain a topic from the Systems Management course at IIIT Delhi. We had to present it in a creative way by means of a video.We did it on <b>"Remote Administration"</b></p>
<br>
<br>
<br>
<a href="https://youtu.be/4qk_QQkJ6Ok">
<img src="remoteadmin.jpg" class="img-circle" alt="Remote Admistration" width="250" height="250">
</a>
</center>
</div>
<div class="col-lg-4" style="margin-top: 50px">
<center>
<h2>Mini Project</h2>
<p>In this group project we figured out the dynamics behind a typical Search Engine and built our very own prototype. Our Search Engine <b>"Quest"</b> is currently able the crawl IIIT Delhi's official website.(www.iiitd.ac.in) </p>
<br>
<br>
<br>
<a href="http://smwiki2016.wikidot.com/wiki:building-a-search-engine">
<img src="quest.png" class="img-circle" alt="Search Engine : Quest" width="250" height="250">
</a>
</center>
</div>
<div class="col-lg-4" style="margin-top: 50px">
<center>
<h2>How Stuff Works</h2>
<p>This too was a group project. This time we tore down a <b>"Portable Music Player"</b> ,identified its various components and tried to figure out the basic working behind a typical music player </p>
<br>
<br>
<br>
<br>
<a href="http://sm2016hsw.blogspot.in/2016/11/portable-music-player.html">
<img src="pcb.jpg" class="img-circle" alt="Music Player" width="250" height="250">
</a>
</center>
</div>
</div>
</div>
<!--blogintro-->
<div id="leaves" class="row" >
<div class="container-fluid" style="height: 250px; margin-top: 200px;color: white; background: rgba(0,0,0,0.8);" >
<center>
<div class="blogintro">
<p><br>Here I go capturing my impressions<br> as I watch the world from my end of the telescope ...</p>
</div>
</center>
</div>
</div>
<!--blogs-->
<div id="blogs" class="container-fluid page">
<div class="row">
<div class="col-lg-5 col-lg-offset-1" style="margin-top: 50px;">
<center>
<H1>Perspective</H1>
<p>Read about my dreams ,opinions and life as I share my perspective.</p>
<br>
<a href="https://rainydaymusingss.blogspot.in">
<img src="perspective.jpg" class="img-thumbnail" alt="rainydaymusingss.blogspot.in" width="250" height="150">
</a>
</center>
</div>
<div class="col-lg-5" style="margin-top: 50px;">
<center>
<H1>Little Somethings</H1>
<p>There is more meaning in less. Find out the "little somethings" ,the day to day chatter that keeps my life abuzz.</p>
<a href="https://allthingsbrightandbeautiful101.blogspot.in">
<img src="littlesomethings.jpg" class="img-thumbnail" alt="allthingsbrightandbeautiful101.blogspot.in" width="250" height="150">
</a>
</center>
</div>
</div>
</div>
<!--contact-->
<div id="contact" class="container-fluid page" >
<center>
<div class="links" style="margin-top: 300px;">
<div class="row">
<div class="well well-md info" style="background-color: rgba(0,0,0,0.8); height: 250px;width: 600px; border: none; color: white;">
<p><h2><u>On my Desk</u></h2></p>
<p>Email: [email protected]<br>Github: <a href="https://github.com/v98"> https://github.com/v98</a></p>
<p><h2><u>On the go</u></h2></p>
<p>Telegram: @vrinda26<br>
</div>
</div>
</div>
</center>
</div>
</body>
</html>