-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (212 loc) · 9.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="logo">
<img src="image/logo.png" alt="Logo" width="100px" height="100px">
</div>
<div class="border">
<h2>toggle :</h2>
<div class="day-night-toggle">
<input type="checkbox" id="toggle">
<label for="toggle"></label>
</div>
</div>
</header>
<!-- Home Section -->
<section id="home">
<h1>Welcome to my Portfolio Website</h1>
<p>My name is GOPAL BHARDWAJ , I'm a front-end developer based in . I have developed many types of front-ends from well know DJ applications to Ecommerce booking platforms.
I'm passionate about cutting-edge, pixel-perfect, beautiful interfaces and intuitively implemented UX.</p>
</section>
<!-- About Section -->
<section id="about-me">
<h2>About Me</h2>
<div class="about-me-container">
<div class="profile-picture">
<img src="image/profile pic'.jpeg" alt="Your Profile Picture">
</div>
<div class="about-me-content">
<p>Hello! I'm Gopal Bhardwaj, a passionate and creative fullstack developer with two years of experience in web-development.</p>
<p>I specialize in software development and have a strong background in html,css ,js many more.</p>
<p>When I'm not working, you can find me watching movies and analysis other fields.</p>
<a href="image/resume.pdf"></a><button>Download Resume</button></a>
</section>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<h2 class="section-title">Technical Skills</h2>
<div class="skills-container">
<div class="skill-box">
<h3 class="skill-title">Programming Languages</h3>
<ul class="skill-list">
<li>JavaScript <img src="image/js.png" alt="Logo" width="50px" height="50px"></li>
<li>Python <img src="image/python.png" alt="Logo" width="50px" height="50px"></li>
<li>C++ <img src="image/c-.png" alt="Logo" width="50px" height="50px"></li>
</ul>
</div>
<div class="skill-box">
<h3 class="skill-title">Front-end Development</h3>
<ul class="skill-list">
<li>HTML5 <img src="image/html5.png" alt="Logo" width="50px" height="50px"></li>
<li>CSS3 <img src="image/css-3.png" alt="Logo" width="50px" height="50px"></li>
<li>Tailwind Css <img src="image/wind.png" alt="Logo" width="50px" height="50px"></li>
<li>React <img src="image/react.png" alt="Logo" width="50px" height="50px"></li>
<li>Angular <img src="image/angular-mountain.png" alt="Logo" width="40px" height="40px"></li>
</ul>
</div>
<div class="skill-box">
<h3 class="skill-title">Back-end Development</h3>
<ul class="skill-list">
<li>Node.js <img src="image/nodejs.png" alt="Logo" width="50px" height="50px"></li>
<li>Express <img src="image/online.png" alt="Logo" width="50px" height="50px"></li>
<li>Django <img src="image/django.png" alt="Logo" width="50px" height="50px"></li>
</ul>
</div>
<div class="skill-box">
<h3 class="skill-title">Databases</h3>
<ul class="skill-list">
<li>MySQL <img src="image/my sql.png" alt="Logo" width="50px" height="50px"></li>
<li>MongoDB <img src="image/icons8-mongo-db-48.png" alt="Logo" width="50px" height="50px"></li>
</ul>
</div>
<div class="skill-box">
<h3 class="skill-title">Operating Systems</h3>
<ul class="skill-list">
<li>Windows <img src="image/icons8-windows-30.png" alt="Logo" width="50px" height="50px"></li>
<li>Linux <img src="image/icons8-linux-50.png" alt="Logo" width="50px" height="50px"></li>
<li>macOS <img src="image/icons8-macos-50.png" alt="Logo" width="50px" height="50px"></li>
</ul>
</div>
</div>
</section>
<section id="certifications">
<h2>Certifications</h2>
<div class="certifications-container">
<div class="certification">
<img src="image/ECOMMERCEWEB.png" alt="Project Image">
<h3>Ecommerce Application Using React</h3>
<p>Issued by: CETPA INFOTECH PVT LTD</p>
<p>Date: AUG 2023</p>
</div>
<div class="certification">
<img src="image/ETHICAL HACKING.png" alt="Project Image">
<h3>Ethical Hacking certification</h3>
<p>Issued by: SIMPLI LEARNING</p>
<p>Date: JULY 2021</p>
</div>
<div class="certification">
<img src="image/HACKING MOBILE.png" alt="Project Image">
<h3>Ethical Hackinng On Mobile Platforms</h3>
<p>Issued by: GREAT LEARNING</p>
<p>Date: JUNE 2021</p>
</div>
<div class="certification">
<img src="image/DEGITAL MARKEGING.png" alt="Project Image">
<h3>Google Digital Marketing Certifiate</h3>
<p>Issued by: GOOGLE Online Courses</p>
<p>Date: JULY 2020</p>
</div>
<div class="certification">
<img src="image/PYTHON INTERNSHALA.png" alt="Project Image">
<h3>Programming with Python Training</h3>
<p>Issued by: INTERNSHALA Online Courses</p>
<p>Date: December 2023</p>
</div>
<div class="certification">
<img src="image/PROGRAMING WITH PYTHON.png" alt="Project Image">
<h3>PROGRAMMING WITH PYTHON</h3>
<p>Issued by: NSDC SKILL INDIA Online Courses</p>
<p>Date: December 2023</p>
</div>
</div>
</section>
<!-- Project Section -->
<section id="project">
<h1>Projects</h1>
<div class="project-box">
<div class="project">
<img src="image/html ptoject.png" alt="Project Image">
<h2>Project 1</h2>
<p>In this project, I created a responsive website , a sustainable SOLUTION FOR showcasing YOURSELF . The website features a modern design, easy navigation, and a responsive layout that adapts to different screen sizes and devices.</p>
</div>
<div class="project">
<img src="image/cssproject.png" alt="Project Image">
<h2>Project 2</h2>
<p>In this project, I created a visually stunning landing page . The goal was to design a page that would capture the essence of the brand and entice visitors to explore the website further.
The landing page features a modern and sleek design, with a focus on showcasing the FOOD. I used CSS to create a responsive layout, animations, and interactive elements that enhance the user experience.</p>
</div>
<div class="project">
<img src="image/LINUX PROJECT.png" alt="Project Image">
<h2>Project 3</h2>
<p>The dark web, also known as the deep web or invisible web, refers to the part of the internet that is not accessible through traditional search engines and browsers. This project aims to provide a comprehensive guide on how to access the dark web, including the necessary tools, software, and precautions to take.
The project involves researching and documenting the various methods and techniques used to access the dark web, including the use of Tor browsers, VPNs, and other anonymity tools. The project also explores the legal and ethical implications of accessing the dark web, and provides guidance on how to navigate the dark web safely and responsibly.</p>
</div>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact">
<h2 class="section-title">Get in Touch</h2>
<div class="contact-container">
<div class="contact-info">
<h3 class="contact-title">Contact Information</h3>
<ul class="contact-list">
<li>
<i class="fas fa-envelope"></i>
<a href="bhardwaj520gopal@gmail.com">bhardwaj520gopal@gmail.com</a>
</li>
<li>
<i class="fas fa-phone"></i>
<a href="tel:+919350237621">+919350237621</a>
</li>
<li>
<i class="fas fa-linkedin"></i>
<a href="https://www.linkedin.com/in/gopal-bhardwaj-2531401b2">LinkedIn</a>
</li>
<li>
<i class="fas fa-github"></i>
<a href="https://github.com/GOPALBHARDWAJ520">GitHub</a>
</li>
</ul>
</div>
<div class="contact-form">
<h3 class="contact-title">Send a Message</h3>
<form>
<input type="text" id="name" name="name" placeholder="Name">
<input type="email" id="email" name="email" placeholder="Email">
<textarea id="message" name="message" placeholder="Message"></textarea>
<button type="submit">Send</button>
</form>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<div class="footer-button">
<a href="tel:+919350237621">Call</a>
</div>
<div class="footer-button">
<a href="bhardwaj520gopal@gmail.com">Email</a>
</div>
<p>© 2024 Portfolio Website</p>
</footer>
</body>
</html>