diff --git a/index.html b/index.html
index f78d45d..604088a 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,13 @@
+
@@ -39,20 +49,11 @@
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Londrina+Sketch&family=Londrina+Solid&display=swap"
rel="stylesheet"
/>
-
-
-
Sajjad Hashemian
-
Fullstack web and web3 developer
+
<%- split("Sajjad Hashemian"); %>
+
<%- split("Fullstack web and web3 developer"); %>
-
diff --git a/package.json b/package.json
index c070bff..5b50f8f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"prettier": "^2.8.7",
"sass": "^1.62.0",
"typescript": "^5.0.2",
- "vite": "^4.3.0"
+ "vite": "^4.3.0",
+ "vite-plugin-ejs": "^1.6.4"
}
}
diff --git a/src/main.ts b/src/main.ts
index 8313691..e6690e6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -53,45 +53,3 @@ const toggleButton = document.querySelector("button");
toggleButton?.addEventListener("click", (e) => {
handleToggleTheme(e.currentTarget as HTMLElement);
});
-
-function revealWords() {
- const h1 = document.querySelector("h1");
- const p = document.querySelector("p");
-
- if (!h1 || !p) {
- return;
- }
-
- split(h1);
- split(p);
-
- const spans = document.querySelectorAll("h1 > span, p > span");
-
- spans.forEach((span, i) => {
- const inner = span.firstElementChild;
-
- inner?.animate(
- {
- transform: ["translateY(150%)", "translateY(0%)"],
- },
- {
- delay: i * 80,
- duration: 400,
- fill: "forwards",
- easing: "cubic-bezier(0.65, 0, 0.35, 1)",
- }
- );
- });
-
- function split(el: HTMLElement) {
- const orig = el.innerText;
- el.innerHTML = orig
- .split(" ")
- .map((w) => `${w}`)
- .join(" ");
- el.style.opacity = "1";
- return orig;
- }
-}
-
-revealWords();
diff --git a/src/style.scss b/src/style.scss
index c759833..c80289c 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -95,7 +95,6 @@ h1 {
text-transform: uppercase;
margin-bottom: 0.2em;
line-height: 1;
- opacity: 0;
@media (width < 768px) {
font-size: 5.5rem;
@@ -113,18 +112,36 @@ h1 {
p {
font-size: 1.875rem;
margin: 0;
- opacity: 0;
}
h1,
p {
+ @keyframes slideIn {
+ from {
+ transform: translateY(150%);
+ }
+
+ to {
+ transform: translateY(0%);
+ }
+ }
+
> span {
clip-path: inset(0);
display: inline-block;
+ @for $i from 1 through 12 {
+ &:nth-child(#{$i}) {
+ > span {
+ animation-delay: $i * 0.08s;
+ }
+ }
+ }
+
> span {
display: inline-block;
transform: translateY(150%);
+ animation: slideIn 0.4s forwards cubic-bezier(0.65, 0, 0.35, 1);
}
}
}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..abe882c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "vite";
+import {ViteEjsPlugin} from "vite-plugin-ejs";
+
+export default defineConfig({
+ plugins: [
+ ViteEjsPlugin(),
+ ],
+});
diff --git a/yarn.lock b/yarn.lock
index e5024b0..cbc9514 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -381,6 +381,11 @@ ast-types-flow@^0.0.7:
resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+async@^3.2.3:
+ version "3.2.4"
+ resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+ integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+
autoprefixer@^10.4.14:
version "10.4.14"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
@@ -433,6 +438,13 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
+brace-expansion@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+ integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+ dependencies:
+ balanced-match "^1.0.0"
+
braces@^3.0.2, braces@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -478,7 +490,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz#f58a717afe92f9e69d0e35ff64df596bfad93912"
integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.0.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -726,6 +738,13 @@ domutils@^3.0.1:
domelementtype "^2.3.0"
domhandler "^5.0.1"
+ejs@^3.1.8:
+ version "3.1.9"
+ resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
+ integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+ dependencies:
+ jake "^10.8.5"
+
electron-to-chromium@^1.4.284:
version "1.4.369"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz#a98d838cdd79be4471cd04e9b4dffe891d037874"
@@ -1043,6 +1062,13 @@ file-entry-cache@^6.0.1:
dependencies:
flat-cache "^3.0.4"
+filelist@^1.0.1:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+ integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+ dependencies:
+ minimatch "^5.0.1"
+
fill-range@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -1445,6 +1471,16 @@ isexe@^2.0.0:
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+jake@^10.8.5:
+ version "10.8.5"
+ resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+ integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+ dependencies:
+ async "^3.2.3"
+ chalk "^4.0.2"
+ filelist "^1.0.1"
+ minimatch "^3.0.4"
+
js-sdsl@^4.1.4:
version "4.4.0"
resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
@@ -1552,13 +1588,20 @@ micromatch@^4.0.4:
braces "^3.0.2"
picomatch "^2.3.1"
-minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
dependencies:
brace-expansion "^1.1.7"
+minimatch@^5.0.1:
+ version "5.1.6"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+ integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+ dependencies:
+ brace-expansion "^2.0.1"
+
ms@2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2228,6 +2271,13 @@ util-deprecate@^1.0.2:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+vite-plugin-ejs@^1.6.4:
+ version "1.6.4"
+ resolved "https://registry.yarnpkg.com/vite-plugin-ejs/-/vite-plugin-ejs-1.6.4.tgz#aa30820d8235774e717d902754a552480cf7758b"
+ integrity sha512-23p1RS4PiA0veXY5/gHZ60pl3pPvd8NEqdBsDgxNK8nM1rjFFDcVb0paNmuipzCgNP/Y0f/Id22M7Il4kvZ2jA==
+ dependencies:
+ ejs "^3.1.8"
+
vite@^4.3.0:
version "4.3.1"
resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.1.tgz#9badb1377f995632cdcf05f32103414db6fbb95a"