Skip to content

Commit edffea0

Browse files
mulayharshalmulayharshal
committed
add my project section
1 parent 64f0261 commit edffea0

3 files changed

Lines changed: 175 additions & 28 deletions

File tree

‎images/fulldemo.jpeg‎

-316 KB
Loading

‎index.html‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h1 class="logoNmae">Harshal Mulay</h1>
3232
<a href="#aboutme" class="navbarLink ">About us</a>
3333
</li>
3434
<li>
35-
<a href="#" class="navbarLink ">Project</a>
35+
<a href="#projects" class="navbarLink ">Project</a>
3636
</li>
3737
<li>
3838
<a href="#skills" class="navbarLink ">Skills</a>
@@ -80,10 +80,9 @@ <h1 class="logoNmae">Harshal Mulay</h1>
8080
</div>
8181
</div>
8282
</div>
83-
<!-- home------------------------------------------------------------------ -->
8483

85-
8684

85+
<!-- home------------------------------------------------------------------ -->
8786
<div id="home" class="home">
8887

8988
<div class="intro1">
@@ -136,6 +135,51 @@ <h3>8767344847</h3>
136135
</div>
137136
</div>
138137

138+
<!-- Project------------------------------------------------------------------------------ -->
139+
<div id="projects" class="projects">
140+
<h1 class="myprojects">My Projects</h1>
141+
<p>Projects are not just tasks completed—they are challenges solved, skills applied, and ideas brought to life.</p>
142+
<div class="projectContainer">
143+
144+
<div class="project">
145+
<img class="projectimg" src="https://raw.githubusercontent.com/mulayharshal/OnlineExamPortal/main/screenshots/homepage.png" alt="project Image">
146+
<div class="projectdata">
147+
<h2 class="projectname">Online Exam Portal</h2>
148+
<p class="projectinfo">A full-stack Online Examination Portal built with Angular, Spring Boot, and MySQL for managing and conducting online exams efficiently.</p>
149+
</div>
150+
<div class="projectbtns">
151+
<a href="https://github.com/mulayharshal/OnlineExamPortal" target="_blank"><button class="pbtn">View Code </button></a>
152+
<a href="javascript:void(0)" ><button class="pbtn">View Live </button></a>
153+
</div>
154+
</div>
155+
156+
<div class="project">
157+
<img class="projectimg" src="https://raw.githubusercontent.com/mulayharshal/AgeCalculator/refs/heads/main/images/pcview.jpeg" alt="project Image">
158+
<div class="projectdata">
159+
<h2 class="projectname">Age Calculator</h2>
160+
<p class="projectinfo">A fully responsive age calculator website, designed using HTML, CSS, and JavaScript to provide accurate results</p>
161+
</div>
162+
<div class="projectbtns">
163+
<a href="https://github.com/mulayharshal/AgeCalculator" target="_blank"><button class="pbtn">View Code </button></a>
164+
<a href="https://mulayharshal.github.io/AgeCalculator/" target="_blank"><button class="pbtn">View Live </button></a>
165+
</div>
166+
</div>
167+
168+
<div class="project">
169+
<img class="projectimg" src="images/fulldemo.jpeg" alt="project Image">
170+
<div class="projectdata">
171+
<h2 class="projectname">Personal Portfolio</h2>
172+
<p class="projectinfo">A fully responsive personal portfolio website, Responsive for all devices, build using HTML and CSS.</p>
173+
</div>
174+
<div class="projectbtns">
175+
<a href="https://github.com/mulayharshal/portfolio" target="_blank"><button class="pbtn">View Code </button></a>
176+
<a href="https://mulayharshal.github.io/portfolio/" target="_blank"><button class="pbtn">View Live </button></a>
177+
</div>
178+
</div>
179+
</div>
180+
181+
</div>
182+
139183
<!-- Skills------------------------------------------------------------------------------ -->
140184
<div id="skills" class="skills">
141185
<h2 class="myskill">My Skills</h2>
@@ -279,7 +323,7 @@ <h3 class="contactname">Website</h3>
279323
<a href="#aboutme" class="navbarLink ">About</a>
280324
</li>
281325
<li>
282-
<a href="#" class="navbarLink ">Project</a>
326+
<a href="#projects" class="navbarLink ">Project</a>
283327
</li>
284328
<li>
285329
<a href="#skills" class="navbarLink ">Skills</a>
@@ -293,7 +337,7 @@ <h3 class="contactname">Website</h3>
293337

294338
</ul>
295339
</div>
296-
<p>Copyright &copy; : Designed by Harshal Mulay ❤️</p>
340+
<p>Copyright &copy; 2024 : Designed by Harshal Mulay ❤️</p>
297341
</div>
298342

299343

‎style.css‎

Lines changed: 126 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,129 @@ body{
376376

377377
/* about end ------------------------------------------------------------------------------------------------- */
378378

379+
/* Project Start ------------------------------------------------------------------------------------------------- */
380+
.projects{
381+
width: 100%;
382+
/* height: 100vh; */
383+
background-color: black;
384+
color: white;
385+
display: flex;
386+
flex-direction: column;
387+
align-items: center;
388+
text-align: center;
389+
}
390+
.myprojects{
391+
margin-top: 8%;
392+
color: orange;
393+
font-family: 'Gill Sans MT';
394+
}
395+
.projectContainer{
396+
display: flex;
397+
flex-wrap: wrap;
398+
justify-content: space-evenly;
399+
width: 80%;
400+
margin-top: 3%;
401+
gap: 20px;
402+
background-color: #141414;
403+
border-radius: 50px;
404+
padding: 20px;
405+
}
406+
.project{
407+
height: 380px;
408+
width: 500px;
409+
box-shadow: 0px 0px 9px white;
410+
border-radius: 20px;
411+
background-color: black;
412+
border: 1px solid black;
413+
margin-top: 10px;
414+
margin-bottom: 10px;
415+
416+
}
417+
.project:hover{
418+
box-shadow: 0px 0px 15px orange;
419+
transform: scale(1.03);
420+
transition: all 0.3s ease-in-out;
421+
}
422+
.projectimg{
423+
width: 100%;
424+
height: 55%;
425+
border-radius: 20px 20px 0px 0px;
426+
427+
}
428+
.projectdata{
429+
height: 25%;
430+
}
431+
.projectname{
432+
color: orange;
433+
text-align: center;
434+
font-size:x-large;
435+
margin: 10px;
436+
}
437+
.projectinfo{
438+
color: lightskyblue;
439+
text-align: center;
440+
margin: 10px;
441+
word-wrap: break-word;
442+
}
443+
.projectbtns{
444+
display: flex;
445+
width: 90%;
446+
height: 4rem;
447+
justify-content: space-between;
448+
padding-left: 20px;
449+
padding-right: 20px;
450+
451+
}
452+
.pbtn{
453+
border: 2px solid white;
454+
background-color: #141414;
455+
color: white;
456+
height: 2.5rem;
457+
width: 10rem;
458+
border-radius: 1rem;
459+
margin-top: 10px;
460+
}
461+
.pbtn:hover{
462+
border-color: orange;
463+
color: orange;
464+
box-shadow: 0 0 20px white;
465+
}
466+
@media (max-width:700px){
467+
.projects{
468+
height:fit-content;
469+
margin-top: 30px;
470+
}
471+
.projectContainer{
472+
width: 96%;
473+
justify-content: center;
474+
padding: 0;
475+
}
476+
.project{
477+
width: 90%;
478+
height: 350px;
479+
box-shadow: 0px 0px 6px white;
480+
}
481+
.projectimg{
482+
height: 50%;
483+
}
484+
.projectdata{
485+
height: 30%;
486+
font-size: small;
487+
}
488+
/* .projectbtns{
489+
490+
} */
491+
.pbtn{
492+
width: 8rem;
493+
}
494+
}
495+
/* Project end ------------------------------------------------------------------------------------------------- */
496+
497+
498+
499+
500+
501+
379502
/* Skills start ------------------------------------------------------------------------------------------------- */
380503

381504
.skills{
@@ -430,12 +553,15 @@ body{
430553
width: 170px;
431554
height:170px;
432555
margin: 0px;
556+
transition: all 0.3s ease-in-out;
433557
}
434558
.skill:hover > .skillimg{
435559
width: 4.5em;
560+
transition: all 0.3s ease-in-out;
436561
}
437562
.skill:hover> .skillname{
438563
font-size: 0.9em;
564+
transition: all 0.3s ease-in-out;
439565
}
440566
.skillimg{
441567
border-radius: 50%;
@@ -738,26 +864,3 @@ body{
738864

739865
/* comman Animation start */
740866

741-
/* right slide ing */
742-
/* @keyframes slideInRight {
743-
from{
744-
transform: translateX(100%);
745-
opacity: 0;
746-
}
747-
to{
748-
transform: translateX(0);
749-
opacity: 1;
750-
}
751-
}
752-
753-
754-
@keyframes slideInLeft {
755-
from{
756-
transform: translateX(-100%);
757-
opacity: 0;
758-
}
759-
to{
760-
transform: translateX(0);
761-
opacity: 1;
762-
}
763-
} */

0 commit comments

Comments
 (0)