Skip to content

Commit 893fef0

Browse files
mjmauryamjmaurya
committed
Updated
1 parent 7339679 commit 893fef0

File tree

4 files changed

+81
-52
lines changed

4 files changed

+81
-52
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎assets/css/main.css

+63-2
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ body{
8989
}
9090
.intro{
9191
padding-top: 10px;
92-
background: linear-gradient( 135deg, rgba(0, 64, 77, 0.9) 0%, rgba(0, 64, 77, 0.9) 100% , rgba(0, 64, 77, 0.9) 100%);
92+
background: linear-gradient( 135deg, rgb(13 14 14 / 90%) 0%, rgb(10 10 10 / 90%) 100% , rgb(10 10 10 / 90%) 100%);
9393
height: 400px;
9494
margin-top: 100px;
9595
color: white;
@@ -340,11 +340,72 @@ text-align: start;
340340

341341
/* Project Section start */
342342
.project-card{
343-
height:420px;
344343
box-shadow: 0 0 5px rgb(243, 236, 236), 2px 2px 5px rgb(250, 245, 245),2px 2px 5px;
345344
border-radius: 4px;
346345
padding: 16px;
347346
}
347+
.content {
348+
position: relative;
349+
width: 100%;
350+
/* max-width: 400px; */
351+
margin: auto;
352+
overflow: hidden
353+
}
354+
.link{
355+
background: #20183859;
356+
box-shadow: 0 0 5px rgb(243, 236, 236), 2px 2px 5px rgb(250, 245, 245),2px 2px 5px;
357+
opacity: .3;
358+
color: #fff;
359+
padding: 7px;
360+
border-radius: 100%;
361+
}
362+
.link:hover{
363+
background: #201838;
364+
opacity: 1;
365+
padding: auto;
366+
border-radius: 50%;
367+
}
368+
.content .content-overlay {
369+
background: rgba(0, 0, 0, 0.7);
370+
position: absolute;
371+
height: 99%;
372+
width: 100%;
373+
left: 0;
374+
top: 0;
375+
bottom: 0;
376+
right: 0;
377+
opacity: 0;
378+
-webkit-transition: all 0.4s ease-in-out 0s;
379+
-moz-transition: all 0.4s ease-in-out 0s;
380+
transition: all 0.4s ease-in-out 0s
381+
}
382+
383+
.content:hover .content-overlay {
384+
opacity: 1
385+
}
386+
387+
.content-details {
388+
position: absolute;
389+
text-align: center;
390+
padding-left: 1em;
391+
padding-right: 1em;
392+
width: 100%;
393+
top: 50%;
394+
left: 50%;
395+
opacity: 0;
396+
-webkit-transform: translate(-50%, -50%);
397+
-moz-transform: translate(-50%, -50%);
398+
transform: translate(-50%, -50%);
399+
-webkit-transition: all 0.3s ease-in-out 0s;
400+
-moz-transition: all 0.3s ease-in-out 0s;
401+
transition: all 0.3s ease-in-out 0s
402+
}
403+
404+
.content:hover .content-details {
405+
top: 50%;
406+
left: 50%;
407+
opacity: 1
408+
}
348409

349410
.image-section{
350411
text-align:center;

‎assets/js/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var typeString=["I'M a web Developer","I'M an Android Developer","Machine Learning Enthusiast"];
2+
var typeString=["I'M a Full Stack Developer"];
33
var i=0;
44
var count=0;
55
var selectedText="";

‎index.html

+14-49
Original file line numberDiff line numberDiff line change
@@ -108,31 +108,6 @@ <h1 style="margin-bottom: 100px;">About Me</h1>
108108
<h1>Hello 👋🏽</h1>
109109
<p>I am Final Year Computer Science And Engineering Student.&#128640; You can find me more on Stackoverflow, <i class="fa fa-github"></i> Github, <i class="fa fa-linkedin"></i> Linkedin,<i class="fa fa-youtube"></i> Youtube than in the real world.
110110
I have worked as an SDE Intern at Geminid Systems and as a Web Developer at Elemental Design. Experience with CodeIgniter, Flask, Bootstrap, Jquery Angular, and Python. </p>
111-
<div class="row">
112-
<div class="col-6" style="text-align: start;">
113-
<ul class="about-list">
114-
<li>
115-
<i class="material-icons">school</i> Degree : B.Tech
116-
</li>
117-
<li>
118-
<i class="material-icons">language</i> Website : www.manojcse.me
119-
</li>
120-
<li>
121-
<i class="material-icons">location_on</i> City : Patna, India
122-
</li>
123-
</ul>
124-
</div>
125-
<div class="col-6" style="text-align: start;">
126-
<ul class="about-list">
127-
<li>
128-
<i class="material-icons">email</i> Mail : manojbce@outlook.com
129-
</li>
130-
<li>
131-
<i class=" fa fa-telegram"></i> Telegram : https://t.me/maurya_m
132-
</li>
133-
</ul>
134-
</div>
135-
</div>
136111
</div>
137112
</div>
138113
<div class="container" style="padding-top: 60px; text-align: start;">
@@ -408,33 +383,23 @@ <h1 style="margin-bottom: 20px;">My Recent Projects</h1>
408383
</div>
409384
<div class="row">
410385
<div class="col-sm-6" style="margin-top: 50px;">
411-
<div class="project-card">
412-
<div class="image-section">
413-
<img src="assets/images/project/codescript.PNG" class="card-img-top" alt="Resume Website Builder">
414-
</div>
415-
<div class="row verify">
416-
<div class="col-9">
417-
<p>Resume Website Builder</p>
418-
</div>
419-
<div class="col-3">
420-
<a href="http://codescript.in/ResumeBuilder"><button class="verify-btn">Visite</button></a>
421-
</div>
422-
</div>
423-
</div>
386+
<div class="project-card content">
387+
<div class="content-overlay"></div> <img class="content-image card-img-top " src="assets/images/project/codescript.PNG" alt="Resume Website Builder" >
388+
<div class="content-details fadeIn-bottom">
389+
<h3 class="content-title">ONLINE PORTFOLIO BUILDER</h3>
390+
<p class="content-text">ONLINE PORTFOLIO BUILDER is a online tool. Here you can create your own Portfolio within 5 mitnus without any coding.</p><p><a target="_blank" href="https://opbuilder.herokuapp.com/"><i class="fa fa-link fa-2x link"></i></a></p>
391+
</div>
392+
</div>
424393
</div>
425394
<div class="col-sm-6" style="margin-top: 50px;">
426-
<div class="project-card">
427-
<div class="image-section">
428-
<img src="assets/images/project/face.jpg" class="card-img-top" alt="FACE ATTENDANCE SYSTEM">
429-
</div>
430-
<div class="row verify">
431-
<div class="col-9">
432-
<p>FACE ATTENDANCE SYSTEM</p>
395+
<div class="project-card content">
396+
<div class="content-overlay"></div> <img class="content-image card-img-top " src="assets/images/project/mjbutton.jpg" alt="MJBUTTON FOR YOUR PROJECT" >
397+
<div class="content-details fadeIn-bottom">
398+
<h3 class="content-title">MJBUTTON</h3>
399+
<p class="content-text">
400+
BJBUTTON is a CSS library for different stylish buttons. You can use this library through library CDN or download minified css.
401+
</p><p><a target="_blank" href="https://mjmaurya.github.io/MJButtons/index.html"><i class="fa fa-link fa-2x link"></i></a></p>
433402
</div>
434-
<div class="col-3">
435-
<a href="https://github.com/LetsUpgrade/FACE-ATTENDANCE-SYSTEM"><button class="verify-btn">Visite</button></a>
436-
</div>
437-
</div>
438403
</div>
439404
</div>
440405
</div>

0 commit comments

Comments
 (0)