Skip to content

Commit af06075

Browse files
manojs05manojs05
authored
Add files via upload
0 parents  commit af06075

18 files changed

+923
-0
lines changed

‎assets/about-pic.png

589 KB
Loading

‎assets/arrow.png

15.2 KB
Loading

‎assets/checkmark.png

17.8 KB
Loading

‎assets/education.png

8.42 KB
Loading

‎assets/email.png

18.3 KB
Loading

‎assets/experience.png

9.68 KB
Loading

‎assets/github.png

8.44 KB
Loading

‎assets/linkedin.png

12.6 KB
Loading

‎assets/profile-pic-2.png

1.23 MB
Loading

‎assets/profile-pic.png

424 KB
Loading

‎assets/project-1.png

181 KB
Loading

‎assets/project-2.png

493 KB
Loading

‎assets/project-3.png

510 KB
Loading

‎assets/resume-example.pdf

912 KB
Binary file not shown.

‎index.html

+382
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,382 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>My Portfolio</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link rel="stylesheet" href="mediaqueries.css" />
10+
</head>
11+
<body>
12+
<nav id="desktop-nav">
13+
<div class="logo">John Doe</div>
14+
<div>
15+
<ul class="nav-links">
16+
<li><a href="#about">About</a></li>
17+
<li><a href="#experience">Experience</a></li>
18+
<li><a href="#projects">Projects</a></li>
19+
<li><a href="#contact">Contact</a></li>
20+
</ul>
21+
</div>
22+
</nav>
23+
<nav id="hamburger-nav">
24+
<div class="logo">John Doe</div>
25+
<div class="hamburger-menu">
26+
<div class="hamburger-icon" onclick="toggleMenu()">
27+
<span></span>
28+
<span></span>
29+
<span></span>
30+
</div>
31+
<div class="menu-links">
32+
<li><a href="#about" onclick="toggleMenu()">About</a></li>
33+
<li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
34+
<li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
35+
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
36+
</div>
37+
</div>
38+
</nav>
39+
<section id="profile">
40+
<div class="section__pic-container">
41+
<img src="./assets/profile-pic.png" alt="John Doe profile picture" />
42+
</div>
43+
<div class="section__text">
44+
<p class="section__text__p1">Hello, I'm</p>
45+
<h1 class="title">John Doe</h1>
46+
<p class="section__text__p2">Frontend Developer</p>
47+
<div class="btn-container">
48+
<button
49+
class="btn btn-color-2"
50+
onclick="window.open('./assets/resume-example.pdf')"
51+
>
52+
Download CV
53+
</button>
54+
<button class="btn btn-color-1" onclick="location.href='./#contact'">
55+
Contact Info
56+
</button>
57+
</div>
58+
<div id="socials-container">
59+
<img
60+
src="./assets/linkedin.png"
61+
alt="My LinkedIn profile"
62+
class="icon"
63+
onclick="location.href='https://linkedin.com/'"
64+
/>
65+
<img
66+
src="./assets/github.png"
67+
alt="My Github profile"
68+
class="icon"
69+
onclick="location.href='https://github.com/'"
70+
/>
71+
</div>
72+
</div>
73+
</section>
74+
<section id="about">
75+
<p class="section__text__p1">Get To Know More</p>
76+
<h1 class="title">About Me</h1>
77+
<div class="section-container">
78+
<div class="section__pic-container">
79+
<img
80+
src="./assets/about-pic.png"
81+
alt="Profile picture"
82+
class="about-pic"
83+
/>
84+
</div>
85+
<div class="about-details-container">
86+
<div class="about-containers">
87+
<div class="details-container">
88+
<img
89+
src="./assets/experience.png"
90+
alt="Experience icon"
91+
class="icon"
92+
/>
93+
<h3>Experience</h3>
94+
<p>2+ years <br />Frontend Development</p>
95+
</div>
96+
<div class="details-container">
97+
<img
98+
src="./assets/education.png"
99+
alt="Education icon"
100+
class="icon"
101+
/>
102+
<h3>Education</h3>
103+
<p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
104+
</div>
105+
</div>
106+
<div class="text-container">
107+
<p>
108+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quis
109+
reprehenderit et laborum, rem, dolore eum quod voluptate
110+
exercitationem nobis, nihil esse debitis maxime facere minus sint
111+
delectus velit in eos quo officiis explicabo deleniti dignissimos.
112+
Eligendi illum libero dolorum cum laboriosam corrupti quidem,
113+
reiciendis ea magnam? Nulla, impedit fuga!
114+
</p>
115+
</div>
116+
</div>
117+
</div>
118+
<img
119+
src="./assets/arrow.png"
120+
alt="Arrow icon"
121+
class="icon arrow"
122+
onclick="location.href='./#experience'"
123+
/>
124+
</section>
125+
<section id="experience">
126+
<p class="section__text__p1">Explore My</p>
127+
<h1 class="title">Experience</h1>
128+
<div class="experience-details-container">
129+
<div class="about-containers">
130+
<div class="details-container">
131+
<h2 class="experience-sub-title">Frontend Development</h2>
132+
<div class="article-container">
133+
<article>
134+
<img
135+
src="./assets/checkmark.png"
136+
alt="Experience icon"
137+
class="icon"
138+
/>
139+
<div>
140+
<h3>HTML</h3>
141+
<p>Experienced</p>
142+
</div>
143+
</article>
144+
<article>
145+
<img
146+
src="./assets/checkmark.png"
147+
alt="Experience icon"
148+
class="icon"
149+
/>
150+
<div>
151+
<h3>CSS</h3>
152+
<p>Experienced</p>
153+
</div>
154+
</article>
155+
<article>
156+
<img
157+
src="./assets/checkmark.png"
158+
alt="Experience icon"
159+
class="icon"
160+
/>
161+
<div>
162+
<h3>SASS</h3>
163+
<p>Intermediate</p>
164+
</div>
165+
</article>
166+
<article>
167+
<img
168+
src="./assets/checkmark.png"
169+
alt="Experience icon"
170+
class="icon"
171+
/>
172+
<div>
173+
<h3>JavaScript</h3>
174+
<p>Basic</p>
175+
</div>
176+
</article>
177+
<article>
178+
<img
179+
src="./assets/checkmark.png"
180+
alt="Experience icon"
181+
class="icon"
182+
/>
183+
<div>
184+
<h3>TypeScript</h3>
185+
<p>Basic</p>
186+
</div>
187+
</article>
188+
<article>
189+
<img
190+
src="./assets/checkmark.png"
191+
alt="Experience icon"
192+
class="icon"
193+
/>
194+
<div>
195+
<h3>Material UI</h3>
196+
<p>Intermediate</p>
197+
</div>
198+
</article>
199+
</div>
200+
</div>
201+
<div class="details-container">
202+
<h2 class="experience-sub-title">Frontend Development</h2>
203+
<div class="article-container">
204+
<article>
205+
<img
206+
src="./assets/checkmark.png"
207+
alt="Experience icon"
208+
class="icon"
209+
/>
210+
<div>
211+
<h3>PostgreSQL</h3>
212+
<p>Basic</p>
213+
</div>
214+
</article>
215+
<article>
216+
<img
217+
src="./assets/checkmark.png"
218+
alt="Experience icon"
219+
class="icon"
220+
/>
221+
<div>
222+
<h3>Node JS</h3>
223+
<p>Intermediate</p>
224+
</div>
225+
</article>
226+
<article>
227+
<img
228+
src="./assets/checkmark.png"
229+
alt="Experience icon"
230+
class="icon"
231+
/>
232+
<div>
233+
<h3>Express JS</h3>
234+
<p>Intermediate</p>
235+
</div>
236+
</article>
237+
<article>
238+
<img
239+
src="./assets/checkmark.png"
240+
alt="Experience icon"
241+
class="icon"
242+
/>
243+
<div>
244+
<h3>Git</h3>
245+
<p>Intermediate</p>
246+
</div>
247+
</article>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
<img
253+
src="./assets/arrow.png"
254+
alt="Arrow icon"
255+
class="icon arrow"
256+
onclick="location.href='./#projects'"
257+
/>
258+
</section>
259+
<section id="projects">
260+
<p class="section__text__p1">Browse My Recent</p>
261+
<h1 class="title">Projects</h1>
262+
<div class="experience-details-container">
263+
<div class="about-containers">
264+
<div class="details-container color-container">
265+
<div class="article-container">
266+
<img
267+
src="./assets/project-1.png"
268+
alt="Project 1"
269+
class="project-img"
270+
/>
271+
</div>
272+
<h2 class="experience-sub-title project-title">Project One</h2>
273+
<div class="btn-container">
274+
<button
275+
class="btn btn-color-2 project-btn"
276+
onclick="location.href='https://github.com/'"
277+
>
278+
Github
279+
</button>
280+
<button
281+
class="btn btn-color-2 project-btn"
282+
onclick="location.href='https://github.com/'"
283+
>
284+
Live Demo
285+
</button>
286+
</div>
287+
</div>
288+
<div class="details-container color-container">
289+
<div class="article-container">
290+
<img
291+
src="./assets/project-2.png"
292+
alt="Project 2"
293+
class="project-img"
294+
/>
295+
</div>
296+
<h2 class="experience-sub-title project-title">Project Two</h2>
297+
<div class="btn-container">
298+
<button
299+
class="btn btn-color-2 project-btn"
300+
onclick="location.href='https://github.com/'"
301+
>
302+
Github
303+
</button>
304+
<button
305+
class="btn btn-color-2 project-btn"
306+
onclick="location.href='https://github.com/'"
307+
>
308+
Live Demo
309+
</button>
310+
</div>
311+
</div>
312+
<div class="details-container color-container">
313+
<div class="article-container">
314+
<img
315+
src="./assets/project-3.png"
316+
alt="Project 3"
317+
class="project-img"
318+
/>
319+
</div>
320+
<h2 class="experience-sub-title project-title">Project Three</h2>
321+
<div class="btn-container">
322+
<button
323+
class="btn btn-color-2 project-btn"
324+
onclick="location.href='https://github.com/'"
325+
>
326+
Github
327+
</button>
328+
<button
329+
class="btn btn-color-2 project-btn"
330+
onclick="location.href='https://github.com/'"
331+
>
332+
Live Demo
333+
</button>
334+
</div>
335+
</div>
336+
</div>
337+
</div>
338+
<img
339+
src="./assets/arrow.png"
340+
alt="Arrow icon"
341+
class="icon arrow"
342+
onclick="location.href='./#contact'"
343+
/>
344+
</section>
345+
<section id="contact">
346+
<p class="section__text__p1">Get in Touch</p>
347+
<h1 class="title">Contact Me</h1>
348+
<div class="contact-info-upper-container">
349+
<div class="contact-info-container">
350+
<img
351+
src="./assets/email.png"
352+
alt="Email icon"
353+
class="icon contact-icon email-icon"
354+
/>
355+
<p><a href="mailto:[email protected]">[email protected]</a></p>
356+
</div>
357+
<div class="contact-info-container">
358+
<img
359+
src="./assets/linkedin.png"
360+
alt="LinkedIn icon"
361+
class="icon contact-icon"
362+
/>
363+
<p><a href="https://www.linkedin.com">LinkedIn</a></p>
364+
</div>
365+
</div>
366+
</section>
367+
<footer>
368+
<nav>
369+
<div class="nav-links-container">
370+
<ul class="nav-links">
371+
<li><a href="#about">About</a></li>
372+
<li><a href="#experience">Experience</a></li>
373+
<li><a href="#projects">Projects</a></li>
374+
<li><a href="#contact">Contact</a></li>
375+
</ul>
376+
</div>
377+
</nav>
378+
<p>Copyright &#169; 2023 John Doe. All Rights Reserved.</p>
379+
</footer>
380+
<script src="script.js"></script>
381+
</body>
382+
</html>

0 commit comments

Comments
 (0)