Skip to content

Commit

Permalink
project section animations + cascading grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@reversed-heartbeat
reversed-heartbeat committed Sep 8, 2023
1 parent dbd72dd commit 156ee99
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 85 deletions.
Binary file added Images/5oxKYcklZx.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion Pages/Blog/blog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ img:hover {


img:active {
transform: rotate(0.01turn);
transform: rotate(0.01turn) scale(95%);
transition: all .1s ease;
cursor: pointer;
}
Expand Down
17 changes: 17 additions & 0 deletions Pages/Blog/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,23 @@
<div class="page">
<h1 class="content-title">Posts & Updates</h1>


<article class="post-entry">
<div class="post-h-line"></div>
<h4>8th Sep, 2023</h4>
<p>This is one of my very first time to use a Javascript library made by someone else. Credits to <a
href="https://desandro.com/">David DeSandro</a>! for his Masonry JS library.</p>
<span><strong>What's going on!</strong></span>
<ul>
<li>Working with the "Project" section.
<div class="image-attachments">
<a href="/Images/5oxKYcklZx.png" target="_blank"><img src="/Images/5oxKYcklZx.png"
alt="Project section Snapshot"></a>
</div>
</li>
</ul>
</article>

<article class="post-entry">
<div class="post-h-line"></div>
<h4>7th Sep, 2023</h4>
Expand Down
40 changes: 31 additions & 9 deletions Pages/Projects/projects.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
margin-top: 40px;
}

.active-projects-list{
/* .active-projects-list{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: baseline;
}
} */

/* @media (min-width: 760px) {
.active-projects-list { grid-template-columns: 1fr; }
Expand All @@ -44,11 +44,25 @@
.active-projects-list { grid-template-columns: repeat(4, 1fr); }
} */


.project-card-container:hover {
transform: rotate(-0.003turn) scale(104%);
transition: all .2s ease;
cursor: pointer;
}

.project-card-container:active {
transform: rotate(0.005turn) scale(95%);
transition: all .05s ease;
cursor: pointer;
}

.project-card-container {
max-width: 290px;
margin: 10px 0;
background-color: red;
justify-content: flex-start;
width: calc(285px + 0.5%);
margin-bottom: 15px;
/* ANIMATION DEFAULT */
transform: scale(100%);
transition: all .2s ease;
}

.project-card-top {
Expand All @@ -58,33 +72,41 @@
padding: 15px 15px 10px 15px;
}

.special {
background: rgba(34, 192, 195, 0.397);
background: linear-gradient(44deg, rgba(255, 67, 108, 0.3) 0%, rgba(39, 255, 165, 0.3) 100%);
}


.project-card-description {
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: rgb(255, 255, 255);
padding: 5px 15px;
font-size: 16px;
font-size: 15px;
}

.project-card-top p, .project-card-bottom p{
margin: 10px 2px 2px 0;
color: #444;
}

.project-card-description p {
margin: 5px 0;
color: #555;
font-size: 14px;
word-spacing: 0.03rem;
}

.project-card-label {
border-radius: 12px;
border: 1px solid #bbb;
background-color: #ffffff;
color: #777;
padding: 1px 10px;
display: inline-block;
user-select: none;
font-size: 1rem;
font-size: 0.8rem;
}


Expand Down
111 changes: 36 additions & 75 deletions Pages/Projects/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
<!-- SCRIPTS -->
<script src="/Scripts/jquery.js"></script>
<script src="/Scripts/load-sidebar.js"></script> <!-- load sidebar -->
<script src="/Scripts/masonry.pkgd.js"></script> <!-- Masonry -->
<script src="/Scripts/load-masonry.js"></script>
</head>

<body>
Expand All @@ -43,83 +45,42 @@ <h4 class="inline">Active</h4>

<div class="active-projects-list"> <!-- LIST OF PROJECTS -->

<a href="https://reversed-heartbeat.github.io">
<div class="project-card-container">
<div class="project-card-top special">
<h5 class="rainbow-text">This Website Itself 🕸</h5>
<p class="project-card-label">⭐ My Personal Website</p>
<p class="project-card-label">🏗️ WIP</p>
<p class="project-card-label">🌱 Started 28 Aug, 2023</p>
</div>
<div class="project-card-description">
<p>This is where I share my journey, stuffs, and thoughts to connect with you to learn from
each other. I hope you find this helpful.</p>
</div>
<div class="project-card-bottom special">
</div>
</div class="project-card-container">
</a>

<a href="https://reversed-heartbeat.github.io/odin-recipes/" target="_blank">
<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes 🥗</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">🏁 Finalized 7 Sep, 2023</p>
<p class="project-card-label">🌱 Started 6 Sep 2023</p>
</div>
<div class="project-card-description">
<p>A very simple recipe (HTML only) website from my Odin Coding Journey.</p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">
</a>

</div> <!-- END </DIV> <== LIST OF PROJECTS -->

<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">Finalized 7 Sep, 2023</p>
</div>
<div class="project-card-description">
<p>Have you ever seen these recipes?</p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">

<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">Finalized 7 Sep, 2023</p>
</div>
<div class="project-card-description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quas obcaecati rem dolor
voluptate corporis. Quibusdam excepturi eius libero facere sunt odit placeat officiis
laborum.</p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">

<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">Finalized 7 Sep, 2023</p>
</div>
<div class="project-card-description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quos doloremque nostrum
dolores unde dicta molestias harum, a beatae voluptatum cupiditate officia aspernatur
suscipit fugit sunt ullam vero laudantium laboriosam blanditiis minus perspiciatis! Culpa
nobis harum animi incidunt sint corporis illum, a non quae officia deleniti perferendis nam
possimus odio!</p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">

<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">Finalized 7 Sep, 2023</p>
</div>
<div class="project-card-description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus dicta fugiat saepe nam
illo veniam dolores architecto sapiente harum suscipit est expedita tempore, natus sit at
non blanditiis. Illo, ad./p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">

<div class="project-card-container">
<div class="project-card-top">
<h5>The Odin Recipes</h5>
<p class="project-card-label">Website</p>
<p class="project-card-label">Finalized 7 Sep, 2023</p>
</div>
<div class="project-card-description">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, consequuntur. Harum quis
quisquam dolorum unde?</p>
</div>
<div class="project-card-bottom">
</div>
</div class="project-card-container">


</div>


<!-- OTHER PROJECTS LIST / TIMELINE -->
Expand Down
8 changes: 8 additions & 0 deletions Scripts/load-masonry.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
$(function () {
$('.active-projects-list').masonry({
itemSelector: '.project-card-container',
columnWidth: '.project-card-container',
gutter: 15,

})
})
6 changes: 6 additions & 0 deletions Styles/inline.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
text-indent: 32px;
}

.rainbow-text {
/* CREDITS TO https://w3bits.com/rainbow-text/ */
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text;
color: transparent;
}


/* DIV */
.inline {
Expand Down

0 comments on commit 156ee99

Please sign in to comment.