-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (204 loc) · 13.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="icon" href="./img/logo-icon.png">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Manak's Portfolio Website</title>
</head>
<body>
<div class="loading-bg">
<svg id="logo-loading" class="logo-loading stroke-animate" width="494" height="495" viewBox="0 0 494 495" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="stroke" d="M398.797 2.74993L175.158 142.069C169.294 145.723 169.563 154.348 175.643 157.629L242.375 193.639C245.098 195.108 248.384 195.076 251.078 193.553L486.75 60.3226C492.928 56.8302 492.822 47.8956 486.563 44.5505L407.798 2.45152C404.96 0.934638 401.528 1.04842 398.797 2.74993Z" stroke="black"/>
<path class="stroke" d="M240 325.359V227.103C240 223.897 238.295 220.933 235.523 219.322L14.5229 90.8605C8.52292 87.3729 1 91.7015 1 98.6415V196.898C1 200.104 2.70542 203.067 5.47714 204.679L226.477 333.14C232.477 336.627 240 332.299 240 325.359Z" stroke="black"/>
<path class="stroke" d="M50.3304 267.317L133.33 312.872C136.21 314.453 138 317.477 138 320.762V484.794C138 491.636 130.667 495.975 124.67 492.683L41.6696 447.127C38.7898 445.547 37 442.522 37 439.237V275.206C37 268.364 44.3325 264.025 50.3304 267.317Z" stroke="black"/>
<path class="stroke" d="M426.574 121.582L349.574 165.065C346.748 166.661 345 169.656 345 172.902V427.919C345 434.49 351.815 438.846 357.78 436.086L434.78 400.456C437.963 398.983 440 395.795 440 392.288V129.418C440 122.528 432.574 118.194 426.574 121.582Z" stroke="black"/>
</svg>
</div>
<a name="top" id="page-top"></a>
<div class="navbar" id="navbar">
<div class="container" id="nav-location">
<a href="#page-top" id="logo">
<img class="logo" src="img/logo.svg" alt="logo">
</a>
<img src="img/menu.svg" class="menu" id="menu-button" alt="menu">
<nav>
<div class="exit-button-right">
<img src="img/menu-close.svg" class="menu-exit-icon" id="exit-menu-button" alt="exit-icon">
</div>
<ul class="nav-menu">
<li><a href="#page-top" class="btn nav-buttons" id="home-button">Home</a></li>
<li><a href="#projects" class="btn nav-buttons" id="projects-button">Projects</a></li>
<li><a href="#aboutme-scroll" class="btn nav-buttons" id="aboutme-button">About Me</a></li>
<li><a href="files/Manak Kumar Singh Resume.pdf" target="_blank" class="btn nav-buttons" id="resume-button">Resume</a></li>
<li><a href="#contactme-scroll" class="btn nav-buttons" id="contactme-button">Contact Me</a></li>
</ul>
<div class="container mobile-socials">
<a href="https://github.com/Hiperultimate" target="_blank"><img src="img/github.svg" class="github-logo" alt="logo-github"> </a>
<a href="https://www.linkedin.com/in/manak-kumar/" target="_blank"><img src="img/linkedin.svg" class="linkedin-logo" alt="logo-linkedin"></a>
</div>
</nav>
</div>
</div>
<section class="cover-page" id="cover-page">
<div class="container">
<div class="left-col">
<div class="text-centered">
<h1 class="sub-head">Software and</h1>
<h1 class="sub-head">Web-Developer</h1>
<p class="name">Manak Kumar Singh</p>
<div class="hire-button">
<a href="#contactme-scroll" class="gradient-button" id="hire-me">Hire me</a>
</div>
</div>
</div>
<div class="img-overflow">
<img class="desktop-logo" src="img/homepage-logo.svg" alt="desktop-logo">
</div>
</div>
<div class="container desktop-socials">
<a href="https://github.com/Hiperultimate" target="_blank"><img src="img/github.svg" class="github-logo" alt="logo-github"></a>
<a href="https://www.linkedin.com/in/manak-kumar/" target="_blank"><img src="img/linkedin.svg" class="linkedin-logo" alt="logo-linkedin"></a>
</div>
</section>
<section class="projects-section" id="projects">
<h1 class="section-heading" data-aos="fade-down">Projects</h1>
<div class="project-grid">
<div class="container project-mini " data-aos="fade-right">
<div class="container project-top-section">
<div class="heading-bg"></div>
<h2 class="project-heading">Axcessor</h2>
<p class="project-number">1</p>
</div>
<div class="mid-section">
<div class="project-img-section">
<img src="img/Axessor-small.jpg" alt="axcessor-image">
<div class="button-move-area">
<a href="axcessor-page.html" class="axcessor-button gradient-button">View Project</a>
</div>
</div>
<div class="project-para para-gap">
<p>An elaborated search engine for windows to find various installed programs and perform web search directly from the application.
Easy to use UI and quick access using keyboard hotkey with features like result caching for faster access.
</p>
</div>
</div>
</div>
<div class="container project-mini " data-aos="fade-right">
<div class="container project-top-section">
<div class="heading-bg"></div>
<h2 class="project-heading">Image Reel</h2>
<p class="project-number">2</p>
</div>
<div class="mid-section">
<div class="project-img-section">
<img src="img/image-reel1.png" alt="axcessor-image">
<div class="button-move-area">
<a href="imagereel.html" class="axcessor-button gradient-button">View Project</a>
</div>
</div>
<div class="project-para para-gap">
<p>A simple website with features like account creation, user authentication, anonymous image sharing between the website and the users with an option
to be an anonymous user. Entirely made using Java platform using JDBC, Servlet, JSP and MySQL.
</p>
</div>
</div>
</div>
<div class="container project-mini " data-aos="fade-right">
<div class="container project-top-section">
<div class="heading-bg"></div>
<h2 class="project-heading">My Website</h2>
<p class="project-number">3</p>
</div>
<div class="mid-section">
<div class="project-img-section">
<img src="img/portfolio-image.svg" alt="axcessor-image">
<div class="button-move-area">
<a href="personal-portfolio.html" class="axcessor-button gradient-button">View Project</a>
</div>
</div>
<div class="project-para para-gap">
<p>A high performance, Responsive website which works on mobile phones, tablet and desktop, made with the power of CSS3, HTML5, SVGs and JavaScript.
Designed, prototyped and planned with the help of figma.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="aboutme-contact">
<div class="container aboutme" id="aboutme-section">
<div id="aboutme-scroll"></div>
<div class="content">
<div class="background-text noselect">Skills</div>
<div class="center-div">
<h1 class="section-heading">About Me/Skills</h1>
</div>
<div class="aboutme-para para-gap" data-aos="zoom-in">
<p>I'm Manak Kumar Singh, a 23-year-old <span>Software</span> and <span>Web Developer</span>.
I have <span>experience</span> in working as a <span>Django back-end web developer</span> but I can also build <span>front-end</span> applications using <span>SCSS/CSS3</span>, <span>JavaScript</span>, and <span>HTML5</span>.
Currently, I am looking for <span>internships</span> or <span>jobs</span> that would help me gain more work experience and for that, I have created <span>multiple personal projects</span> in hopes to get one.
I am always open to learning new/popular <span>APIs</span> and <span>frameworks</span> and am usually spending time every day learning them, so feel free to <a href="#contactme-scroll" class="contact-me">contact me</a> at
<span>manak.officialwork@gmail.com</span> or just drop me a <span>message</span> below!
</p>
</div>
<div class="background-text background-text-two noselect">About me.</div>
</div>
<div class='tool-width'>
<div class="all-tools">
<div class="center-tools" data-aos="zoom-in">
<img src="img/js.svg" class="tool-logo" id="js-logo" alt="">
<img src="img/css3.svg" class="tool-logo" id="css-logo" alt="">
<img src="img/html5.svg" class="tool-logo" id="html-logo" alt="">
<img src="img/python.svg" class="tool-logo" id="python-logo" alt="">
<img src="img/django.svg" class="tool-logo" id="django-logo" alt="">
</div>
</div>
</div>
<div class="center-div contact-button">
<a href="#contactme-scroll" class="gradient-button" id="contact-button">Contact Me</a>
</div>
</div>
<div class="container contactme" id="contactme-section" data-aos="fade-right">
<div id="contactme-scroll"></div>
<h1 class="section-heading">Contact Me</h1>
<div class="container form-container">
<div class="heading-bg"></div>
<div class="container form-section center-div">
<div class="center-div">
<form action ="https://formsubmit.co/manak.officialwork@gmail.com" method="post" onsubmit="submitmessage()">
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail *</label>
<input type="email" id="email" name="email" required>
<label for="message">Message *</label>
<textarea name="message" id="message" cols="30" rows="10" required></textarea>
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://hiperultimate.github.io/Portfolio-Website/#contactme-scroll">
<input type="submit" value="Send Message" class="gradient-button contact-button">
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-div">
<a href="#" id="footer-logo"><img class="footer-logo" src="img/logo.svg" alt="logo"></a>
<div class="footer-social">
<a href="https://github.com/Hiperultimate" target="_blank" class="github-link">Github</a>
<a href="https://www.linkedin.com/in/manak-kumar/" target="_blank" class="linkedin-link">Linkedin</a>
</div>
<p>© 2021 Manak Kumar Singh - VAT 7011311081- Contact</p>
</div>
</footer>
<script src="./scripting/web-script.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>