-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
252 lines (205 loc) · 15.4 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
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vidya Thotangare Portfolio</title>
<meta name="description" content="I am a Front-end designer/developer and Database developer who love to create attractive websites and code complex alogorithms."/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/Dstyles.css">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
</head>
<body>
<!-- ======================================================================================================== -->
<!-- Header NAV BAR -->
<!-- ======================================================================================================== -->
<nav id="header-nav" class="navbar navbar-default">
<!-- container-fluid = stretches all the edges of browser + 15 px padding both sides;
container = changes its width with browser (responsive) will sit in middle-->
<div class="container">
<div class="navbar-header">
<!-- MOBILE RIGHT MENU; data-target="#collapsable-nav" will be customized by us-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="index.html"><h2>Vidya Thotangare</h2></a> -->
<a class="navbar-brand" href="index.html"><img class='logoimage' alt="Brand" src="images/vidlogo.png"></a>
</div> <!-- .navbar-header -->
<div id="collapsable-nav" class="collapse navbar-collapse">
<!-- MENU items for left-->
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li class="visible-xs"> <a href="index.html"> <br class="hidden-xs"> Home</a> </li>
<li> <a href="#profile"> <br class="hidden-xs">Profile</a> </li>
<li> <a href="#skills"> <br class="hidden-xs"> Skills</a> </li>
<li> <a href="#projects"> <br class="hidden-xs"> My Work</a> </li>
</ul><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div> <!-- .container -->
</nav><!-- #header-nav -->
<!-- ======================================================================================================== -->
<!-- Main Content -->
<!-- ======================================================================================================== -->
<div id="hm-main-content" class="container">
<!-- Row1 -->
<div id="hm-row1" class="row">
<div id=hdrbrdr style ="height: 15px; width:100%"> </div>
<div id="hm-row1res" class="col-sm-12 col-lg-12 col-md-12">
<!-- <div class="addspace" style ="height: 150px; width:100%"> </div> -->
<div class='addspace'> </div>
<h1 class='text-center'>Vidya Thotangare</h1>
<h2 class='text-center'>Front-end Developer/Designer and Database Developer</h2>
<h3 class='text-center'>with an Aptitude for
<span style="font-family: 'Inconsolata', monospace; color:#FEE400; font-weight:bold; font-style:normal;">{Logic}</span>
and Zeal for
<span style="font-family: 'Architects Daughter', cursive; color:#FEE400; font-style:normal; font-size: 120%">Creativity </span>.</h3>
<div class='addspace'> </div>
</div> <!-- End Row1 Responsive-->
</div> <!-- End Row1 -->
<!-- ======================================================================================================== -->
<div id="hm-row2" class="row">
<div id="hm-row21res" class="col-sm-12">
<h1 id="profile" class = "text-center">Profile</h1>
<div class = "text-center"><img alt="line" src="images/line.png" height="40"> </div>
<h3>I am a Website designer, Front End Developer and Database developer from Houston, Texas.</h3>
<!-- <p><span>I enjoy playing with colors and bring life to website . On the other side I love coding complex alogorithms. </span></p> -->
<p class="txtjstfy">I enjoy playing with colors, content and images thereby infusing life into a story. I use these skills to enhance the user experience with the website. On the other side I love coding complex algorithms and using technology to automate routine tasks. </p>
</div>
<div id="hm-row22res" class="col-sm-12 col-lg-12 col-md-12">
<h3>A brief background</h3>
<p class="txtjstfy">I began my career as Database Administrator. With growing experience my role started shifting from development towards
infrastructure. This shift made me realize my love for coding and inclination towards creativity.</p>
<p class="txtjstfy">I started searching for career option that is a perfect blend of logic and creativity. This quest brought me to Web development and I could totally connect with this stream. I love to learn and adopt new technologies. I am a self-starter and fast learner.</p>
</div>
</div> <!-- End Row 2 -->
<!-- ======================================================================================================== -->
<div id="hm-row3" class="row">
<div id="hm-row3hres" class="col-sm-12">
<h1 id="skills" class = "text-center">Technical Skills</h1>
<div class = "text-center"><img alt="line" src="images/line.png" height="40"> <br /></div>
</div>
<div id="hm-row31res" class="col-sm-4 col-lg-4 col-md-4">
<div><h3>Graphic Design : </h3>
Create illustrations and vectors for icons, logo, infographics and wireframes using CorelDraw, Adobe Photoshop, and Adobe Illustrator. </div>
</div>
<div id="hm-row32res" class="col-sm-4 col-lg-4 col-md-4">
<div> <h3>Development : </h3>
HTML5, CSS3, JavaScript, JQuery, Ajax, Python 2.7/3, Python CGI, Django, Unix Shell scripts, JSON, XML, GitHub, Bootstrap3, Wordpress. </div>
</div>
<div id="hm-row33res" class="col-sm-4 col-lg-4 col-md-4">
<div> <h3>Database: </h3>
MySQL/Oracle: Writing SQL queries, PL/SQL, Developing Packages, Stored Procedures, Functions, Triggers, Views etc.</div>
</div>
</div><!-- End Row 3 -->
<!-- ======================================================================================================== -->
<div id="hm-row4" class="row">
<div id="hm-row4res1" class="col-sm-12 col-lg-12 col-md-12">
<h1 id="projects" class="text-center">Website Development</h1>
<div class = "text-center"><img alt="line" src="images/line.png" height="40"> <br /></div>
</div>
<div id="hm-row4res2" class="col-sm-12 col-lg-12 col-md-12">
<div> <h3> <a href="http://www.ojasvishambhu.com/" target="_blank">1] Ojasvi Shambhu </a> </h3> </div>
<p class="txtjstfy"> Ojasvishambhu.com is an informative website that represents Indian Sacred Geometry Mandala Art in digital platform. I was solely responsible for :</p>
<ul>
<li> content development </li>
<li> designing the page layouts </li>
<li> writing blog articles </li>
<li> creating icons, logo and artwork of website </li>
</ul>
<br />
<div class='text-center visible-lg visible-sm visible-md'><a href="http://www.ojasvishambhu.com/" target="_blank"><img class="fullimg" alt="ojasvi shambhu" src="images/osb.png" width=100% height=100% ></a></div>
<div class='text-center visible-xs'><a href="http://www.ojasvishambhu.com/" target="_blank"><img class="fullimg" alt="ojasvi shambhu" src="images/oss.png" width=100% height=100% ></a></div>
</div>
<div id="hm-row4res3" class="col-sm-12 col-lg-12 col-md-12">
<div> <br /> <h3> <a href="http://slycc.org/" target="_blank"> 2] Sugar Land Youth Cricket Club </a> </h3> </div>
<p class="txtjstfy">SLYCC is a non-profit cricket sports team in Southwest Houston. They wanted a responsive website that promotes cricket with focus on their core values of fun and sportsmanship. I played a crucial role in planning the content, wireframing, prototyping and designing the page layouts, icons for slycc website. The website was developed using HTML, CSS, and JavaScript with Bootstrap Technology.</p><br />
<div class='text-center visible-lg visible-sm visible-md'><a href="http://slycc.org/index.html" target="_blank">
<img class="fullimg" alt="slycc" src="images/slyccb.png" width=100% height=100% ></a></div>
<div class='text-center visible-xs'><a href="http://slycc.org/index.html" target="_blank">
<img class="fullimg" alt="slycc" src="images/slyccs.png" width=100% height=100% ></a></div>
</div>
<div id="hm-row4res4" class="col-sm-12 col-lg-12 col-md-12">
<div> <br /> <h3> <a href="https://vidtho.github.io/Coursera-webdev/restaurantwebsite/" target="_blank"> 3] David Chu China Bistro - Mock restaurant </a> </h3> </div>
<p class="txtjstfy"> This website is my variation of original responsive website <a target="_blank" href="http://www.davidchuschinabistro.com"> David Chu China Bistro </a>,
that was created from scratch as a curriculum of Coursera.org course: HTML, CSS, and Javascript for Web Developers from John Hopkins University. I changed the look and feel of the website. I also implemented extra features like fetching data from local JSON and HTML files to display dynamic content using AJAX requests, auto-generate copyright year etc. </p> <br />
<div class='text-center visible-lg visible-sm visible-md'><a href="https://vidtho.github.io/Coursera-webdev/restaurantwebsite/index.html" target="_blank">
<img class="fullimg" alt="restaurant website" src="images/mockrestaurantb.png" width=100% height=100% > </a></div>
<div class='text-center visible-xs'><a href="https://vidtho.github.io/Coursera-webdev/restaurantwebsite/index.html" target="_blank">
<img class="fullimg" alt="restaurant website" src="images/mockrestaurants.png" width=100% height=100% > </a></div><br />
</div>
</div>
<!-- ======================================================================================================== -->
<div id="hm-row5" class="row">
<div id="hm-row5res1" class="col-sm-12 col-lg-12 col-md-12">
<h1 id="art" class="text-center">Digital Art</h1>
<div class = "text-center"><img alt="line" src="images/line.png" height="40"> <br /></div>
</div>
<div id="hm-row5res2" class="col-sm-12 col-lg-12 col-md-12">
<p class="txtjstfy"> Kolam is a traditional Indian Sacred Geometry Art composed of curved loops and lines in Fibonacci series. These intricate patterns are believed to be the geometric manifestations of soothing sound vibrations. Being a Kolam artist from childhood, I blend the soothing symmetric patterns of Nature with mandalas in Digital platform. In my website <a href="http://www.ojasvishambhu.com/" target="_blank">ojasvishambhu.com</a> , my learning related to this field is documented and free high-resolution images of my artwork is available. </p><br />
<p class="txtjstfy"> My art is showcased in India's most popular portal for kolam art <a href="http://www.ikolam.com/gallery/94453" target="_blank"> ikolam.com</a> and other websites like <a href="https://www.shutterstock.com/g/Vidya+Thotangare/sets/52590550" target="_blank">Shutter Stock</a>, <a href="https://fineartamerica.com/profiles/ojasvi-shambhu.html" target="_blank">Fine Art America</a> , <a href="http://ojasvishambhu.deviantart.com/" target="_blank">Devian Art</a><br />
</p><br />
</div>
<div id="hm-row5res31" class="col-sm-12 col-md-6 col-lg-6">
<div class='text-center visible-lg visible-md'><a href="https://www.shutterstock.com/g/Vidya+Thotangare/sets/52590550" target="_blank"><img class="fullimg" alt="Vidya Thotangare shutterstock" src="images/vt_ss.png" width=105% height=105% ></a></div>
<div class='artimg text-center visible-sm visible-xs'><a href="https://www.shutterstock.com/g/Vidya+Thotangare/sets/52590550" target="_blank"><img class="fullimg" alt="Vidya Thotangare shutterstock" src="images/vt_ss.png" width=80% height=80% ></a></div>
</div>
<div id="hm-row5res32" class="col-sm-12 col-md-6 col-lg-6">
<div class='text-center visible-lg visible-md'><a href="http://www.ikolam.com/gallery/94453" target="_blank"><img class="fullimg" alt="Vidya Thotangare ikolam" src="images/vt_ik.png" width=97% height=97% ></a></div>
<div class='artimg text-center visible-sm visible-xs'><a href="http://www.ikolam.com/gallery/94453" target="_blank"><img class="fullimg" alt="Vidya Thotangare ikolam" src="images/vt_ik.png" width=80% height=80% ></a></div>
</div>
</div>
</div>
<!-- End Main Content ##############################################################################-->
</div> <!-- End Container -->
<br />
<!-- ======================================================================================================== -->
<!-- Footer -->
<!-- ======================================================================================================== -->
<div id=ftrbrdr style ="height: 15px; width:100%"> </div>
<footer class="panel-footer">
<div id="ft-container" class="container">
<!-- Row 2 -->
<div id="ft-row2" class="row">
<div id="ft-subrow2">
<section id="ft-row22res" class="ftr col-sm-4">
<h3> Projects:</h3>
<a href="http://www.ojasvishambhu.com/" target="_blank"><span> Ojasvi Shambhu </span></a><br>
<a href="http://slycc.org/" target="_blank"><span> Sugar Land Cricket Club </span></a><br>
<a href="https://vidtho.github.io/Coursera-webdev/restaurantwebsite/" target="_blank"><span> David Chu China Bistro </span></a><br>
<hr class="visible-xs">
</section>
<section id="ft-row23res" class="ftr col-sm-4">
<h3> Contact me:</h3>
<a href="2818453702"> <span> Tel: (281) 845-3702 </span></a><br>
<a href="mailto:[email protected]?subject=Portfolio%20Website" target="_blank"> <span> Email: [email protected]</span></a>
<hr class="visible-xs">
</section>
</div> <!-- subrow 2-->
<section id="ft-row24res" class="ftr col-sm-4">
<h3> Portfolio:</h3>
<a href="index.html"> Home</a>
<a href="#profile"> <br>Profile</a>
<a href="#skills"> <br> Skills</a>
</section>
</div> <!-- subrow 2-->
</div> <!-- row 2-->
<!-- Row 3 -->
<div id="copyright">2016</div>
</div> <!-- End Container -->
</footer>
<!-- ======================================================================================================== -->
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>