-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (161 loc) · 9.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="RL-Roshan Lal's portfolio">
<meta name="keywords" content="Roshan Lal Jaipur, Roshan Lal Web Developer, Roshan Lal frontend backend developer">
<meta name="keywords" content="2 year experience, RL, RL Portfolio, jaipur web dev">
<meta name="author" content="Roshan Lal">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>RL Portfolio</title>
</head>
<body>
<!-- navbar -->
<div class="container">
<div class="navbar">
<div class="navbar__logo">RL</div>
<div class="navbar__nav-links">
<a class="a-primary" href="">Home</a>
<a class="a-primary" href="#about__container">About</a>
<a class="a-primary" target="_blank" href="https://building-a-portfolio-lemon.vercel.app/">Projects</a>
<a class="a-primary" href="#contact__container">Contact</a>
</div>
<div class="navbar__social-links">
<a class="a-primary" target="_blank" href="https://in.linkedin.com/in/roshanlal1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-linkedin"
viewBox="0 0 16 16"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
/>
</svg>
</a>
<a class="a-primary" target="_blank" href="https://github.com/roshanlal0156">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-github"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
/>
</svg>
</a>
</div>
</div>
</div>
<!-- navbar completed here -->
<!-- hero section -->
<div class="container hero__container">
<div class="hero">
<img class="noselect hero__left" src="./dp.png" alt="roshan lal" />
<div class="hero__right water-flow">
<div class="hero__name noselect">Roshan Lal</div>
<div class="hero__profession noselect">Full Stack Web Developer</div>
<a class="hero__contact-btn a-secondary water-flow" href="#contact__container"
>Contact</a
>
</div>
</div>
</div>
<!-- hero section completed here -->
<!-- about -->
<div id="about__container" class="container about__container">
<div class="about">
<div class="about__left">About me</div>
<div class="about__right">
<div class="about__description">
Hello there! As a seasoned Backend Software Developer with 2 years of hands-on experience, I bring a versatile skill set and a passion for solving complex problems to every project. Proficient in a variety of technologies and frameworks, I thrive in dynamic environments where I can leverage my expertise to architect robust and scalable solutions. Beyond coding, I enjoy exploring emerging technologies and experimenting with new tools to stay at the forefront of industry trends.
</div>
<a class="about__resume a-secondary water-flow" target="_blank" href="https://docs.google.com/document/d/1iMEtZ5d4H5OzpUdcEXAEZdSZmbogvKrpSx4CLVXyDXc/edit?usp=sharing">Resume</a>
</div>
</div>
</div>
<!-- about completed here -->
<!-- skills -->
<div class="container skills__container">
<div class="skills__wrapper">
<div class="skills__list">
<div class="skill first-skill-element">Skills</div>
<div class="skill skill2 chaining">C++</div>
<div class="skill skill3 chaining">PHP</div>
<div class="skill skill4 chaining">JavaScript</div>
<div class="skill skill5 chaining">Laravel</div>
<div class="skill skill6 chaining">Node.Js</div>
<div class="skill skill7 chaining">HTML</div>
<div class="skill skill8 chaining">CSS</div>
<div class="skill skill9 chaining">DBMS(MySQL, MongoDB)</div>
<div class="skill skill1 chaining">Git & Github</div>
<div class="skill skill10 chaining last-skill-element">Cooking More...</div>
<div class="wind">
<div style="--i: 1" class="wind-element"></div>
<div style="--i: 13" class="wind-element"></div>
<div style="--i: 7" class="wind-element"></div>
<div style="--i: 19" class="wind-element"></div>
<div style="--i: 5" class="wind-element"></div>
<div style="--i: 12" class="wind-element"></div>
<div style="--i: 15" class="wind-element"></div>
<div style="--i: 3" class="wind-element"></div>
<div style="--i: 17" class="wind-element"></div>
<div style="--i: 11" class="wind-element"></div>
<div style="--i: 18" class="wind-element"></div>
<div style="--i: 8" class="wind-element"></div>
<div style="--i: 20" class="wind-element"></div>
<div style="--i: 2" class="wind-element"></div>
<div style="--i: 10" class="wind-element"></div>
<div style="--i: 14" class="wind-element"></div>
<div style="--i: 4" class="wind-element"></div>
<div style="--i: 16" class="wind-element"></div>
<div style="--i: 9" class="wind-element"></div>
<div style="--i: 6" class="wind-element"></div>
</div>
</div>
</div>
</div>
<!-- skills completed here -->
<!-- Contact -->
<div id="contact__container" class="container contact__container">
<div class="contact">
<div class="contact__left">Contact me</div>
<div class="contact__right">
<div class="contact__description">
Whether you are starting a project, have business inquiries or just want to say hi, my inbox is always open so feel free to reach out and I will get back to you as soon as possible.
</div>
<div class="contact__mobile">
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg></span>
<a class="contact__mobile-btn a-primary" href="#">(+91) 8000849878</a>
</div>
<div class="contact__linkdin">
<span><svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-linkedin"
viewBox="0 0 16 16"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
/>
</svg></span>
<a class="contact__linkdin-btn a-primary" target="_blank" href="https://in.linkedin.com/in/roshanlal1">linkedin.com/in/roshanlal1</a>
</div>
</div>
</div>
</div>
</div>
<!-- Contact completed here -->
</body>
<script type="module" src="./src.js"></script>
</html>