refactor(css/app.css, index.html, js/scroll_reveal.js): add styled "View More Projects" card and animate it

Author: mrunal77

css/app.css

@@ -268,6 +268,38 @@ article.body h1 {
 	}
 }
 
+.view-more-card {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+	border: none !important;
+	color: white;
+	transition: all 0.4s ease;
+	cursor: pointer;
+}
+
+.view-more-card:hover {
+	transform: translateY(-10px);
+	box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.view-more-card .card-title {
+	color: white !important;
+	font-size: 24px;
+	margin-bottom: 10px;
+}
+
+.view-more-card .card-title i {
+	font-size: 32px;
+	margin-right: 10px;
+}
+
+.view-more-card .card-text {
+	color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.view-more-card .card-body {
+	padding: 40px 20px;
+}
+
 .animate-fade-in-up {
 	animation: fadeInUp 0.8s ease forwards;
 }

index.html

@@ -460,6 +460,18 @@ <h4 class="card-title">College Mini Project</h4>
             </div>
           </div>
         </div>
+        <div class="col-md-12 col-sm-12 text-center mt-4">
+          <div class="card h-100 projects view-more-card">
+            <div class="card-body d-flex flex-column justify-content-center align-items-center">
+              <a href="https://github.com/mrunal77/" style="text-decoration: none;" target="_blank">
+                <h4 class="card-title"><i class="fa-brands fa-github"></i> View More Projects</h4>
+              </a>
+              <p class="card-text text-center">
+                Check out more projects on my GitHub profile
+              </p>
+            </div>
+          </div>
+        </div>
         <!-- </div> -->
       </div>
       <br />
@@ -550,7 +562,7 @@ <h4 class="white">Here I am located...</h4>
             </li>            
           </ul>
         </div>
-        <div class="col-sm-6 col-md-6 text-center" style="color:whitesmoke;">
+        <div class="col-sm-6 col-md-6 text-center designed-text" style="color:whitesmoke;">
           Designed in - 2017
         </div>
       </div>

js/scroll_reveal.js

@@ -87,6 +87,12 @@ document.addEventListener("contextmenu", event => event.preventDefault());
       interval: 200
     });
 
+    sr.reveal(".view-more-card", {
+      duration: 1000,
+      origin: "top",
+      delay: 300
+    });
+    
     sr.reveal(".contact", {
       duration: 1000,
       origin: "bottom",
@@ -120,4 +126,10 @@ sr.reveal(".ser-title", {
     sr.reveal("#footer", {
       duration: 1000,
       origin: "bottom"
+    });
+    
+    sr.reveal(".designed-text", {
+      duration: 1000,
+      origin: "right",
+      delay: 300
     });