-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (174 loc) · 9.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<script src="https://kit.fontawesome.com/1a48c47b52.js" crossorigin="anonymous"></script>
<title>Vipul's Portfolio</title>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
<a href="index.html" class="nav__logo"><span>V</span>ipul.</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">Work</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
</ul>
<!-- close button -->
<div class="nav__close" id="nav-close">
<i class="fa-solid fa-xmark"></i>
</div>
</div>
<!-- toggle button -->
<div class="nav__toggle" id="nav-toggle">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<main class="main">
<section class="container section home" id="home">
<img src="152047166.jpg" alt="image 1" class="home__img1">
<p class="home__name">Hi, I'm Vipul 👋</p>
<h1 class="home__title">WEB DEVELOPER.</h1>
<p class="home__intro">Passionate <strong>Web Developer</strong> skilled in creating dynamic and
user-centric websites through proficient coding
and innovative design integration</p>
<button class="home__reachoutbtn btn"><a href="mailto: [email protected]">Reach out</a></button>
</section>
<section class="container section about" id="about">
<div class="about__content">
<h2 class="about__title">About</h2>
<p class="about__description">I'm <span>Vipul yadav</span>, a dedicated <span>web developer</span> with a talent for creating
stylish and useful online
solutions.</p>
<p class="about__description">
With expertise in HTML, CSS, and JavaScript, I specialize in translating creative concepts into
interactive
websites that captivate users.</p>
<p class="about__description"> Continuously exploring new frameworks and staying updated with industry
trends fuels my drive to create cutting-edge and user-friendly digital experiences</p>
<hr class="about__hr">
<h3 class="about__subtitle">Skills</h3>
<div class="about__ul-container">
<ul class="about__ul list1">
<li class="about__list">JavaScript</li>
<li class="about__list">CSS</li>
<li class="about__list">HTML</li>
</ul>
<ul class="about__ul list2">
<li class="about__list">Bootstrap</li>
<li class="about__list">NodeJS</li>
<li class="about__list">MongoDB</li>
</ul>
</div>
</div>
<div class="about__img">
<img src="123456.jpeg" alt="profile image">
</div>
</section>
<section class="work container section" id="work">
<h2 class="work__title">Projects</h2>
<div class="work__container">
<!-- Project 1 -->
<div class="work__img-wrapper work__image1">
<img class="image__project1" src="bmw.JPG" alt="Landing Page website" />
</div>
<div class="work__project work__content1">
<h3 class="work__project-subtitle">Landing Page</h3>
<p class="work__project-description1">
Created a Responsive Website Landing Page using HTML, CSS, JS.
</p>
<p class="work__project-description2">
It has Interactive navigation menu that changes color or style when scrolled or when hovering
over a menu item. The navigation menu have a fixed position and be visible on all pages.
</p>
<button class="btn work__project-btn"><a href="https://github.com/Vipul-Ydv/PRODIGY_WD_01">Github
Repo</a></button>
<button class="btn work__project-btn"><a href="https://vipul-ydv.github.io/PRODIGY_WD_01/">WEBSITE</a></button>
</div>
<!-- Project 2 -->
<div class="work__project work__content2">
<h3 class="work__project-subtitle">Stopwatch</h3>
<p class="work__project-description1">
Created a stopwatch web application, used HTML, CSS, and JavaScript. HTML is used to structure
the elements of the application.
</p>
<p class="work__project-description2">
By implementing functions for starting, pausing, and resetting the stopwatch, as well as
tracking and displaying lap times.
</p>
<button class="btn work__project-btn"><a href="https://github.com/Vipul-Ydv/PRODIGY_WD_02">Github
Repo</a></button>
<button class="btn work__project-btn"><a href="https://vipul-ydv.github.io/PRODIGY_WD_02/">WEBSITE</a></button>
</div>
<div class="work__img-wrapper work__image2">
<img class="image__project2" src="STOPWATCH.JPG" alt="Stopwatch website" />
</div>
<!-- Project 3 -->
<div class="work__img-wrapper work__image3">
<img class="image__project3" src="TIK.JPG" alt="tic tac toe game website" />
</div>
<div class="work__project work__content3">
<h3 class="work__project-subtitle">Tic-Tac-Toe Game</h3>
<p class="work__project-description1">
Created a tic-tac-toe web application, using HTML, CSS, and JavaScript.
</p>
<p class="work__project-description2">
By implementing functions to handle user clicks, track game state, and check for winning
conditions ,created an interactive and engaging tic-tac-toe game.
</p>
<button class="btn work__project-btn"><a href="https://github.com/Vipul-Ydv/PRODIGY_WD_03">Github
Repo</a></button>
<button class="btn work__project-btn"><a href="https://vipul-ydv.github.io/PRODIGY_WD_03/">WEBSITE</a></button>
</div>
<!-- Project 4 -->
<div class="work__project work__content4">
<h3 class="work__project-subtitle">Weather Application</h3>
<p class="work__project-description1">
Created a web page that fetches weather data from a weather API based on the user's location or
a user-inputted location.
</p>
<p class="work__project-description2">
Display the current weather conditions, temperature, and other relevant information.
</p>
<button class="btn work__project-btn"><a href="https://github.com/Vipul-Ydv/PRODIGY_WD_05">Github
Repo</a></button>
<button class="btn work__project-btn"><a href="https://vipul-ydv.github.io/PRODIGY_WD_05/">WEBSITE</a></button>
</div>
<div class="work__img-wrapper work__image4">
<img class="image__project4" src="WEATHER.JPG" alt="weather application website" />
</div>
</div>
</section>
<section id="contact" class="contact container section">
<h2 class="contact__title">Get In Contact</h2>
<p 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.
</p>
<a
class="contact__btn btn"
href="mailto:[email protected]"
target="_blank"
>React Out</a
>
</section>
</main>
<footer class="footer container section">
<h3 class="footer__title">~ Vipul Yadav ~</h3>
</footer>
</main>
</body>
</html>