<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
<title>Axel Briano</title>
</head>
<body>
<canvas class="webgl"></canvas>
<main>
<div id="container-header">
<div id="content-header">
<div id="header-name" class="text-white">
<h1 class="header-name-text"><span class="typed-text text-green"></span><span class="cursor"> </span></h1>
</div>
<div id="header-title" class="text-white"><span class="header-title-content">I'm an Informatics Students at Institut Teknologi Sepuluh Nopember who is passionate in learning and programming. I'm currently really interested in <span class="text-green text-bold">Android Development</span>.</span><span class="header-title-filler"></span></div>
</div>
</div>
<div class="section-skill">
<div class="section-title text-white"><h1>Skills and Tools</h1></div>
<a href="https://kotlinlang.org/" target="_blank"><img class="skill-item" src="./assets/images/kotlin.svg" alt="Kotlin" title="Kotlin" height="50"></a>
<a href="https://www.java.com/" target="_blank"><img class="skill-item" src="./assets/images/java.svg" alt="Java" title="Java" height="50"></a>
<a href="#" target="_blank"><img class="skill-item" src="./assets/images/html.svg" alt="HTML" title="HTML" height="50"></a>
<a href="#" target="_blank"><img class="skill-item" src="./assets/images/css.svg" alt="CSS" title="CSS" height="50"></a>
<a href="h.svg" alt="JavaScript" title="JavaScript" height="50"></a>
<a href="https://tailwindcss.com/" target="_blank"><img class="skill-item" src="./assets/images/tailwind.svg" alt="Tailwind" title="Tailwind" height="50"></a>
<a href="https://firebase.google.com/" target="_blank"><img class="skill-item" src="./assets/images/firebase.svg" alt="Firebase" title="Firebase" height="50"></a>
<a href="https://www.mysql.com/" target="_blank"><img class="skill-item" src="./assets/images/mysql.svg" alt="MySql" title="MySql" height="50"></a>
<a href="https://www.postgresql.org/" target="_blank"><img class="skill-item" src="./assets/images/postgres.svg" alt="Postgres" title="Postgres" height="50"></a>
<a href="https://git-scm.com/" target="_blank"><img class="skill-item" src="./assets/images/git.svg" alt="Git" title="Git" height="50"></a>
<a href="https://github.com/" target="_blank"><img class="skill-item" src="./assets/images/github.svg" alt="GitHub" title="GitHub" height="50"></a>
<a href="https://developer.android.com/studio" target="_blank"><img class="skill-item" src="./assets/images/androidstudio.svg" alt="Android Studio" title="Android Studio" height="50"></a>
<a href="https://code.visualstudio.com/" target="_blank"><img class="skill-item" src="./assets/images/vscode.svg" alt="VS Code" title="VS Code" height="50"></a>
<a href="https://www.figma.com/" target="_blank"><img class="skill-item" src="./assets/images/figma.svg" alt="Figma" title="Figma" height="50"></a>
</div>
<div class="section-experience">
<div class="section-title text-white"><h1>Experience</h1></div>
<ul class="section-experience-list">
<li class="text-white">Staff of Department of Profession and Technology <b>·</b> May 2021 - Present</li>
<li class="text-white">Expert Staff of Schematics NST <b>·</b> Mar 2021 - Present</li>
<li class="text-white">Teaching Assistant of Data Structure Course <b>·</b> Jan 2021 - Jul 2021</li>
<li class="text-white">Frontend Developer of Indonesian Corrosion Week <b>·</b> Jan 2021 - May 2021</li>
</ul>
</div>
<footer>
<a class="text-white text-center text-lg">Reach me at</a>
<div class="footer-item-container ">
<a class="footer-item text-white" href="https://www.linkedin.com/in/axel-brians/"><img src="./assets/images/linkedin.svg" title="LinkedIn" height="25"/></a>
<a class="footer-item text-white" href="https://github.com/axelbrians"><img src="./assets/images/github.svg" title="Github" height="25"/></a>
<a class="footer-item text-white" href="mailto:axelbrians@gmail.com"><img src="./assets/images/email.svg" title="Email" height="25"/></a>
<a class="footer-item text-white" href="https://axelbrians.medium.com/"><img src="./assets/images/medium.svg" title="Medium" height="25"/></a>
</div>
<div class="footer-copyright text-center text-sm text-white"><a>© Axel Briano Suherik 2021</a></div>
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js" integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/CSSRulePlugin.min.js" integrity="sha512-SuKlyVGK9c7adN5I0qO0zZt1KAXK9WpUguwgH16A3s8Wvrc1X3mum4PS9bI7223Y2v5KBzx3qTCdlVymgF0uWg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const content = CSSRulePlugin.getRule('#content-header:before');
const h1 = document.querySelector('#header-name');
const p = document.querySelector('#header-title');
const tl = gsap.timeline()
tl.from(content, {
delay: 0.7,
duration: 4,
cssRule: { scaleX: 0}
})
tl.to(
h1,
{
duration: 2,
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
y: '30px'
},
"-=3"
)
tl.to(
p,
{
duration: 4,
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',
y: '30px'
},
"-=3"
)
</script>
</body>
</html>