-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
316 lines (303 loc) · 15.7 KB
/
index.html
File metadata and controls
316 lines (303 loc) · 15.7 KB
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="images/R-Letter-PNG-File.png" rel="shortcut icon" type="image/png">
<script src="https://kit.fontawesome.com/8e69bc109d.js" crossorigin="anonymous"></script>
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="CSS\style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="Javascript\script.js"></script>
<title>Rashmi Ranjan Sahoo</title>
</head>
<body>
<div id="progressbar"></div>
<div id="scrollpath"></div>
<div id="progressbar-left"></div>
<div id="scrollpath-left"></div>
<div class="page-loader">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Home Section -->
<section class="home-part">
<nav class="transparent">
<a class="waves-effect waves-light btn right transparent hide-on-med-and-down " id="btn-desktop" href="contact.html">Say Hello</a>
<div class="nav-wrapper">
<a href="index.html" class="brand-logo"><img src="images/R-Letter-PNG-File.png" width="57" height="auto" class="logo-img" alt=""></a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Home<i class="material-icons left">home</i></a></li>
<li><a href="#about">About <i class="material-icons left">person</i></a></li>
<li><a href="project.html">Projects <i class="material-icons left">code</i></a></li>
<li><a href="#contact">Contact <i class="material-icons left">phone</i></a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="#" class="white-text">Home <i class="material-icons left">home</i></a></li>
<li><a href="#about" class="white-text">About <i class="material-icons left">person</i></a></li>
<li><a href="project.html" class="white-text">Projects <i class="material-icons left">code</i></a></li>
<li><a href="#contact" class="white-text">Contact <i class="material-icons left">phone</i></a></li>
<li><a class="waves-effect waves-light btn transparent " id="btn-mobile" href="contact.html">Say Hello</a></li>
</ul>
<div class="row">
<div class="col s12 l6 " >
<img src="images/mf-avatar.svg" alt="" id="avatar">
</div>
<div class="col s12 l6">
<div id="intro">
<span>Rashmi Ranjan Sahoo</span>
<p class="white-text flow-text">I'm a Designer & <br> Front-end Developer</p>
<div id="desc">
<p class="white-text flow-text">I design and code beautifully simple things, and I love what I do. I create what you imagine.</p>
</div>
</div>
</div>
<div class="col s12 l12 center">
<img src="images/hero.svg" alt="" id="design-svg">
</div>
</div>
</section>
<!-- Info Section -->
<div class="info">
<h4 class="center ">Hi, I’m Rashmi. Nice to meet you.</h4>
<div class="info-text">
<p class="center white-text">Since beginning my journey as a frontend designer & developer nearly 2 Years ago,
I've done many templates for agencies, consulted for startups,
and collaborated with talented people to create digital products for both business and consumer use.
I'm quietly confident, naturally curious,
and perpetually working on improving my chops one design problem at a time.
</p>
</div>
</div>
<!-- Skill Card Section -->
<section class="languages">
<div class="row">
<div class="col s12 m6">
<div class="card right" id="front-end">
<div class="card-content black-text center">
<img src="images/frontend.svg" alt="" id="card-img">
<span class="card-title ">Front-end Developer</span>
<p id="card-title-info">I like to code things from scratch, and enjoy bringing ideas to life in the browser.</p>
<h5>Languages I speak:</h5>
<p id="card-title-info">HTML,CSS, Sass,JavaScript</p>
<h5>Dev Tools:</h5>
<ul>
<li>Bootstrap</li>
<li>Materialize CSS</li>
<li>Codepen</li>
<li>Github</li>
</ul>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card" id="design" >
<div class="card-content black-text center">
<img src="images/designer.svg" alt="" id="card-img">
<span class="card-title">Designer</span>
<p id="card-title-info">I value simple content structure, clean design patterns, and thoughtful interactions.</p>
<h5>Things I enjoy designing:</h5>
<p id="card-title-info">UX, UI, Web,Logos</p>
<h5>Design Tools:</h5>
<ul>
<li>Figma</li>
<li>Pen & Paper</li>
<li>Sketch</li>
<li>FreeCAd</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section class="about section" id="about">
<div class="container">
<div class="section-row">
<div class="section-title">
<h2>About Me</h2>
</div>
</div>
<div class="personal-img center">
<span class="img-profile">
<img src="images/circle-cropped.png" alt="">
</span>
</div>
<div class="section-row">
<div class="about-content">
<div class="section-row">
<div class="about-text">
<h3>I'm Rashmi Ranjan Sahoo and <span>Frontend Developer & Designer</span></h3>
<p>Hi! My name is Rashmi Ranjan Sahoo. I am a frontend developer & designer,
and I'm very passionate and dedicated to my work. With 2 years experience as
a frontend developer & designer, I have acquired the skills and knowledge necessary
to make your project a success. I enjoy every step of the design process, from dicussion
and collaboration.</p>
</div>
</div>
<div class="section-row">
<div class="personal-info">
<div class="section-row">
<div class="info-item ">
<p><span><i>Email</i> :rashmivicky06@gmail.com</span></p>
</div>
<div class="info-item">
<p><span><i>Age</i> :19</span></p>
</div>
<div class="info-item ">
<p><span><i>Website</i> :https://rr-sahoo.github.io/</span></p>
</div>
<div class="info-item ">
<p><span><i>Birthday</i> :6 January 2002</span></p>
</div>
<div class="info-item ">
<p><span><i>Degree</i> :B.Tech</span></p>
</div>
<div class="info-item">
<p><span><i>Phone</i> :+91 9861292067</span></p>
</div>
<div class="info-item ">
<p><span><i>City</i> :Bhubaneswar</span></p>
</div>
<div class="info-item">
<p><span><i>Freelance</i> :Available</span></p>
</div>
<div class="info-item" id="">
<a href="https://drive.google.com/file/d/1DijGSTM4t5CfPYA8K1zP3GTiAGfhE1YK/view?usp=sharing" class="btn waves-effect waves-light " id="btn">Download CV</a>
</div>
</div>
</div>
<div class="skill-bars">
<div class="bar">
<div class="skill-item">
<span>HTML</span>
</div>
<div class="progress-line html">
<span></span>
</div>
</div>
<div class="bar">
<div class="skill-item">
<span>CSS</span>
</div>
<div class="progress-line css">
<span></span>
</div>
</div>
<div class="bar">
<div class="skill-item">
<span>SASS</span>
</div>
<div class="progress-line sass">
<span></span>
</div>
</div>
<div class="bar">
<div class="skill-item">
<span>JavaScript</span>
</div>
<div class="progress-line javascript">
<span></span>
</div>
</div>
<div class="bar">
<div class="skill-item">
<span>Materialize CSS </span>
</div>
<div class="progress-line materialize">
<span></span>
</div>
</div>
<div class="bar">
<div class="skill-item">
<span>Bootstrap</span>
</div>
<div class="progress-line bootstrap">
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="contact">
<a href="index.html"><img src="images/R-Letter-PNG-File.png" alt="" width="100" height="auto" class="brand-logo"></a>
<div class="contact-text">
<p class=" center">Living, learning, & leveling up <br> One day at a time.</p>
</div>
<div class="social_outer">
<div class="social__inner">
<div class="social__content">
<a href="https://www.linkedin.com/in/rashmi-ranjan-sahoo-5a3b1b193">
<i class='bx bxl-linkedin social__icon'></i>
</a>
<div class="social__tooltip social__tooltip-top">Linkedin</div>
</div>
<div class="social__content">
<a href="https://github.com/RR-Sahoo">
<i class='bx bxl-github social__icon' ></i>
</a>
<span class="social__tooltip social__tooltip-bottom">Github</span>
</div>
<div class="social__content">
<a href="https://www.instagram.com/rashmi_sahoo_06/">
<i class='bx bxl-instagram-alt social__icon'></i>
</a>
<span class="social__tooltip social__tooltip-top">Instagram</span>
</div>
<div class="social__content">
<a href="https://twitter.com/RashmiVicky2">
<i class='bx bxl-twitter social__icon' ></i>
</a>
<span class="social__tooltip social__tooltip-bottom">Twitter</span>
</div>
<div class="social__content">
<a href="https://api.whatsapp.com/send?phone=+919861292067">
<i class='bx bxl-whatsapp social__icon' ></i>
</a>
<span class="social__tooltip social__tooltip-top">Whatsapp</span>
</div>
</div>
</div>
</div>
</section>
<div class="row footer">
<div class="col s12 footer-content">
<p>No © Issues ,Feel free to copy. <br> If you need any help, contact me.</p>
<p class="right">Designed with <span class="red-text"> ♥ </span> by Rashmi Ranjan Sahoo</p>
</div>
</div>
<script>
let progress = document.getElementById('progressbar');
let progressLeft=document.getElementById('progressbar-left');
let totalHeight= document.body.scrollHeight-window.innerHeight;
window.onscroll=function(){
let progressHeight=(window.pageYOffset/totalHeight)*100;
progress.style.height=progressHeight+"%";
progressLeft.style.height=progressHeight+"%";
}
</script>
</body>
</html>