Skip to content

Commit

Permalink
udpate 2024 zoom and gif
Browse files Browse the repository at this point in the history
  • Loading branch information
@phanremy
phanremy committed Mar 15, 2024
1 parent 1f4fca8 commit 6c64445
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 26 deletions.
Binary file added images/kitwe.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/wtd.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 25 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,21 +68,14 @@ <h2 class="animated zoomIn">
<div class="container">
<div class="portfolio-card text-center d-flex-center">
<div class="gallery" data-flickity='{ "cellAlign": "left", "contain": true, "imagesLoaded": true }'>





<div class="project-card">
<div data-class="d-flex-between animfadin2 delay-1s">
<div class="project-img" style="background: url(images/phungconsulting.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
Phung Consulting <br> a website in preproduction <br> for an engineering consulting firm <br>(freelance mission)
</p>
<br>
<a href="https://phungconsulting.com/" target="_blank">
➡️ Visit website
</a>
</div>
</div>
<div class="project-card">
<div data-class="d-flex-between animfadin2 delay-1s">
<div class="project-img" style="background: url(); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<div class="project-img" style="background: url(images/kitwe.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
KITWE App <br> make family tree easily <br> use AI to know your family links <br> manage your loved ones' birthdays
</p>
Expand All @@ -100,14 +93,22 @@ <h2 class="animated zoomIn">
</div>
<div class="project-card">
<div data-class="d-flex-between animfadin2 delay-1s">
<div class="project-img" style="background: url(); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<div class="project-img" style="background: url(images/phungconsulting.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
WTD App <br> what to do in Paris? <br> filter the city API to find activities
Phung Consulting <br> a website in preproduction <br> for an engineering consulting firm <br>(freelance mission)
</p>
<br>
<a href="https://wtd-app.fly.dev/" target="_blank">
<a href="https://phungconsulting.com/" target="_blank">
➡️ Visit website
</a>
</div>
</div>
<div class="project-card">
<div data-class="d-flex-between animfadin2 delay-1s">
<div class="project-img" style="background: url(images/wtd.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
WTD App <br> what to do in Paris? <br> filter the city API to find activities
</p>
<br>
<p>
<a href="https://github.com/phanremy/wtd-app" class="text-center" target="_blank">
Expand Down Expand Up @@ -162,6 +163,12 @@ <h2 class="animated zoomIn">
</div>
</div>
</div>






</div>
</div>
</div>
Expand Down Expand Up @@ -201,7 +208,7 @@ <h3>Coding languages used</h3>
<h3 style="padding-top: 40px;">My study projects </h3>
<div class="gallery" data-flickity='{ "cellAlign": "left", "contain": true, "imagesLoaded": true }'>
<div class="project-card">
<div class="project-img project-imglw" style="background: url(images/lewagon-sim.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<div class="project-img" style="background: url(images/lewagon-sim.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
Le Wagon Simulator <br> video game made in 2 weeks
</p>
Expand All @@ -214,7 +221,7 @@ <h3 style="padding-top: 40px;">My study projects </h3>
</p>
</div>
<div class="project-card">
<div class="project-img project-imgmr" style="background: url(images/milfr.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<div class="project-img" style="background: url(images/milfr.gif); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent;"></div>
<p>
AirBnB clone <br> made in 5 days
</p>
Expand Down
38 changes: 30 additions & 8 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,23 @@ body {
}

.project-img {
width:500px;
width: 500px;
height: 300px;
display: inline-block;
background: transparent;
/*box-shadow: 1px 3px 30px rgba(0,0,0,0.1);*/
transition: all .5s ease;
}


.project-img:hover{
width: 700px;
height: 500px;
transition: all .5s ease;
}

/*.project-img:hover{
width:500px;
width: 500px;
height: 300px;
transition: all .5s ease;
}*/
Expand Down Expand Up @@ -270,7 +277,15 @@ p {
width: 500px;
height: 400px;
}


.project-img:hover{
width: 700px;
height: 500px;
transition: all .5s ease;
}
}

@media (max-width: 720px) {
/* For a screen < 720px, this CSS will be read */
.container {
Expand All @@ -285,6 +300,12 @@ p {
width: 300px;
height: 200px;
}

.project-img:hover{
width: 400px;
height: 400px;
transition: all .5s ease;
}
}

@media (max-width: 540px) {
Expand All @@ -302,14 +323,15 @@ p {
height: 200px;
}

.project-card a {
font-size:12px;
}

.project-img:hover{
width:400px;
height: 200px;
transition: all .5s ease;
width: 400px;
height: 400px;
transition: all .5s ease;
}

.project-card a {
font-size:12px;
}
}

Expand Down

0 comments on commit 6c64445

Please sign in to comment.