Skip to content

Commit fef3f20

Browse files
abhayjatindoshiabhayjatindoshi
committed
📐 UX: description provided for each project
1 parent ece647f commit fef3f20

8 files changed

Lines changed: 1030 additions & 17 deletions

File tree

‎css/styles.css‎

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ section {
4040
opacity: 0;
4141
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
4242
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
43-
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
43+
-webkit-animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
4444
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
4545
}
4646

@@ -242,3 +242,97 @@ a.project {
242242
height: 40px;
243243
}
244244
}
245+
246+
.glider-contain {
247+
width: 70%;
248+
display: block;
249+
margin: auto;
250+
position: absolute;
251+
top: 20%;
252+
left: 0;
253+
bottom: 0;
254+
right: 0;
255+
}
256+
257+
.glider-next,
258+
.glider-prev {
259+
color: #eee;
260+
top: 100px;
261+
}
262+
263+
.glider-next.disabled,
264+
.glider-prev.disabled {
265+
color: #aaa;
266+
}
267+
268+
.freeze-layer {
269+
position: absolute;
270+
overflow: hidden;
271+
height: 100%;
272+
width: 100%;
273+
background-color: #00000099;
274+
top: 0;
275+
}
276+
277+
.project-details {
278+
display: block;
279+
width: 400px;
280+
max-width: 95%;
281+
margin: auto;
282+
}
283+
284+
.project-details .close {
285+
text-align: right;
286+
position: absolute;
287+
right: 15px;
288+
top: 6px;
289+
font-size: large;
290+
cursor: pointer;
291+
}
292+
293+
.project-details .header {
294+
background-color: #0000004b;
295+
border-radius: 10px 10px 0 0;
296+
position: relative;
297+
}
298+
299+
.project-details .project-name {
300+
font-size: x-large;
301+
padding-top: 20px;
302+
}
303+
304+
.project-details .tags {
305+
list-style: none;
306+
display: inline-block;
307+
margin: 10px;
308+
padding: 0;
309+
}
310+
311+
.project-details .tags li {
312+
display: inline-block;
313+
padding: 5px 10px;
314+
margin: 2px;
315+
background: #a5a5a52b;
316+
font-size: small;
317+
border-radius: 20px;
318+
}
319+
320+
.project-details .body {
321+
background-color: #eee;
322+
color: #333;
323+
padding: 10px;
324+
}
325+
326+
.project-details .footer {
327+
background-color: #eee;
328+
color: #222;
329+
font-weight: 100;
330+
padding: 15px;
331+
border-top: 1px solid #bfbfbf;
332+
border-radius: 0 0 10px 10px;
333+
cursor: pointer;
334+
}
335+
336+
.project-details .footer:hover {
337+
background-color: #dcdcdc;
338+
}

‎index.html‎

Lines changed: 208 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<meta name="theme-color" content="#ffffff">
2525
<link href="//fonts.googleapis.com/css?family=Open+Sans:100,400,600,700&amp;subset=latin" rel="stylesheet">
2626
<link rel="stylesheet" href="vendor/fullpage.js/dist/fullpage.min.css">
27+
<link rel="stylesheet" href="vendor/glider.js/glider.min.css">
2728
<link rel="stylesheet" href="css/styles.css">
28-
2929
</head>
3030

3131
<body>
@@ -56,49 +56,216 @@
5656
<section class="section" id="works">
5757
<h1>My Works</h1>
5858
<div class="works">
59-
<a class="project" target="_blank"
60-
href="https://github.com/encryptorcode/process-handler/blob/master/README.md">
59+
<a class="project" onclick="showProjectSlide('process-handler')">
6160
<span class="project-name">
6261
process-handler
6362
</span>
6463
</a>
65-
<a class="project" target="_blank"
66-
href="https://github.com/encryptorcode/cliq-to/blob/master/README.md">
64+
<a class="project" onclick="showProjectSlide('cliq-to')">
6765
<span class="project-name">
6866
cliq-to
6967
</span>
7068
</a>
71-
<a class="project" target="_blank"
72-
href="https://github.com/encryptorcode/pluralize/blob/master/README.md">
69+
<a class="project" onclick="showProjectSlide('pluralize')">
7370
<span class="project-name">
7471
pluralize
7572
</span>
7673
</a>
77-
<a class="project" target="_blank"
78-
href="https://github.com/encryptorcode/spring-permissions/blob/master/README.md">
74+
<a class="project" onclick="showProjectSlide('spring-permissions')">
7975
<span class="project-name">
8076
spring-permissions
8177
</span>
8278
</a>
83-
<a class="project" target="_blank"
84-
href="https://github.com/encryptorcode/watch-agent/blob/master/README.md">
79+
<a class="project" onclick="showProjectSlide('watch-agent')">
8580
<span class="project-name">
8681
watch-agent
8782
</span>
8883
</a>
89-
<a class="project" target="_blank"
90-
href="https://github.com/encryptorcode/iam-oauth/blob/master/README.md">
84+
<a class="project" onclick="showProjectSlide('iam-oauth')">
9185
<span class="project-name">
9286
iam-oauth
9387
</span>
9488
</a>
95-
<a class="project" target="_blank"
96-
href="https://github.com/abhayjatindoshi/spendings-client/blob/master/README.md">
89+
<a class="project" onclick="showProjectSlide('spendings')">
9790
<span class="project-name">
9891
spendings
9992
</span>
10093
</a>
10194
</div>
95+
<div class="freeze-layer"></div>
96+
<div class="glider-contain">
97+
<div class="glider">
98+
<div>
99+
<div class="project-details" id="project-process-handler">
100+
<div class="header">
101+
<span class="close" onclick="hideSlides()">&times;</span>
102+
<div class="project-name">process-handler</div>
103+
<ul class="tags">
104+
<li>node.js</li>
105+
<li>js</li>
106+
<li>promise</li>
107+
</ul>
108+
</div>
109+
<div class="body">
110+
<div class="project-description">
111+
This handler helps you to handle multiple promises effortlessly. This library will
112+
handle processes and
113+
its sub processes and its sub process and so on...
114+
</div>
115+
</div>
116+
<div class="footer">
117+
<a href="https://github.com/encryptorcode/process-handler/blob/master/README.md"
118+
target="_blank">Access docs</a>
119+
</div>
120+
</div>
121+
</div>
122+
<div>
123+
<div class="project-details" id="project-cliq-to">
124+
<div class="header">
125+
<span class="close" onclick="hideSlides()">&times;</span>
126+
<div class="project-name">cliq-to</div>
127+
<ul class="tags">
128+
<li>attachment</li>
129+
<li>zoho</li>
130+
<li>cliq</li>
131+
<li>node.js</li>
132+
<li>command-line</li>
133+
</ul>
134+
</div>
135+
<div class="body">
136+
<div class="project-description">
137+
A gift for people who use command-line often to send cliq attachments quickly.
138+
</div>
139+
</div>
140+
<div class="footer">
141+
<a href="https://github.com/encryptorcode/cliq-to/blob/master/README.md">Access docs</a>
142+
</div>
143+
</div>
144+
</div>
145+
<div>
146+
<div class="project-details" id="project-pluralize">
147+
<div class="header">
148+
<span class="close" onclick="hideSlides()">&times;</span>
149+
<div class="project-name">pluralize</div>
150+
<ul class="tags">
151+
<li>pluralize</li>
152+
<li>nlp</li>
153+
<li>plurals</li>
154+
<li>java</li>
155+
</ul>
156+
</div>
157+
<div class="body">
158+
<div class="project-description">
159+
Pluralize and singularize any word.
160+
</div>
161+
</div>
162+
<div class="footer">
163+
<a href="https://github.com/encryptorcode/pluralize/blob/master/README.md"
164+
target="_blank">Access docs</a>
165+
</div>
166+
</div>
167+
</div>
168+
<div>
169+
<div class="project-details" id="project-spring-permissions">
170+
<div class="header">
171+
<span class="close" onclick="hideSlides()">&times;</span>
172+
<div class="project-name">spring-permissions</div>
173+
<ul class="tags">
174+
<li>permissions</li>
175+
<li>spring</li>
176+
<li>validations</li>
177+
<li>java</li>
178+
</ul>
179+
</div>
180+
<div class="body">
181+
<div class="project-description">
182+
Move all your validations out of your business logic.
183+
</div>
184+
</div>
185+
<div class="footer">
186+
<a href="https://github.com/encryptorcode/spring-permissions/blob/master/README.md"
187+
target="_blank">Access docs</a>
188+
</div>
189+
</div>
190+
</div>
191+
<div>
192+
<div class="project-details" id="project-watch-agent">
193+
<div class="header">
194+
<span class="close" onclick="hideSlides()">&times;</span>
195+
<div class="project-name">watch-agent</div>
196+
<ul class="tags">
197+
<li>agent</li>
198+
<li>monitoring</li>
199+
<li>command</li>
200+
<li>node.js</li>
201+
<li>framework</li>
202+
</ul>
203+
</div>
204+
<div class="body">
205+
<div class="project-description">
206+
A command line wrapper for monitoring, iterations and long processes
207+
</div>
208+
</div>
209+
<div class="footer">
210+
<a href="https://github.com/encryptorcode/watch-agent/blob/master/README.md"
211+
target="_blank">Access docs</a>
212+
</div>
213+
</div>
214+
</div>
215+
<div>
216+
<div class="project-details" id="project-iam-oauth">
217+
<div class="header">
218+
<span class="close" onclick="hideSlides()">&times;</span>
219+
<div class="project-name">iam-oauth</div>
220+
<ul class="tags">
221+
<li>oauth</li>
222+
<li>login-system</li>
223+
<li>security</li>
224+
<li>login</li>
225+
<li>coookies</li>
226+
<li>authentication</li>
227+
<li>java</li>
228+
</ul>
229+
</div>
230+
<div class="body">
231+
<div class="project-description">
232+
The quickest way to support authentication on your app.
233+
</div>
234+
</div>
235+
<div class="footer">
236+
<a href="https://github.com/encryptorcode/iam-oauth/blob/master/README.md"
237+
target="_blank">Access docs</a>
238+
</div>
239+
</div>
240+
</div>
241+
<div>
242+
<div class="project-details" id="project-spendings">
243+
<div class="header">
244+
<span class="close" onclick="hideSlides()">&times;</span>
245+
<div class="project-name">spendings</div>
246+
<ul class="tags">
247+
<li>typescript</li>
248+
<li>angular</li>
249+
<li>php</li>
250+
<li>js</li>
251+
</ul>
252+
</div>
253+
<div class="body">
254+
<div class="project-description">
255+
This is a app that helps track expenses of a family
256+
</div>
257+
</div>
258+
<div class="footer">
259+
<a href="https://github.com/abhayjatindoshi/spendings-client/blob/master/README.md"
260+
target="_blank">Access docs</a>
261+
</div>
262+
</div>
263+
</div>
264+
</div>
265+
266+
<button aria-label="Previous" class="glider-prev">«</button>
267+
<button aria-label="Next" class="glider-next">»</button>
268+
</div>
102269
</section>
103270
<section class="section" id="bio">
104271
<h1>Get in touch</h1>
@@ -144,8 +311,33 @@ <h1>Get in touch</h1>
144311
</section>
145312
</div>
146313
<script src="vendor/fullpage.js/dist/fullpage.js"></script>
314+
<script src="vendor/glider.js/glider.min.js"></script>
147315
<script>
148-
var backgroundColors = ['#00c0ff', '#4218b8', '#ff0061', '#fec194', '#00ffa9', '#0d4dff'];
316+
var glider = new Glider(document.querySelector('.glider'), {
317+
slidesToShow: 1,
318+
draggable: true,
319+
arrows: {
320+
prev: '.glider-prev',
321+
next: '.glider-next'
322+
}
323+
})
324+
325+
function showProjectSlide(name) {
326+
document.querySelector('.freeze-layer').style.display = 'block';
327+
document.querySelector('.glider-contain').style.display = 'block';
328+
let element = document.querySelector('#project-' + name);
329+
var index = parseInt(element.parentElement.dataset.gslide);
330+
glider.scrollItem(index);
331+
}
332+
333+
function hideSlides() {
334+
document.querySelector('.freeze-layer').style.display = 'none';
335+
document.querySelector('.glider-contain').style.display = 'none';
336+
}
337+
338+
hideSlides();
339+
340+
var backgroundColors = ['#00c0ff', '#4218b8', '#ff0061', '#ffbf0c', '#00ffa9', '#0d4dff'];
149341

150342
function setBackground(index, position) {
151343
document.body.style.background = 'linear-gradient(45deg, '

‎vendor/glider.js/LICENSE.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
2+
3+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
4+
5+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

0 commit comments

Comments
 (0)