-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (156 loc) · 8.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="pictures/favicon.png" type="image/x-icon">
</head>
<body>
<nav id="navbar"><!-- for the navigation bar -->
<a href="#landing--page"> <div class="logo"><img src="pictures/Shubh_AvatarSmiling%202.png" alt="logo"></div></a>
<div id="desktop-nav" class="nav-items">
<a href="#heading--designs">Project</a>
<a href="#asking">Service</a>
<a href="https://agencysynapse.com/" target="_blank">Team</a>
<a href="connect%20page.html">Contact</a>
</div>
<div class="mobile-menu-icon" onclick="toggleMobileMenu()">
☰ Menu
</div>
<div class="mobile-menu" id="mobileMenu">
<a href="#heading--designs">Project</a>
<a href="#mobile-plane">Service</a>
<a href="https://agencysynapse.com/" target="_blank">Team</a>
<a href="connect%20page.html">Contact</a>
</div>
</nav>
<section class="main--container" id="landing--page"> <!-- for the main image and the User name along with short description and the button-->
<br>
<br>
<br>
<img id="desktop-img" src="pictures/Group%2055.png" alt="desktop image">
<img id="mobile-img" src="pictures\Responsive img\Shubh.png" alt="mobile image">
<br> <br> <br> <br> <br> <br>
<p id="text">
Hey There! I am Shubh Mehrotra, a sophomore UI UX Designer who loves creating beautiful designs and bringing them to life with his team.
</p>
<a href="connect%20page.html" target="_blank"><button id="connect">
Let's Connect
</button></a>
</section>
<div id="moving-image"><img src="pictures/paperplane.png" alt=""></div>
<!-- for the explanation part along with my illustration -->
<section class="main--container">
<div id="arms-crossed-mobile"><img src="pictures/Shubh_AvatarCheeky.png" alt=""></div>
<div class="holder">
<p id="description">
I have been working on creating Designs for a while now. It all started with using Canva and making presentations for my assignments. The animations and templates made me dive into the world of creating UI Designs and learning Photoshop as well as creating a set of illustrations that look like me <3
</p>
<div id="arms-crossed"><img src="pictures/Shubh_AvatarCheeky.png" alt=""></div>
</div>
<img id="bar-mobile" src="pictures\Responsive img\tools.png">
<div id="bar">
<img id="figma" src="pictures/lucide_figma.png" alt="">
<img id="lunacy" src="pictures/lunacy.png" alt="">
<img id="ps" src="pictures/Ps.png" alt="">
<img id="webf" src="pictures/webflow.png" alt="">
<img id="ux" src="pictures/Group%207.png" alt="">
</div>
</section>
<br><br><br><br><br><br>
<section class="main--container">
<p id="heading--designs">MY DESIGNS</p>
<br><br><br><br>
<div class="holder">
<div class="project--placement" id="left-element">
<div class="centere">
<a href="https://www.figma.com/proto/IjKBmZBNKESQa8DUguGnwV/CueSource-prototype?page-id=0%3A1&type=design&node-id=1-3&viewport=230%2C245%2C0.03&t=MvjQ9tyF1krwHHkg-0&scaling=min-zoom&starting-point-node-id=1%3A3" target="_blank">
<img class="project--image" src="pictures/cuesource.jpg" alt="CueSource">
</a>
<p class="head--pro">CUESOURCE WEBSITE DESIGN</p>
<p class="sub--pro">A PLATFORM CREATED OPEN SOURCE (DEPLOYMENT UNDER PROGRESS)</p>
</div>
<div class="centere">
<a href="https://www.figma.com/proto/1Qhd8JloWywslJPEGW5p5N/Untitled?page-id=0%3A1&type=design&node-id=15-2&viewport=213%2C200%2C0.11&t=Nn7W8Z1KuOinCKMb-1&scaling=min-zoom&starting-point-node-id=15%3A2&mode=design" target="_blank">
<img class="project--image" src="pictures/project.jpg" alt="Galactic Hub">
</a>
<p class="head--pro">galactic hub design</p>
<p class="sub--pro">A UI Design of a galaxy themed webpage with smooth animations</p>
</div>
</div>
<div class="project--placement" id="right-element">
<div class="centere">
<a href="https://www.figma.com/proto/O7lVVKNFVlApymH0bA1t5F/Foundit-Opensource-contribution?page-id=0%3A1&type=design&node-id=2-490&viewport=103%2C308%2C0.12&t=BALa1jMu4kmg7Kqn-1&scaling=min-zoom&starting-point-node-id=2%3A490&mode=design" target="_blank">
<img class="project--image" src="pictures/zuno.jpg" alt="Zuno Redesign">
</a>
<p class="head--pro">Redesign of foundit.com landing page</p>
<p class="sub--pro">a design for the webpage of foundit.com by me</p>
</div>
<div class="centere">
<a href="https://www.figma.com/proto/LyFrKptkEwuiLw3V8JEIEy/TOURISM-UI?page-id=0%3A1&type=design&node-id=6-64&viewport=121%2C160%2C0.03&t=hs4oXQFbhAbUtvwI-1&scaling=scale-down&starting-point-node-id=6%3A64&mode=design" target="_blank">
<img class="project--image" src="pictures/tourism.jpg" alt="tourism site">
</a>
<p class="head--pro">Tourism site redesigned from inspiration</p>
<p class="sub--pro">The redesign of a UI design i stumbled upon. It has smooth animations too</p>
</div>
</div>
</div>
</section>
<section class="main--container">
<div class="plane--2">
<img src="pictures/paper%20plane.png" alt="flying plane illustration">
</div>
<p id="asking">What I <br>can Do for you?</p>
<img id="mobile-plane" src="pictures\Responsive img\aeroplanr.png" alt="plane">
<div class="holder1">
<div id="hands--crossed"><img src="pictures/Shubh_AvatarExplaining.png" alt="I am explaining here"></div>
<div>
<p id="small-text1">I am a designer who has a knack of seeking inspirations and learning new tools. I can take your idea and turn it into awesome Mobile/Web Designs. You can even contact me for big projects since I also work on full stack projects in our agency: Synapse.</p>
<p id="big--text1">UI/UX design<br>ux reports<br>Webflow Design</p>
</div>
</div>
<div class="holder-mobile">
<div id="mobile-part">
<p id="small-text1">I am a designer who has a knack of seeking inspirations and learning new tools. I can take your idea and turn it into awesome Mobile/Web Designs. You can even contact me for big projects since I also work on full stack projects in our agency: Synapse.</p>
<div id="mobile-placement">
<div id="hands--crossed"><img src="pictures/Shubh_AvatarExplaining.png" alt="I am explaining here"></div>
<p id="big--text1">UI/UX design<br>ux reports<br>Webflow Design</p>
</div>
</div>
</div>
</section>
<section class="main--container">
<p class="big--text2">Meet Chefio!</p>
<p class="small-text2">This is Chefio, a UI design prototype with responsive elements. Click on the image below to be redirected to the prototype ; )</p>
<div id="chefio--image1"><a href="https://www.figma.com/community/file/1263499442324790289/Chefio" target="_blank"> <img src="pictures/ipad-pro-mockup%202.png" alt="My main project"></a></div>
<div id="chefio--image2"><a href="https://www.figma.com/community/file/1263499442324790289/Chefio" target="_blank"> <img src="pictures\Responsive img\chefio.png" alt="My main project"></a></div>
<br><br>
<p class="big--text2">Meet Medicol!</p>
<p class="small-text2">This is Medicol. An app prototype with responsive elements with a smooth UI experience and a excellent functionality. Click on the image below to be redirected to the prototype ; )</p>
<div id="medicol--image1"><a href="https://www.figma.com/community/file/1263245891675291289/Medicol-App-UI-Design" target="_blank"> <img src="pictures/Medico%20Mockup%20main.png" alt="My main project"></a></div>
<div id="medicol--image2"><a href="https://www.figma.com/community/file/1263245891675291289/Medicol-App-UI-Design" target="_blank"> <img src="pictures\Responsive img\Medicol.png" alt="My main project"></a></div>
<br><br><br>
<div id="trigger-area">
<div id="conclusion">
<p>Hey There!, Thanks for going through my portfolio website. As a <b>budding Designer + Full Stack Developer</b>, I tend to be updated with the recent trends and keep upskilling myself. Having worked for my College clubs I have created a lot more designs than those mentioned here! Hit me up to know more about me! </p>
</div>
<div id="pointing">
<img src="pictures/point%20one.png" alt="">
</div>
<br> <br>
<div id="end-part">
<p id="ending--text">CONNECT WITH ME</p>
<div id="logos">
<a href="https://www.behance.net/shubhmehrotra" target="_blank"><img src="pictures/behance.png" alt="" class="element"></a>
<a href="https://www.linkedin.com/in/shubhmehrotra19" target="_blank"><img src="pictures/linkedin.png" alt="" class="element"></a>
<a href="mailto:[email protected]" target="_blank"><img src="pictures/email.png" alt="" class="element"></a>
<a href="https://discord.com/channels/@me" target="_blank"><img src="pictures/discord.png" alt="" class="element"></a>
</div>
</div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>