Skip to content

Commit

Permalink
webgl update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thizh
Thizh committed Jan 9, 2024
1 parent 781d573 commit 8073acb
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 93 deletions.
146 changes: 70 additions & 76 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@
<title>ThIzH WiCk</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gluten&effect=fire-animation">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/mouse.css">
<link rel="stylesheet" href="./styles/aurora.css">
<link rel="stylesheet" href="./styles/mouse2.css">
<link rel="stylesheet" href="./styles/snowflakes.css">
<script>
function showOverlayThizh() {
Expand All @@ -29,9 +28,9 @@
var overlayCV = document.getElementById("overlay-cv");

if (overlayCV.style.display === "block") {
overlayCV.style.display = "none";
overlayCV.style.display = "none";
} else {
overlayCV.style.display = "block";
overlayCV.style.display = "block";
}
}

Expand All @@ -47,90 +46,85 @@
</head>

<body>
<script src="./script.js"></script>
<div id="overlay-me">
<div id="close-button" onclick="closeOverlayThizh()">X</div>
<div id="overlay-content">
<!-- partial:index.partial.html -->
<html>
</body>
<script src="./script.js"></script>
<div id="overlay-me">
<div id="close-button" onclick="closeOverlayThizh()">X</div>
<div id="overlay-content">

<p class="paragraphs"><span class="greet">Greetings!</span> I am a passionate and dedicated software
engineering undergraduate at the prestigious Open University of Sri Lanka. My journey into the world of
technology and programming has been a thrilling adventure.</p><br /><br />
<p class="paragraphs"><span class="greet">Greetings!</span> I am a passionate and dedicated software
engineering undergraduate at the prestigious Open University of Sri Lanka. My journey into the world of
technology and programming has been a thrilling adventure.</p><br /><br />

<p class="paragraphs">As a student with a relentless curiosity and a hunger for knowledge, I've immersed
myself in the ever-evolving field of programming. Through my academic pursuits and personal projects,
I've honed my skills and embraced the art of problem-solving. My journey is fueled by a desire to create
innovative solutions and to explore the limitless possibilities of code.</p><br /><br />
<p class="paragraphs">As a student with a relentless curiosity and a hunger for knowledge, I've immersed
myself in the ever-evolving field of programming. Through my academic pursuits and personal projects,
I've honed my skills and embraced the art of problem-solving. My journey is fueled by a desire to create
innovative solutions and to explore the limitless possibilities of code.</p><br /><br />

<p class="paragraphs">My commitment to excellence is reflected in my dedication to mastering various
programming languages, software development methodologies, and emerging technologies. I relish the
challenges that programming presents and thrive in the pursuit of elegant, efficient, and creative
solutions.</p><br /><br />
</div>
<p class="paragraphs">My commitment to excellence is reflected in my dedication to mastering various
programming languages, software development methodologies, and emerging technologies. I relish the
challenges that programming presents and thrive in the pursuit of elegant, efficient, and creative
solutions.</p><br /><br />
</div>
<div>
<iframe id="overlay-cv" src="https://drive.google.com/file/d/1yQf6nd9f4X5jJhW8ZDIYBy9-Fl4wko1s/preview"></iframe>
</div>
<div>
<iframe id="overlay-cv" src="https://drive.google.com/file/d/1yQf6nd9f4X5jJhW8ZDIYBy9-Fl4wko1s/preview"></iframe>

<div class="wrapper">
<div class="navbar">
<nav>
<ul>
<li><a href="https://linktr.ee/thizh" style="cursor: pointer;" id="resume">linktree</a></li>
<li onclick="showOverlayCV()" style="cursor: pointer;" id="resume">résumé</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col">
<h1 class="name">Thisitha Wickramaarachchi</h1>
<p style="font-size: 20px;">AKA <span style="font-family: 'Gluten'; font-size: 30px;"
class="font-effect-fire-animation">Thizh Wick</span></p>
<div style="flex-direction: row;">
<button type="button" onclick="showOverlayThizh()" class="thizh">Who Tf is Thizh?</button>
<a href="https://drive.google.com/file/d/1Zhcyj0M42vsc0MhQwhctcfrPAKqKMahH/preview"><button
type="button" class="resume-btn">résumé</button></a>
</div>
<div class="wrapper">
<div class="navbar">
<nav>
<ul>
<li><a href="https://linktr.ee/thizh" style="cursor: pointer;" id="resume">linktree</a></li>
<li onclick="showOverlayCV()" style="cursor: pointer;" id="resume">résumé</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col">
<h1 class="name">Thisitha Wickramaarachchi</h1>
<p style="font-size: 20px;">AKA <span style="font-family: 'Gluten'; font-size: 30px;"
class="font-effect-fire-animation">Thizh Wick</span></p>
<div style="flex-direction: row;">
<button type="button" onclick="showOverlayThizh()" class="thizh">Who Tf is Thizh?</button>
<a href="https://drive.google.com/file/d/1Zhcyj0M42vsc0MhQwhctcfrPAKqKMahH/preview"><button
type="button" class="resume-btn">résumé</button></a>
</div>
<div class="col">
<div class="container">
<div class="hero-circle">
<div class="hero-rotate" id="circle">
<div class="social">
<a href="https://github.com/Thizh" aria-label="my github"><img
src="./assets/github.png" alt="my github" /></a>
</div>
<div class="social">
<a href="https://discordapp.com/users/926325270133227600"
aria-label="my discord"><img src="./assets/discord.png" alt="my discord" /></a>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/thizh" aria-label="my linkedin"><img
src="./assets/linkedin.png" alt="my linkedin" /></a>
</div>
<div class="social">
<a href="mailto:[email protected]" aria-label="my mail"><img
src="./assets/gmail.png" alt="my mail" /></a>
</div>
</div>
<div class="col">
<div class="container">
<div class="hero-circle">
<div class="hero-rotate" id="circle">
<div class="social">
<a href="https://github.com/Thizh" aria-label="my github"><img src="./assets/github.png"
alt="my github" /></a>
</div>
<div class="social">
<a href="https://discordapp.com/users/926325270133227600" aria-label="my discord"><img
src="./assets/discord.png" alt="my discord" /></a>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/thizh" aria-label="my linkedin"><img
src="./assets/linkedin.png" alt="my linkedin" /></a>
</div>
<div class="social">
<a href="mailto:thizhwick@gmail.com" aria-label="my mail"><img src="./assets/gmail.png"
alt="my mail" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<article id="wrap">
<article id="lightings">
<section id="one">
<section id="two">
<section id="three">
<section id="four">
<section id="five">
</div>
<canvas></canvas>
</body>

</section>
</section>
</section>
</section>
</section>
</article>
</article>
</html>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
<script src="./script.js"></script>

</html>
</html>
29 changes: 12 additions & 17 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
window.addEventListener("mousemove", function (e) {
var to_append = document.getElementsByClassName('loader-container')[0];
var all = document.getElementsByClassName('loader-container');

var parent_div = document.createElement('div');
parent_div.className = "loader-container";
var inner_div = document.createElement('div');
inner_div.className = "loader";
parent_div.appendChild(inner_div)
var d = document.body.appendChild(parent_div);

parent_div.style.left = (e.clientX - 50)+'px';
parent_div.style.top = (e.clientY - 50)+'px';

if(document.getElementsByClassName('loader-container').length > 50) {
document.body.removeChild(to_append)
}
window['webgl-fluid'].default(document.querySelector('canvas'));
document.querySelector('.wrapper')
.addEventListener('mousemove', event => {
console.log('move');
newEvent = new event.constructor(
event.type, event);
document.querySelector('canvas')
.dispatchEvent(newEvent);
});
document.querySelector('button')
.addEventListener('click', event => {
console.log('button clicked');
});
14 changes: 14 additions & 0 deletions styles/mouse2.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
body {
position: relative;
z-index: -999;
}

canvas {
width: 100%;
height: 100%;
position: fixed;
inset: 0;
z-index: -1;
background-color: black;
opacity: 0.50;
}

0 comments on commit 8073acb

Please sign in to comment.