release/1.5.2 rc (#26)

* feat: 🎸 Created Animate Counter

* feat: 🎸 Created Typewriter Animation

* feat: 🎸 Updated Yarn.lock

* fix: 🐛 Correction in PurgeCSS [WEBPACK]

* feat: 🎸 Updated Version

* feat: 🎸 Created Animated Back to Top

* style: 💄 Removed Letter Spacing

Author: thiagosauddev

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thiagosauddev.github.io",
-	"version": "1.4.1-rc",
+	"version": "1.5.2-rc",
 	"license": "MIT",
 	"main": "./src/index.js",
 	"description": "Turning ideas into reality, High-performance solutions, Take your business to the next level!",

src/index.js

@@ -1,7 +1,11 @@
-// SCRIPTS
+// SCRIPTS [IMPORTANTS]
 import "@scripts/bootstrap.min.js";
 import "@scripts/particles.js";
 import "@scripts/google-analytics.js";
 
+// SCRIPTS [ANIMATIONS]
+import "@scripts/animate-back-to-top.js";
+import "@scripts/animate-counter.js";
+
 // SCSS
 import "@scss/index.scss";

src/pages/index.html

@@ -72,14 +72,14 @@ <h1 class="fs-2 fw-semibold my-0">SAUD</h1>
 						<div class="ts-width-250 py-1 px-2 bg-secondary rounded-2 fw-medium fs-5 text-primary text-center text-dark">Front-End Developer</div>
 
 						<div class="mt-2 d-flex align-items-center flex-column text-center">
-							<h1 class="fs-1 fw-bold text-white">Turning ideas into reality</h1>
+							<h1 class="fs-1 fw-bold text-white typewriter">Turning ideas into reality</h1>
 							<p class="fs-5 fw-light px-sm-1 mt-3 mb-0">High-performance solutions,</p>
 							<p class="fs-5 fw-light px-sm-1">Take your business to the next level!</p>
 						</div>
 
 						<div class="d-flex align-items-center gap-5">
 							<div class="d-flex flex-column flex-lg-row align-items-center text-center gap-3">
-								<h1 class="fs-1 fw-bold text-success m-0">+16</h1>
+								<h1 id="animate-counter-years-experience" class="fs-1 fw-bold ts-width-68 text-success m-0">+0</h1>
 								<span class="fs-6 fw-light">
 									YEARS
 									<br />
@@ -88,7 +88,7 @@ <h1 class="fs-1 fw-bold text-success m-0">+16</h1>
 							</div>
 
 							<div class="d-flex flex-column flex-lg-row align-items-center text-center gap-3">
-								<h1 class="fs-1 fw-bold text-success m-0">+10</h1>
+								<h1 id="animate-counter-projects-delivered" class="fs-1 fw-bold ts-width-68 text-success m-0">+0</h1>
 								<span class="fs-6 fw-light">
 									PROJECTS
 									<br />
@@ -441,6 +441,22 @@ <h1 class="fs-2 fw-light text-success">E-mail</h1>
 			</footer>
 		</main>
 
+		<!-- <div class="position-fixed bottom-0 end-0 bg-success rounded-2 fw-medium fs-5 text-primary">
+
+		</div> -->
+
+		<button
+			id="animation-back-to-top"
+			class="btn position-fixed bottom-0 end-0 bg-success text-primary rounded-2 border-0 mx-3 mb-5"
+			type="button"
+			data-bs-target="#carouselCustomers"
+			data-bs-slide-to="0"
+			aria-current="true"
+			aria-label="Slider Carousel Customer 1"
+		>
+			<i class="bi bi-arrow-up fs-4"></i>
+		</button>
+
 		<div id="particles-js" class="position-fixed top-0 z-n1 w-100 h-100"></div>
 	</body>
 

src/scripts/animate-back-to-top.js

@@ -0,0 +1,16 @@
+const button = document.getElementById("animation-back-to-top");
+
+window.addEventListener("scroll", () => {
+	const scrollHeight = document.documentElement.scrollHeight;
+	const scrollPosition = window.innerHeight + window.scrollY;
+
+	if ((scrollHeight - scrollPosition) / scrollHeight <= 0.4) {
+		button.classList.add("show");
+	} else {
+		button.classList.remove("show");
+	}
+});
+
+button.addEventListener("click", () => {
+	window.scrollTo({ top: 0, behavior: "smooth" });
+});

src/scripts/animate-counter.js

@@ -0,0 +1,19 @@
+function animateCounter(elementID, maxValue) {
+	let count = 0;
+
+	const COUNTER_ELEMENT = document.getElementById(elementID);
+	const INCREMENT = maxValue / (2000 / 10);
+
+	const ANIMATE = setInterval(() => {
+		if (count < maxValue) {
+			count += INCREMENT;
+			COUNTER_ELEMENT.innerText = `+${Math.ceil(count)}`;
+		} else {
+			clearInterval(ANIMATE);
+		}
+	}, 10);
+}
+
+// START ANIMATION
+animateCounter("animate-counter-years-experience", 15);
+animateCounter("animate-counter-projects-delivered", 9);

src/scss/animations/_back-to-top.scss

@@ -0,0 +1,18 @@
+/* stylelint-disable selector-max-id */
+@import "@scss/mixins/breakpoints";
+
+#animation-back-to-top {
+	display: none;
+
+	@include breakpoint("xlg") {
+		display: block;
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.5s;
+
+		&.show {
+			visibility: visible;
+			opacity: 1;
+		}
+	}
+}

src/scss/animations/_typewriter.scss

@@ -0,0 +1,23 @@
+@keyframes typing {
+	from {
+		width: 0;
+	}
+
+	to {
+		width: 100%;
+	}
+}
+
+@keyframes blink-caret {
+	50% {
+		border-color: transparent;
+	}
+}
+
+*.typewriter {
+	margin: 0 auto;
+	overflow: hidden;
+	white-space: nowrap;
+	border-right: 0.15em solid #48e6c4;
+	animation: typing 4.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}

src/scss/index.scss

@@ -2,7 +2,9 @@
 @import "@scss/vendors/bootstrap/index";
 
 // ANIMATIONS
+@import "@scss/animations/back-to-top";
 @import "@scss/animations/floating";
+@import "@scss/animations/typewriter";
 
 // MIXINS
 @import "@scss/mixins/scrollbar";

src/scss/mixins/_breakpoints.scss

@@ -0,0 +1,17 @@
+$breakpoints: (
+	"sm": 576px,
+	"md": 768px,
+	"lg": 992px,
+	"xlg": 1200px,
+);
+
+// Crie um mixin para lidar com os media queries
+@mixin breakpoint($name) {
+	@if map-has-key($breakpoints, $name) {
+		@media (min-width: map-get($breakpoints, $name)) {
+			@content;
+		}
+	} @else {
+		@warn "Unfortunately, no breakpoint was found with the name '#{$name}'.";
+	}
+}

webpack.config.js

@@ -153,7 +153,10 @@ module.exports = {
 			filename: "static/css/[name].[contenthash:8].css",
 			chunkFilename: "static/css/[id].[contenthash:8].chunk.css",
 		}),
-		new PurgeCSSPlugin({ paths: GLOB.sync(`${PATH.join(__dirname, "src")}/**/*`, { nodir: true }) }),
+		new PurgeCSSPlugin({
+			paths: GLOB.sync(`${PATH.join(__dirname, "src")}/**/*`, { nodir: true }),
+			only: ["bundle", "vendor"],
+		}),
 		new CopyPlugin({
 			patterns: [
 				{