-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathindex.html
More file actions
257 lines (194 loc) · 14.9 KB
/
index.html
File metadata and controls
257 lines (194 loc) · 14.9 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
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Portfolio website of Vignesh G, Front End Web Developer & Graphic designer.">
<meta name="keywords" content="Vignesh, Vignesh G, LeanBeast, Lean Beast, Web Developer, vg, Front End developer, Front End, vgbhai">
<title>Vignesh G</title>
<link rel="icon" type="image/png" href="https://i.ibb.co/ZXrVsCr/Leanbeast-favicon.png">
<link rel="apple-touch-icon" href="https://i.ibb.co/ZXrVsCr/Leanbeast-favicon.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://i.ibb.co/ZXrVsCr/Leanbeast-favicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://i.ibb.co/ZXrVsCr/Leanbeast-favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=Domine&family=Inter:wght@300;400&family=Mulish&family=Roboto&family=Rowdies:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light font-weight-bolder text-white d-flex justify-content-end fixed-top navbarcolor">
<!-- Navbar Button on Right, for it to work change below div class "navbar-expand" to "collapse navbar-collapse" -->
<!-- <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="navbar-expand" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item active ">
<a class="nav-link border-right border-white-50 px-4 text-light " href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link border-right border-white-50 px-4 text-light" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link border-right border-white-50 px-4 text-light" href="#guide">Guides</a>
</li>
<li class="nav-item">
<a class="nav-link border-right border-white-50 px-4 text-light" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link border-right border-white-50 px-4 text-light " href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid my-5"> </div>
<!--Photo Content-->
<div class="jumbotron jumbotron-fluid shadow p-3 mb-5 bg-white mt-5 jumbotronmod d-flex bd-highlight flex-row user-select-none">
<div class=" p-2 bd-highlight my-0">
<img class="mypic" src="https://i.ibb.co/gvtqM6b/20200125-202640-Edited.jpg" alt="20200125-202640-Edited"> </div>
<div class=" p-2 flex-column d-flex align-items-start bd-highlight ">
<div class="mb-auto p-2 bd-highlight ml-3">
<h1 class="fit_quote">“ Fitness is not a destination, Its a way of life . . ! ” </h1>
</div>
<!-- <div class="sep"> </div> -->
<div class="d-flex flex-column p-2 bd-highlight ">
<h1 class="display-4 ml-3 mb-n2 bd-highlight myname">Vignesh G </h1>
<hr class="mb-2 ml-4 nameline shadow bg-white rounded ">
<div class="d-flex flex-row">
<p class="ml-4 myskills ">Front-End Web Developer | Efficient Learner | Graduate in Aeronautical Engineering |</p>
</div>
</div>
<div id="about"></div>
</div>
</div>
<!--About Me-->
<h1 class="display-4 px-5 text-justify content_text user-select-none"><span class="doublequotes">“</span>Hello, I am a self-taught web developer with proficiency in HTML, CSS and JavaScript with knowledge in front-end frameworks like Bootstrap, jQuery and continuing to learn Full Stack Web Development. Stepping out from graduation field and learning to code is really interesting and challenging. Besides of coding, I am a fitness lover and encourage home fitness. Here goes some of my interests: Photography notably macro clicks, Photo editing, Logo design, Creating fitness and health awarness.<span class="doublequotes">”</span> </h1>
<div class="m-5" id="guide"> </div>
<!-- Instructors-->
<div class="jumbotron jumbotron_instructors m-auto shadow rounded pt-2 user-select-none">
<h2 class="display-5 pb-1 text-center heading_text">Top three instructors for learning to code (in my view):</h2>
<div class="d-flex align-items-start">
<div class="card mb-n5 mx-3 d-flex flex-column bd-highlight " style="width: 18rem;">
<img src="https://i.ibb.co/H7hWCCL/Andrie-instructor.jpg" class="card-img-top p-2 bd-highlight cardimg" alt="Andrie-instructor">
<div class="card-body p-2 bd-highlight">
<h5 class="card-title text-center">Andrei Neagoie</h5>
<p class="card-text text-center">Senior Software Developer turned Instructor.</p>
<a href="https://www.udemy.com/user/andrei-neagoie/" target="_blank" class="btn btn-block btn-info mt-n1">Visit</a>
</div>
</div>
<div class="card mb-n5 mx-3 d-flex flex-column bd-highlight " style="width: 18rem;">
<img src="https://i.ibb.co/qnCvxKD/Rob-instructor.jpg" class="card-img-top p-2 bd-highlight cardimg" alt="Rob-instructor">
<div class="card-body p-2 bd-highlight">
<h5 class="card-title text-center">Rob Percival</h5>
<p class="card-text text-center">Web Developer And Teacher.<br> </p>
<a href="https://www.udemy.com/user/robpercival/" target="_blank" class="btn btn-block btn-info mt-n1">Visit</a>
</div>
</div>
<div class="card mb-n5 mx-3 d-flex flex-column bd-highlight " style="width: 18rem;">
<img src="https://i.ibb.co/QDQJ0d8/Andy-instructor.jpg" class="card-img-top p-2 bd-highlight cardimg" alt="Andy-instructor">
<div class="card-body p-2 bd-highlight">
<h5 class="card-title text-center">Andy Sterkowitz</h5>
<p class="card-text text-center">Self-Taught Software Developer, YouTuber.</p>
<a href="https://www.youtube.com/c/AndySterkowitz/featured" target="_blank" class="btn btn-block btn-info mt-n1">Visit</a>
</div>
</div>
</div>
</div>
<div class=" m-5"> </div>
<!-- Helping hands-->
<div class="jumbotron jumbotron_helpinghands flex-column bg-white user-select-none ">
<div class="helping_hands shadow bg-white">
<div class="helping_tint">
<h1 class="display-4 text-center flex-column heading_text">Helping Hands</h1>
<p class="lead text-center flex-column content_text">Thank you helpers. There is no greater beauty than that of the mind that runs to help.</p>
</div>
<div class="flex-row d-flex justify-content-around">
<a href="https://praveen.science/" target="_blank"><img class="helping_handsimg1 mt-4" src="https://i.ibb.co/1XvX3nL/Helping-hand1.jpg" alt="Helping-hand1" border="0"></a>
<a href="https://www.linkedin.com/company/devscripts/" target="_blank"><img class="helping_handsimg2 mt-4 ml-3" src="https://i.ibb.co/MCDhyYk/Helping-hand2.png" alt="Helping-hand2" border="0"></a>
<a href="https://letsupgrade.in/" target="_blank"><img class="helping_handsimg3 mt-5" src="https://i.ibb.co/qsQ3W7P/Helping-hand3.png" alt="Helping-hand3" border="0"></a>
</div>
</div>
</div>
<div class=" mt-5" id="projects"> </div>
<!-- Projects-->
<div class="mt-5 bg-none d-flex flex-row bd-highlight mb-3 user-select-none">
<img class="project_img p-2 bd-highlight mb-5" src="https://i.ibb.co/zPhQCy5/projector.png" alt="projector">
<h1 class="display-4 bd-highlight heading_text ml-2">Projects</h1>
</div>
<div class="project_bar user-select-none">
<div id="carouselExampleFade" class="carousel slide carousel-fade shadow-lg" data-ride="carousel">
<div class="carousel-inner">
<!-- Project 1 -->
<div class="carousel-item active" data-interval="8000">
<img src="https://i.ibb.co/ys1444b/Quote-gen-project.png" class="d-block w-100 " alt="black">
<div class="carousel-caption d-none d-md-block ">
<a href="https://vigneshg1616.github.io/Quote_Generator_Modified/" target="_blank" class="text-light">
<h5>Click Here</h5>
<p>Get inspirational quotes said by great personalities.</p></a>
</div>
</div>
<!-- Project 2 -->
<div class="carousel-item" data-interval="3000">
<img src="https://img.icons8.com/bubbles/500/000000/github.png" class="d-block w-100" alt="black1">
<div class="carousel-caption d-none d-md-block alert alert-success">
<a href="https://github.com/VigneshG1616?tab=repositories" target="_blank">
<h5>Github</h5>
<h5>Repositories</h5>
</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="m-5"> </div>
<!--Get in touch-->
<div class="jumbotron jumbotron-fluid jumbotron_bottom d-flex justify-content-between" id="contact">
<div class="">
<ul class="list-unstyled ml-5 allow_selection">
<li>
<h1 class="display-4 ml-3 contact_text user-select-none">Get in touch</h1>
</li>
<li class="mt-3 ml-5 pl-5">
<img class="phone" src="https://img.icons8.com/ios-filled/50/000000/phone-message.png" alt="phone">
<span class="ml-2 pl-1">+91 9738434916 / 7760267416</span>
</li>
<li> </li>
<li class="ml-5 pl-5">
<img class="mail" src="https://img.icons8.com/metro/26/000000/email.png" alt="mail">
<span class="ml-3">vigneshg1616@gmail.com</span>
</li>
<li> </li>
<li class="ml-5 pl-5">
<img class="location " src="https://img.icons8.com/ios-glyphs/30/000000/map.png" alt="location">
<span class="mt-3 ml-2 pl-1 user-select-none">Malleshwaram, Bangalore, India.</span>
</li>
</ul>
</div>
<div class="d-flex align-items-end">
<p class="text-secondary text-right mr-3 mb-1 user-select-none ">website by Vignesh.G</p>
</div>
<div class="icons d-flex align-items-end flex-column bd-highlight ">
<div class=" bd-highlight mr-5"> <a href="https://github.com/VigneshG1616" target="_blank"><img src="https://img.icons8.com/ios-glyphs/60/000000/github.png" alt="github-icon" border="0"></a>
<a href="https://www.linkedin.com/in/vignesh-g-0023aa116/" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABmJLR0QA/wD/AP+gvaeTAAADMUlEQVRoge2ay2sTQRyAv4qpIAFbo9VQwQfVinqv4KUK6kGQloLnHsSKNXoQsRfBkyc19W8QCt4FHwfFk6laH7eK+L5oi9g2CSrVxMMkJVl3JrO7M5M97Ae/S2Z29vftTnZnZwYSEhISEuJLh+X2NwOHgAFgN7ADyADpWnkJ+A68B2aBAvAI+Go5L6NkgHPAM6AaMp4CuVpbsWULMAmUCS/qjRKQB3oderQkBZwHipgT9UYZuAKscaMkpx94hT1Rb7wEdjkx82EEu3dVFkvAsAO/JkaB5QhJR40/wGnbknXGHAjpRs6yKyOIq9tu0cY7PWRLtg9YjIGkN4qIQY1ROtF7GleAj8AXx9IvEK9HY0xonPQ1zVf6ADDvUPqiKdlexIin1QkHfI4ddyhcBLImhCc1T5j2OfagQ+EqcD2qbAb9sfERn+MvOxYuEfGDIxfgZJ+Bo4gHXDdwBvjpWLgKnI0iHOYT728bJBtjOqxsFvGaaWfyYaICbJJJrVIIDxJsRqRDEjr19tbK7gEngK3AWmAdcAzR04LkMRig/go3CXZlZejU2wNcULSRAu4EyCXfSs6P+wFOEFVYZ5TUAyxo5nJX1oiqS/dpJGGKZY06c8CUZnvS3FXCXZqNm6ILuIqQ2iepI71zHrrDJPAbd10a4EFDnU+Ih5aXbZq5/Gqt9z8uhTf61DvsUy+tmYtUWNWlS4oy02zQ/K2s2V5RVqAS/qHZuAlk72svqp7UyIKsQCX8TrPxOPJWVqASnrWQiCveyApUwgULibjiiaxAJfwQ/f9MnKgCj2WFKuFvwHPj6dhnGpG7LyphgFtmc3GCMudWwlPov/viQBm4HbWRPPY+1k3HtaiyoD9N2+5YQmyxMMKlGAi1CtUEQmBSiOWMdkvJYgbDSy0Q78W0ftOydYaJ33LpcVuydU7FQLSKmI49adl1hVHav+VhzLaklyHEq8C17CIOurGMnbh9es/gdjbVl9WIjWk273Z9Y1qnGyU9ssANzI7KSog1X2MjKBtkEEuWBcItxlUQH/DjwHrTydnePtyD2AWwH7H/YztiSrZx+/A88IHm7cNzlvNKSEhISIgl/wC/xJHnCMHwKwAAAABJRU5ErkJggg=="></a>
<a href="https://www.facebook.com/vignesh.gopal.73/about" target="_blank"><img src="https://img.icons8.com/ios-glyphs/60/000000/facebook-new.png" alt="facebook-icon" border="0"></a>
<a href="https://twitter.com/VigneshGopal16" target="_blank"><img src="https://img.icons8.com/ios-glyphs/60/000000/twitter-circled.png" alt="twitter-icon" border="0"></a></div>
<div class=" mt-auto bd-highlight"> <a class="alert-light" href="https://icons8.com/icons" target="_blank">
<p class="alert-link mr-3 mb-1 user-select-none">Icons by: Icons8</p>
</a></div>
</div>
</div>
<!--Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
window.scrollTo(0, 0);
</script>
</body>
</html>