-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (208 loc) · 14.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Devarshi Desai's Portfolio</title>
<meta name="description" content="Dee's Portfolio">
<meta name="keywords" content="Web Developer, Front End Developer, Resume, HTML, CSS, JavaScript, Handlebars.js, Monetate, Amplience, WordPress">
<meta name="author" content="Devarshi Desai">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/dd_logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app/scss/styles.css">
</head>
<body>
<header class="header">
<div class="overlay has-fade"></div>
<nav class="container flex flex-jc-sb flex-ai-c">
<a href="/">
<img src="./images/dd_logo.png" height="80px" width="80px" class="logo" alt="Dee's Portfolio">
</a>
<a id="btnhamburger" href="#" aria-label="mobile menu" class="header_toggle hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<ul class="header_links hide-for-mobile">
<li><a href="#aboutme">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="mailto:devarshidesai2019@gmail.com">Get in Touch <i class="fa fa-external-link"></i></a></li>
</ul>
</nav>
<ul class="header_menu has-fade">
<li><a href="#aboutme">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="mailto:devarshidesai2019@gmail.com">Get in Touch <i class="fa fa-external-link"></i></a></li>
</ul>
</header>
<section class="hero_banner">
<div class="hero">
<div class="hero_image"></div>
<div class="hero_text container container-no-top-margin">
<h1>
Hi, I'm Dee! <span class="wave">👋</span><span class="job-title">Front End Developer</span>
</h1>
<p>Creating websites is more than just a job for me; it’s a passion</p>
<ul>
<li><a href="https://drive.google.com/file/d/1nwFLO621D8Ljsm4vUKLWx35fQkWZDc9-/view" target="_blank"><button type="button">Resume <i class="fa fa-external-link"></i></button></a></li>
<li><a href="#portfolio"><button type="button" class="arrow">See my work</button></a></li>
</ul>
</div>
</div>
</section>
<main>
<section class="container-section main">
<div class="main_heading container">
<div class="main_heading_bg hide-for-mobile"></div>
<h2 id="aboutme">
A Bit About Me
</h2>
<p>I absolutely love creating websites and watching a blank canvas come to life. There's something magical about turning an empty page into a vibrant, interactive space. Adding my own touch to designs, whether it's through fine details or animations that bring everything together, is incredibly rewarding.</p>
<p>With over four years of experience as a front-end developer, I've honed my skills in crafting seamless, user-friendly web interfaces. My journey in web development began with learning HTML, CSS, and JavaScript, which opened up the world of building dynamic and responsive webpages and websites.</p>
<p>For me, every project is a chance to bring a vision to life. From brainstorming ideas to refining the final product, I find joy in every step of the process. I pride myself on my attention to detail, ensuring that every element is perfectly placed and every animation flows smoothly. This approach ensures that users have a delightful and intuitive experience, making them want to return.</p>
</p>
</div>
<div class="portfolio_grid-section">
<h2 id="portfolio">Work</h2>
<p>Thing's I've made or learned at the companies I have worked for.</p>
<div class="portfolio_grid">
<article>
<img loading="lazy" src="images/Audiophile-hero.jpg" width="720" height="auto" alt="Homepage hero with a black background and a pair of overhead headphones on the right.">
<div class="portfolio_text">
<div class="portfolio_text__project--tags">
<span><p class="inprogress">In-Progress</p></span>
</div>
<h3>Audiophile</h3>
<p>The Audiophile E-commerce website will utilise HTML for structure, CSS for styling, and JavaScript for interactivity and functionality. Modern frameworks such as React will also be used to create a dynamic and responsive user experience.</p>
<p>Coming Soon!</p>
<!-- <ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Todo-App/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Todo-App" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul> -->
</div>
</article>
<article>
<img loading="lazy" src="images/todo-hero.jpg" width="720" height="auto" alt="Todo app in light and dark mode side by side">
<div class="portfolio_text">
<div class="portfolio_text__project--tags">
<span><p class="recent">Most Recent!</p></span>
</div>
<h3>Todo App</h3>
<p>The Todo-App is a task management web application built using React. It features a clean interface where users can add, edit, mark, and delete tasks, with additional functionality for toggling between light and dark modes. </p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Todo-App/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Todo-App" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
<article>
<img loading="lazy" src="images/clarks-x-frugi-hero.png"width="720" height="auto" alt="Clarks x Frugi logo on a white cloud with a red pair of shoes on the left">
<div class="portfolio_text">
<h3>Frugi x Clarks</h3>
<p>The Clarks "Frugi" collaboration page is crafted using a blend of web technologies. HTML5 structures the content, while CSS styles the page and incorporates animations, creating a visually appealing and dynamic user experience. This collaboration focuses on sustainability, highlighting eco-friendly practices and products.</p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Frugi/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Frugi" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
<article>
<img loading="lazy" src="images/clarks-x-raheem_young-hero.png" width="720" height="auto" alt="Behind the scenes of a photoshoot with Raheem Sterling and two kids smiling.">
<div class="portfolio_text">
<h3>Raheem Youth</h3>
<p>
The "Raheem Youth" content site leverages HTML5 to structure the content, CSS for styling and layout, and some JavaScript for interactive features. This site showcases Raheem Sterling's Back to School collection, incorporating responsive design principles to ensure a user-friendly experience across various devices.</p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Raheem-Youth/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Raheem-Youth" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
<article>
<img loading="lazy" src="images/clarks-x-bundlee-hero.png" width="720" height="auto" alt="A baby's outfit with a jacket, hat, overalls, and shoes, perfect for keeping the little one cozy and stylish">
<div class="portfolio_text">
<h3>Bundlee x Clarks</h3>
<p>This page was built for the Bundlee partnership with Clarks to promote sustainability and eco-friendliness by reducing clothing waste. The Clarks "Bundlee" content page utilises HTML5 to structure the content and CSS to style the page.</p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Bundlee/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Bundlee" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
<article>
<img loading="lazy" src="images/manage-hero.png" width="720" height="auto" alt="3 Different types of charts on the right to demo the daily planner">
<div class="portfolio_text">
<h3>Manage</h3>
<p>
The Manage task planner's content page is designed as a mobile-first landing page. It is built using HTML5, SCSS, and JavaScript to ensure responsiveness and an optimal user experience across devices.</p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/Manage/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/Manage" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
<article>
<img loading="lazy" src="images/johbunters-hero.png" width="720" height="auto" alt="A lady sitting on the floor with a laptop on her lap">
<div class="portfolio_text">
<h3>Jobhunters</h3>
<p>
This content page for a job-hunting agency shares information about virtual interviews and remote work. Built using HTML5, CSS, and Vanilla JavaScript, it features full mobile responsiveness. Tiny Slider JS is used for the section linking to other articles.</p>
<ul class="portfolio_text__project--links">
<li><a href="https://deed1996.github.io/JobHunters/" target="_blank" class="btn btn-primary btn-block">Demo <i class="fa fa-external-link"></i></a></li>
<li><a href="https://github.com/deed1996/JobHunters" target="_blank" class="btn btn-primary btn-block">GitHub <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</article>
</div>
</div>
</section>
</main>
<section class="container-section testimonials container">
<h2 id="testimonials">Testimonials</h2>
<p>People I've worked with have said some nice things...</p>
<div class="testimonials_slider1">
<article>
<div class="testimonials_card">
<h3>Adrian, Clarks</h3>
<p>"Dee has consistently demonstrated exceptional skill and dedication as a front-end developer. She's delivered high-quality work and made a noticeable impact."</p>
</div>
</article>
<article>
<div class="testimonials_card">
<h3>Leigh, LAT Engagements</h3>
<p>“Dee's attention to detail and dedication to maintaining our website’s functionality and aesthetics greatly contributed to our success. Her expertise in web accessibility ensured that our site was usable for everyone, which was a huge plus for our brand.”</p>
</div>
</article>
<article>
<div class="testimonials_card">
<h3>Krutika, Kruti Hair & Beauty</h3>
<p>"Working with Dee has been an absolute pleasure. Her professionalism, responsiveness, and ability to adapt to our needs make her an invaluable asset to any team."</p>
</div>
</article>
</div>
</section>
<section class="container contact" id="contactme">
<div class="contact_copy">
<p>I am always excited to connect with like-minded professionals and explore new opportunities. If you are looking for a dedicated and skilled front-end developer to join your team or collaborate on a project, feel free to reach out to me at <a class="contact_copy-email" href="mailto:devarshidesai2019@gmail.com">devarshidesai2019@gmail.com <i class="fa fa-external-link"></i></a> or connect with me on <a class="contact_copy-linkedin" target="_blank" href="https://www.linkedin.com/in/devarshidesai2019/">LinkedIn <i class="fa fa-external-link"></i></a>.</h2>
</div>
<div class="contact_cta">
<a target="_blank" href="mailto:devarshidesai2019@gmail.com"><button type="button" class="button_white">Get in touch <i class="fa fa-external-link"></i></button></a>
</div>
</section>
<footer class="footer">
<div class="footer_copyright">
<p>© 2024 all rights reserved</p>
<p>Version 1</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>