-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (230 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-179018380-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-179018380-1');
</script>
<!-- META CHARSET -->
<meta charset="UTF-8">
<meta name="mobile-web-app-capable" content="yes" />
<!-- META Google Verification -->
<meta name="google-site-verification" content="1jmmWqXLbh_oWXtPqZcsuhGpm-Kd66nIaQhi2Uk3QB8" />
<!-- META VIEWPORT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TITLE -->
<title>Portfolio | PRANJAL</title>
<!-- META DESCRIPTION -->
<meta name="description" content="Portfolio Website of an aspiring web developer Pranjal" />
<!-- META KEYWORDS -->
<meta name="keywords" content="HTML, CSS, JAVASCRIPT, portfolio, live, domain, WEB DEVELOPMENT, pranjal, pranjals.live" >
<!-- META AUTHOR -->
<meta name="author" content="Pranjal Misra">
<meta name="copyright" content="Copyright © 2020" />
<meta name="robots" content="all, index, follow" />
<meta name="googlebot" content="all, index, follow" />
<meta name="msnbot" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="stylesheet" href="CSS/styles.css">
<link rel="shortcut icon" href="img/favicon-2.png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header" id="home">
<div class="bg-video">
<video src="img/video420.mp4" muted class="bg-video__content" id="bg-vid" autoplay poster="img/bg-img.webp" loop></video >
<img src="img/bg-img.webp" class="bg-video__content u-hidden" alt="bg-img" id="bg-img">
</div>
<h1 class="heading__primary">
<div id="animateName">
<span class="heading__primary--main">Pranjal Misra</span>
</div>
<span class="heading__primary--sub"> </span>
<div class="heading__primary--icons"id="animateSocial" >
<span class="heading__primary--icon">
<a target="_blank" href="https://www.linkedin.com/in/PranjalMisra12"
><img src="./img/linked.svg"
></a>
</span>
<span class="heading__primary--icon">
<a target="_blank" href="https://github.com/Pranjal-dev-byte"
><img src="./img/github.svg"
></a>
</span>
<span class="heading__primary--icon">
<a target="_blank" href="https://www.instagram.com/misra_pranjal_">
<img src="./img/insta.svg" />
</a>
</span>
</div>
<button class="btn btn-resume u-margin-medium-top" id="animateSocial">
<a target="_blank" href="https://drive.google.com/file/d/1nCODWuXSJ7XEsrvIuGeJsmMMitustSSa/view?usp=sharing" class="header__resume">Resume</a>
</button>
</h1>
</header>
<nav class="nav__container">
<div class="nav__logo" id="logo">
<img src="/img/logo.png" alt="Logo" class="nav__logo-content">
<img src="/img/ham.png" id="ham-icon" class="nav__ham">
</div>
<ul class="nav__list u-hidden" id="list">
<li class="nav__item nav__home"><a href="#home" class="nav__link" id="home">Home</a></li>
<li class="nav__item nav__about"><a href="#about" class="nav__link" id="about">About</a></li>
<li class="nav__item nav__project"><a href="#projects" class="nav__link" id="project">Projects</a></li>
</ul>
</nav>
<section class="section__about" id="about" >
<h2 class="heading__secondary u-margin-medium" id="aboutHeading">About me</h2>
<div class="about__content">
<div class="about__content--block" id="blockOne">
<h3 class="heading__tertiary u-margin-small">background</h3>
<p class="about__content--text">I'm a <span class="about__highlited">Final year undergrad</span> pursuing Bachelors of Technology (B.Tech.) in Information Technology.</p>
</div>
<div class="about__content--block" id="blockTwo">
<h3 class="heading__tertiary u-margin-small">Passionate Software Developer</h3>
<p class="about__content--text">As a disciplined web developer, I stick with problems until I find the optimal solution to create high quality
products with a great user experience. I love to develop website via MEAN stack in the most creative and economical way possible.</p>
</div>
<div class="about__content--block" id="blockThree">
<h3 class="heading__tertiary u-margin-small">Problem Solver</h3>
<p class="about__content--text">My passion for programming stems from the power of using code to solve problems. Tech always inspires me to find creative, scalable, and robust solutions for modern problems, thus making the world a
better place. I firmly believe that we can achieve greatness if first, we achieve goodness.</p>
</div>
</div>
</section>
<section class="section__projects" id="projects">
<h2 class="heading__secondary u-margin-big" id="projHeading">Few Projects</h2>
<div class="project" id="one">
<img src="/img/ecom-proj.svg" alt="Project Image" class="project__img" id="imgOne">
<div class="project__text" id="textOne">
<h3 class="heading__tertiary u-margin-small">E-Commerce Website</h3>
<p class="project__text--section">
LANGUAGES AND TECHNOLOGIES USED: HTML, CSS, NODE.JS, EXPRESS.JS, CUSTOM DB
<br>
<p class="project__text--desc">
Description: An E-Commerce website developed with cookie auth mechanism. The passwords are salted and
stored in an encrypted format to enhance app security. A user can add items to their cart, edit their cart. Whilst an
admin has the permission to edit or add products using the admin interface. All of the user, admin, products information
is stored in a JSON file after processing via a custom database implemented via Node.js.
</p>
</p>
<div class="btn-wrap">
<button class="btn btn-white u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/E-comm" class="project__visit">Visit Site</a>
</button>
<button class="btn btn-blue u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/E-comm" class="project__link">View Repo</a>
</button>
</div>
</div>
</div>
<div class="project" id="two">
<img src="/img/movie-proj.svg" alt="Project Image" class="project__img" id="imgTwo">
<div class="project__text" id="textTwo">
<h3 class="heading__tertiary u-margin-small">Movie Faceoff</h3>
<p class="project__text--section">
LANGUAGES AND TECHNOLOGIES USED: HTML, CSS, vanilla js,
axios
<br>
<p class="project__text--desc">
Description: The website fetches data form OMDB API, request made
through AXIOS, it displays to the user various parameters on which
comparison is based and displays the winner.
</p>
</p>
<div class="btn-wrap">
<button class="btn btn-white u-margin-medium-top">
<a target="_blank" href="https://movie-faceoff.netlify.app" class="project__visit">Visit Site</a>
</button>
<button class="btn btn-blue u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/Movie-faceoff" class="project__link">View Repo</a>
</button>
</div>
</div>
</div>
<div class="project" id="three">
<img src="/img/landing-proj.svg" alt="Project Image" class="project__img" id="imgThree">
<div class="project__text" id="textThree">
<h3 class="heading__tertiary u-margin-small">Paradise Landing Page</h3>
<p class="project__text--section">
LANGUAGES AND TECHNOLOGIES USED: HTML, CSS, SCSS, VANILLA JS, FIGMA
<br>
<p class="project__text--desc">
Description: Landing page for a fictitious touring company. Cutting-edge UI implemented via CSS preprocessor SCSS and
Vanilla JS. Along with a couple of animations to make user experience even more appealing.
</p>
</p>
<div class="btn-wrap">
<button class="btn btn-white u-margin-medium-top">
<a target="_blank" href="https://paradise-tours.netlify.app" class="project__visit">Visit Site</a>
</button>
<button class="btn btn-blue u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/Paradise-tours" class="project__link">View Repo</a>
</button>
</div>
</div>
</div>
<div class="project" id="four">
<img src="/img/blog-proj.svg" alt="Project Image" class="project__img" id="imgFour">
<div class="project__text" id="textFour">
<h3 class="heading__tertiary u-margin-small">Blogging website</h3>
<p class="project__text--section">
LANGUAGES AND TECHNOLOGIES USED: HTML, CSS, NODE.JS, EXPRESS.JS, MONGODB, VANILLA JS
<br>
<p class="project__text--desc">
Description: A blogging website implementing MVC architecture allowing the user to create or delete their existing blog,
the backend is implemented via express.js and the database used to store pertaining blog information is MongoDB wrapped
around the mongoose module.
</p>
</p>
<div class="btn-wrap">
<button class="btn btn-white u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/Blog-web" class="project__visit">Visit Site</a>
</button>
<button class="btn btn-blue u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/Blog-web" class="project__link">View Repo</a>
</button>
</div>
</div>
</div>
<div class="project" id="five">
<img src="/img/maze-proj.svg" alt="Project Image" class="project__img" id="imgFive">
<div class="project__text" id="textFive">
<h3 class="heading__tertiary u-margin-small">Maze Game</h3>
<p class="project__text--section">
LANGUAGES AND TECHNOLOGIES USED: HTML, CSS, VANILLA JS, MATTER.JS
<br>
<p class="project__text--desc">
Description: A web cum physics-based maze game developed using matter.js framework. An exclusive randomized maze is
generated every time a user initiates the play game process. The aim is to reach the goal spot travelling through the
maze.
</p>
</p>
<div class="btn-wrap">
<button class="btn btn-white u-margin-medium-top">
<a target="_blank" href="https://mazeegame.netlify.app" class="project__visit">Visit Site</a>
</button>
<button class="btn btn-blue u-margin-medium-top">
<a target="_blank" href="https://github.com/Pranjal-dev-byte/Maze-game" class="project__link">View Repo</a>
</button>
</div>
</div>
</div>
</section>
<footer class="footer__container">
Made with <span class="footer__heart"><img class="footer__heart--img"src="https://img.icons8.com/flat_round/64/000000/hearts.png" /></span> by <span class="footer__name">pranjal</span>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="navbar.js"></script>
<script src="index.js"></script>
<script src="animationHeader.js"></script>
<script src="animationAbout.js"></script>
<script src="animationProject.js"></script>
</body>
</html>