Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@chichun2002
chichun2002 committed Apr 24, 2024
1 parent f6415a5 commit ad8262f
Show file tree
Hide file tree
Showing 9 changed files with 202 additions and 82 deletions.
Binary file removed Assignemnt 3D Vis 2_web.mp4
View file
Binary file not shown.
Binary file removed Unity Scene_web.mp4
View file
Binary file not shown.
Binary file added WebVideo1.mp4
View file
Binary file not shown.
Binary file added WebVideo2.mp4
View file
Binary file not shown.
Binary file added WebVideo3.mp4
View file
Binary file not shown.
157 changes: 87 additions & 70 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,56 +9,77 @@
</head>
<body>
<div class="root">
<div class="contact">
<h1>CONTACTS</h1>
<h2>Email</h2>
<p>[email protected]</p>
<h2>GITHUB</h2>
<a href="https://github.com/chichun2002">https://github.com/chichun2002</a>
<h2>LINKEDIN</h2>
<a href="www.linkedin.com/in/tristan-fischer-8745762a3">www.linkedin.com/in/tristan-fischer-8745762a3</a>
<h2>X</h2>
<a href="https://twitter.com/chichun2002">https://twitter.com/chichun2002</a>
<div class="rellax" data-rellax-speed="-8">
<div class="backdrop"></div>
<div class="backdrop2"></div>
<div class="backdrop3"></div>
</div>
<div class="contact">
<div class="space"></div>
<div class="content">
<h2>Email</h2>
<p>[email protected]</p>
<h2>GITHUB</h2>
<a href="https://github.com/chichun2002">https://github.com/chichun2002</a>
<h2>LINKEDIN</h2>
<a href="https://www.linkedin.com/in/tristan-fischer-8745762a3">www.linkedin.com/in/tristan-fischer-8745762a3</a>
<h2>X</h2>
<a href="https://twitter.com/chichun2002">https://twitter.com/chichun2002</a>
</div>
</div>
<div class="about">
<h1>ABOUT</h1>
<h2>Introductoin</h2>
<p>My name is Tristan I'm a Software Developer with a pasion for AI and Computer Graphics. I graduated with a bachelor degree in copmuter science and media arts where I specialised in artifical inteligence, specifficaly neural networks and classifiers. Within media arts I studied VFX and 3D workflows, Im pasionate about all things computer science and computer graphics and am constantly experimenting with the latest technologys. </p>
<h2>Software </h2>
<ul>
<li><p>Vscode</p></li>
<li><p>Blender</p></li>
<li><p>Photoshop</p></li>
<li><p>PremierePro</p></li>
<li><p>Unity</p></li>
<li><p>UnrealEngine</p></li>
<li><p>Gthub</p></li>

</ul>
<h2>Languages</h2>
<ul>
<li><p>C</p></li>
<li><p>Python</p></li>
<li><p>Java</p></li>
<li><p>JavaScript</p></li>
<li><p>HTML/CSS</p></li>
<li><p>English :)</p></li>
</ul>
<h2>Skills</h2>
<ul>
<li><p>Agile</p></li>
<li><p>Back-End</p></li>
<li><p>Neural Networks</p></li>
<li><p>Machine Learning</p></li>
<li><p>Algorithm Design</p></li>
<li><p>Time Complexity Analysis</p></li>
<li><p>Image Processing</p></li>
<li><p>much much more check my linkedin</p></li>
</ul>
<h2>Education</h2>
<h3>UNSW</h3>
<p>Bachelor of Engineering - BE, Computer Science · (January 2020 - 2024)</p>
<p>Bachelor of Fine Arts - BFA, Media Arts · (January 2020 - 2024)</p>
<div class="space"></div>
<div class="wrapper">
<div class="content">
<!-- <h1>ABOUT</h1> -->
<h2>Introductoin</h2>
<p class="para">My name is Tristan I'm a Software Developer with a pasion for AI and Computer Graphics. I graduated with a bachelor degree in copmuter science and media arts where I specialised in artifical inteligence, specifficaly neural networks and classifiers. Within media arts I studied VFX and 3D workflows, Im pasionate about all things computer science and computer graphics and am constantly experimenting with the latest technologys. </p>
</div>

<div class="content">
<h2>Software </h2>
<ul>
<li><p>Vscode</p></li>
<li><p>Blender</p></li>
<li><p>Photoshop</p></li>
<li><p>PremierePro</p></li>
<li><p>Unity</p></li>
<li><p>UnrealEngine</p></li>
<li><p>Gthub</p></li>

</ul>
</div>
<div class="content">
<h2>Languages</h2>
<ul>
<li><p>C</p></li>
<li><p>Python</p></li>
<li><p>Java</p></li>
<li><p>JavaScript</p></li>
<li><p>HTML/CSS</p></li>
<li><p>English :)</p></li>
</ul>
</div>
<div class="content">
<h2>Skills</h2>
<ul>
<li><p>Agile</p></li>
<li><p>Back-End</p></li>
<li><p>Neural Networks</p></li>
<li><p>Machine Learning</p></li>
<li><p>Algorithm Design</p></li>
<li><p>Time Complexity Analysis</p></li>
<li><p>Image Processing</p></li>
<li><p>much much more check my linkedin</p></li>
</ul>
</div>
<div class="content">
<h2>Education</h2>
<h3>UNSW</h3>
<p>Bachelor of Engineering - BE, Computer Science · (January 2020 - 2024)</p>
<p>Bachelor of Fine Arts - BFA, Media Arts · (January 2020 - 2024)</p>
</div>
</div>
</div>

<div class="body projects">
Expand All @@ -67,47 +88,38 @@ <h3>UNSW</h3>
<div class="background"></div>
<div>
<video onmouseover="this.play()">
<source src="Assignemnt 3D Vis 2_web.mp4" type='video/mp4'/>
<source src="WebVideo1.mp4"/>
</video>
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
<p class="body-text">3D animation created in Blender, assets modelled textured and post processing is all created within Blender.</p>
</div>
<div class="project">
<div class="background"></div>
<div>
<video onmouseover="this.play()">
<source src="Unity Scene_web.mp4" type='video/mp4'/>
<source src="WebVideo2.mp4" type='video/mp4'/>
</video>
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
</div>
<div class="project">
<div class="background"></div>
<div>
<img src="elementor-placeholder-image.webp" alt="">
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
</div>
<div class="project">
<div class="background"></div>
<div>
<img src="elementor-placeholder-image.webp" alt="">
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
<p class="body-text">Unity Scene Snow is generated using geometry nodes within blender snow particles donw within untiy and terrain modeled in blender along with buildings flags are animated with blender physics and imported into unity.</p>
</div>
<div class="project">
<div class="background"></div>
<div>
<img src="elementor-placeholder-image.webp" alt="">
<video onmouseover="this.play()">
<source src="WebVideo3.mp4" type='video/mp4'/>
</video>
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
<p class="body-text">VFX compositing, planet is a 2d still rendered in Blender and then compoisited using motion vectors within Nuke.</p>
</div>
<div class="project">
<div class="background"></div>
<div>
<img src="elementor-placeholder-image.webp" alt="">
<img src="project1.jpg" alt="">
</div>
<p class="body-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo! Id debitis, eius corrupti minus nostrum veritatis ducimus dignissimos accusantium aliquam, suscipit placeat! Modi porro labore, ipsam ullam cumque tempora.</p>
<p class="body-text">Solar Cell Classification using a variety of custom made Convolutional Networks Such as ResNet
<a href="https://github.com/chichun2002/SolarCellClassificationCOMP9517">LINK HERE</a>
</p>

</div>
<div class="project">
<div class="background"></div>
Expand All @@ -132,6 +144,7 @@ <h3>UNSW</h3>
</div>
<div class="space"></div>
</div>
<!-- <div class="top"></div> -->
<div class="menu">
<ul>
<li class="menu-active"><span>HOME</span></li>
Expand All @@ -145,5 +158,9 @@ <h3>UNSW</h3>
</div>
<span class="side-text">HOME</span>
</div>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
var rellax = new Rellax('.rellax');
</script>
</body>
</html>
39 changes: 33 additions & 6 deletions menu.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@


document.addEventListener('DOMContentLoaded', function(){
document.addEventListener('mousemove', (e) => MouseMove(e))
document.addEventListener('scroll', (e) => ScrolleMove(e))
const items = document.querySelectorAll('.menu ul li')
items.forEach((item, index) => {
// document.addEventListener('mousemove', (e) => MouseMove(e))
// document.addEventListener('scroll', (e) => ScrolleMove(e))
const content = document.querySelectorAll('.content')
content.forEach((item, index) => {
item.style.rotate = (Math.random()*10) + 'deg';
})
const items2 = document.querySelectorAll('.menu ul li')
items2.forEach((item, index) => {

var select = document.createElement('div');
select.classList.add("select")
Expand All @@ -17,8 +23,8 @@ document.addEventListener('DOMContentLoaded', function(){
item.querySelector('span').addEventListener('mouseleave', (e) => notHover(e, item))
item.querySelector('span').addEventListener('click', (e) => Click(e, item))
})
const items2 = document.querySelectorAll('.project')
items2.forEach((item, index) => {
const items3 = document.querySelectorAll('.project')
items3.forEach((item, index) => {
item.style.rotate = (Math.random()*10 - 5) + 'deg';
// item.querySelector('video').style.scale = 1.1;
// item.style.scale = "1.1";
Expand Down Expand Up @@ -115,3 +121,24 @@ function linearmap(value,inlow, inhigh, low, high){
else {return output}
}


function animate() {


const content = document.querySelectorAll('.content')
content.forEach((item, index) => {
positionX = (((Math.random()-0.5))) * 20
positionY = (((Math.random()-0.5))) * 20
// console.log(positionX)
// console.log(positionY)
item.style.transform = `translate(${ positionX }px, ${ positionY }px)`;
})
requestAnimationFrame(() => {
setTimeout(animate, 2000);
});
}

animate();
// animate();
// setTimeout(function() { animate()}, 2500);

Binary file added project1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 82 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
*{
/* outline: 1px solid red; */
font-family: "Inter", sans-serif;
font-style: normal;
box-sizing: border-box;
}

a {
color: white;
}

div {
/* outline: 1px solid red; */
}

/* ul{
list-style: none;
} */

body{
overflow-x: hidden;
}

.menu{
position: fixed;
top: 50%;
Expand Down Expand Up @@ -160,10 +171,10 @@
transition: height 0.3s ease-in-out;
.background {
transition: all 0.3s ease-in-out;
background-color: blue;
background: blue;
position: absolute;
height: 100%;
width: 0%;
width: 10%;
z-index: 1;
}
div {
Expand Down Expand Up @@ -211,7 +222,7 @@
}

.space{
height: 25vh;
height: 15vh;
}

.about{
Expand All @@ -220,7 +231,10 @@
width: 60vw;
display: none;
p {
color: black;
color: white;
}
h3{
color: white;
}
}

Expand All @@ -230,11 +244,73 @@
width: 60vw;
display: none;
p {
color: black;
color: white;
}
}

p{
font-weight: 600;
color: white;
}

.wrapper{
display: flex;
flex-wrap: wrap;
gap: 5vw;
/* flex-direction: row; */
/* align-items: baseline; */

}

.content{
transition: transform 3s linear;
padding: 1%;
display: block;
width: max-content;
background-color: blue;
.para {
width: 40vw;
}
}

.content:hover{
scale: 1.2;
}

.top{
position: absolute;
width: 100vw;
height: 20vh;
background: linear-gradient(0deg, rgb(84, 170, 250) 0%, rgb(132, 235, 255) 100%);
}


.backdrop{
margin: -10px;
position: absolute;
width: 100vw;
height: 100vh;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, Blue 5%, rgba(0,212,255,1) 100%);
}

.backdrop2{
transform-origin: left center;
position: absolute;
width: 100vw;
height: 200vh;
top: -50vh;
left: 80vw;
rotate:35deg;
background: white;
}

.backdrop3{
transform-origin: left center;
position: absolute;
width: 100vw;
height: 200vh;
top: -60vh;
left: 50vw;
rotate: calc(-70deg + 180deg);
background: white;
}

0 comments on commit ad8262f

Please sign in to comment.