animations on the way :D
This commit is contained in:
parent
52e1c4056b
commit
4678bace66
1
assets/globe-solid.svg
Normal file
1
assets/globe-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
assets/square-github-brands.svg
Normal file
1
assets/square-github-brands.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
assets/square-gitlab-brands.svg
Normal file
1
assets/square-gitlab-brands.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96zm337.5 12.5l44.6 116.4 .4 1.2c5.6 16.8 7.2 35.2 2.3 52.5c-5 17.2-15.4 32.4-29.8 43.3l-.2 .1-68.4 51.2-54.1 40.9c-.5 .2-1.1 .5-1.7 .8c-2 1-4.4 2-6.7 2c-3 0-6.8-1.8-8.3-2.8l-54.2-40.9L93.5 322.3l-.4-.3-.2-.1c-14.3-10.8-24.8-26-29.7-43.3s-4.2-35.7 2.2-52.5l.5-1.2 44.7-116.4c.9-2.3 2.5-4.3 4.5-5.6c1.6-1 3.4-1.6 5.2-1.8c1.3-.7 2.1-.4 3.4 .1c.6 .2 1.2 .5 2 .7c1 .4 1.6 .9 2.4 1.5c.6 .4 1.2 1 2.1 1.5c1.2 1.4 2.2 3 2.7 4.8l29.2 92.2H285l30.2-92.2c.5-1.8 1.4-3.4 2.6-4.8s2.8-2.4 4.5-3.1c1.7-.6 3.6-.9 5.4-.7s3.6 .8 5.2 1.8c2 1.3 3.7 3.3 4.6 5.6z"/></svg>
|
||||
|
After Width: | Height: | Size: 873 B |
209
index.html
209
index.html
@ -4,49 +4,206 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<title>SolomonLai.ng</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>I am Solomon Laing</h1>
|
||||
<header class="title">
|
||||
<div class="container">
|
||||
<h1>I am <br /> Solomon Laing</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>Trained in Engineering and IT I spend my time building and maintaining software for
|
||||
various companies and organisations. Solving problems is my passion and I strive to get
|
||||
things
|
||||
done, and do them well.</p>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<section class="accent1 region">
|
||||
<div class="container row">
|
||||
<div class="col">
|
||||
<p class="animate-me">Trained in Engineering and IT I spend my time building and maintaining
|
||||
software for
|
||||
various companies and organisations. Solving problems is my passion and I strive to get
|
||||
things
|
||||
done, and do them well.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="animate-me">
|
||||
I have a penchant for Linux (or GNU/Linux if you prefer) and besides maintaining a
|
||||
collection of personalisations through scripts and software customisations, I also manage a
|
||||
homelab on which I self host many of the services that I use daily.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<p>My Presence</p>
|
||||
<section class="accent2 region">
|
||||
<div class="container row cards">
|
||||
<div class="card">
|
||||
<a href="https://www.linkedin.com/in/inkletblot/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
||||
<path fill="currentColor" stroke="currentColor"
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a href="https://gitlab.inkletblot.com/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
||||
<path fill="currentColor" stroke="currentColor"
|
||||
d="M0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96zm337.5 12.5l44.6 116.4 .4 1.2c5.6 16.8 7.2 35.2 2.3 52.5c-5 17.2-15.4 32.4-29.8 43.3l-.2 .1-68.4 51.2-54.1 40.9c-.5 .2-1.1 .5-1.7 .8c-2 1-4.4 2-6.7 2c-3 0-6.8-1.8-8.3-2.8l-54.2-40.9L93.5 322.3l-.4-.3-.2-.1c-14.3-10.8-24.8-26-29.7-43.3s-4.2-35.7 2.2-52.5l.5-1.2 44.7-116.4c.9-2.3 2.5-4.3 4.5-5.6c1.6-1 3.4-1.6 5.2-1.8c1.3-.7 2.1-.4 3.4 .1c.6 .2 1.2 .5 2 .7c1 .4 1.6 .9 2.4 1.5c.6 .4 1.2 1 2.1 1.5c1.2 1.4 2.2 3 2.7 4.8l29.2 92.2H285l30.2-92.2c.5-1.8 1.4-3.4 2.6-4.8s2.8-2.4 4.5-3.1c1.7-.6 3.6-.9 5.4-.7s3.6 .8 5.2 1.8c2 1.3 3.7 3.3 4.6 5.6z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a href="https://github.com/inkletblot/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
||||
<path fill="currentColor" stroke="currentColor"
|
||||
d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a href="https://inkletblot.com/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
|
||||
<path fill="currentColor" stroke="currentColor"
|
||||
d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</section>
|
||||
<section class="accent3 region">
|
||||
<div class="container row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="assets/linkedin-brands.svg" alt="LinkedIn logo" />
|
||||
<div class="row">
|
||||
<h2>Contact</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="contact">+61 478 586 308</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="contact">solomon.laing@taptu.com.au</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="contact">@inkletblot pretty much everywhere</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col">
|
||||
<div class="stagger-visualizer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Thank you for your time.</p>
|
||||
<footer class="foot">
|
||||
<div class="container row">
|
||||
<p>Thank you for your time.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"> </script>
|
||||
<!-- <h2> -->
|
||||
<!-- <span>H</span> -->
|
||||
<!-- <span>E</span> -->
|
||||
<!-- <span>L</span> -->
|
||||
<!-- <span>L</span> -->
|
||||
<!-- <span>O</span> -->
|
||||
<!-- <span> </span> -->
|
||||
<!-- <span>W</span> -->
|
||||
<!-- <span>O</span> -->
|
||||
<!-- <span>R</span> -->
|
||||
<!-- <span>L</span> -->
|
||||
<!-- <span>D</span> -->
|
||||
<!-- </h2> -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
|
||||
|
||||
<script>
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [17, 17];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
targets: '.stagger-visualizer .part',
|
||||
easing: 'easeInOutSine',
|
||||
delay: anime.stagger(50),
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
translateX: [
|
||||
{value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'x'})},
|
||||
{value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'x'})}
|
||||
],
|
||||
translateY: [
|
||||
{value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'y'})},
|
||||
{value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'y'})}
|
||||
],
|
||||
duration: 1000,
|
||||
scale: .5,
|
||||
delay: anime.stagger(100, {grid: grid, from: 'center'})
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
translateX: () => anime.random(-10, 10),
|
||||
translateY: () => anime.random(-10, 10),
|
||||
delay: anime.stagger(8, {from: 'last'})
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
translateX: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'x'}),
|
||||
translateY: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'y'}),
|
||||
rotate: 0,
|
||||
scaleX: 2.5,
|
||||
scaleY: .25,
|
||||
delay: anime.stagger(4, {from: 'center'})
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
rotate: anime.stagger([90, 0], {grid: grid, from: 'center'}),
|
||||
delay: anime.stagger(50, {grid: grid, from: 'center'})
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
scale: .5,
|
||||
scaleX: 1,
|
||||
rotate: 180,
|
||||
duration: 1000,
|
||||
delay: anime.stagger(100, {grid: grid, from: 'center'})
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
.add({
|
||||
scaleY: 1,
|
||||
scale: 1,
|
||||
delay: anime.stagger(20, {grid: grid, from: 'center'})
|
||||
});
|
||||
|
||||
staggersAnimation.play()
|
||||
</script>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
35
main.js
35
main.js
@ -1,2 +1,35 @@
|
||||
/* documentation here: https://animejs.com/documentation/getting-started/installation */
|
||||
import { animate } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/+esm';
|
||||
const { animate, utils, createSpring } = anime;
|
||||
|
||||
// @ts-check
|
||||
|
||||
const $cards = utils.$('.card')
|
||||
|
||||
animate($cards, {
|
||||
// Property keyframes
|
||||
y: [
|
||||
{ to: '-2.75rem', ease: 'outExpo', duration: 600 },
|
||||
{ to: 0, ease: 'outBounce', duration: 800, delay: 100 }
|
||||
],
|
||||
// Property specific parameters
|
||||
rotate: {
|
||||
from: '-1turn',
|
||||
delay: 0
|
||||
},
|
||||
delay: (_, i) => i * 50, // Function based value
|
||||
ease: 'inOutCirc',
|
||||
});
|
||||
|
||||
/**
|
||||
@param {*} card
|
||||
*/
|
||||
const hovorLogo = (card) => {
|
||||
animate(card, {
|
||||
scale: [
|
||||
{ to: 1.1, ease: 'inOut(2)', duration: 50 },
|
||||
{ to: 1, ease: createSpring({ stiffness: 300 }) }
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
$cards.forEach((card) => card.addEventListener('mouseenter', () => hovorLogo(card)))
|
||||
|
||||
132
style.css
132
style.css
@ -0,0 +1,132 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, sans-serif;
|
||||
color: #d7d6d4;
|
||||
background: #1a1617;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.accent1 {
|
||||
color: #d7d6d4;
|
||||
background: #6B5C4A;
|
||||
}
|
||||
|
||||
.accent2 {
|
||||
color: #d7d6d4;
|
||||
background: #564945;
|
||||
}
|
||||
|
||||
.accent3 {
|
||||
color: #d7d6d4;
|
||||
background: #262527;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title,
|
||||
.region {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.foot {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.col:not(:first-child) {
|
||||
padding-top: .5rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
>img {
|
||||
max-width: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:link,
|
||||
a:focus,
|
||||
a:visited {
|
||||
color: #d7d6d4;
|
||||
}
|
||||
|
||||
@media (min-width:600px) {
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.cards {
|
||||
gap: unset;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
.stagger-visualizer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 17rem;
|
||||
height: 17rem;
|
||||
}
|
||||
|
||||
.stagger-visualizer div {
|
||||
/*position: absolute;*/
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #FFF;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user