Skip to content

Instantly share code, notes, and snippets.

@jdgo-mars

jdgo-mars/index.html

Created November 11, 2020 23:40
Show Gist options
  • Save jdgo-mars/72366b479a4f3d8e9b80f6f08ea0de78 to your computer and use it in GitHub Desktop.
Save jdgo-mars/72366b479a4f3d8e9b80f6f08ea0de78 to your computer and use it in GitHub Desktop.
Download ZIP
ClariProject
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clarisa Abalasei</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js" defer></script>
<header>
<nav>
<ul>
<li><a href="#"><b>Menu</b></a>
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="#goals">Goals</a></li>
<li><a href="#whytag">Why Talent Garden</a></li>
<li><a href="#contacts">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<section id ="home">
<div id="profile-pic">
<img src="images/clarisa_profile_small.jpg" alt="clarisa-abalasei-profile-pic" class="center">
</div>
<h1>Hello! Nice to meet you.</h1>
<h2>My name is Clarisa Abalasei and I'm a Digital Marketing Specialist.</h2>
</section>
<section id ="about">
<h3>About me</h3>
<p>Hi! I am Clarisa and I have been determined since day 1. Born with a thirst of knowledge, I've been curious about applied sciences as well as liberal arts.</p>
<p>Since young age, I've been using both analytical thinking and creative approaches to my everyday life. I love Mathematics and Chemistry, just as much as I appreciate Art and Fashion. I like to listen to Cosmology TV shows on National Geographic, just as much as I like to procrastinate watching silly ads. If you ever meet me, you would assume that "This girl must think she knows it all!". But it is not true: one thing that I do not like is History, and don't ask me about that!</p>
<p>Leaving the joke aside, I am passionate about Advertising and Marketing, and how can creative professionals reach the target audience, while making it look effortlessly. There is no doubt that the digital world is becoming more present in our lives than ever before. Thus, I believe that the need to know how to program nowadays is imperative.</p>
<p>I am confident that I have the skills to aprehend coding and will make the best out of it.</p>
</section>
<section id ="goals">
<h3>Goals</h3>
<p>In three years I see myself:</p>
<ul>
<li>Working in a medium sized company in a job position that will let me juggle between both of my abilities.</li>
<li>Finishing the Software Development and Business Information Systems Master at the University.</li>
<li>Inspiring others by showing what I do.</li>
</ul>
</section>
<section id ="whytag">
<h3>Why Talent Garden?</h3>
<p>When I have moved to Vienna, I felt overwhelmed by the new lifestyle I had to embrace. My career path seemed fuzzy in my head, realising that the language barrier is going to be a problem for me.<br/>
I do not regret my decision of coming here, since Austria taught me so many beautiful things. Moreover, it broadened my horizons and made me seek for the best results in my profession.</p>
<ul>
<li>I chose to study at Talent Garden because it is the perfect mix between learning and meeting new people, who are experts in their field.</li>
<li>I like that the TAG Bootcamps are practical and well balanced in the same time, helping students develop in multiple areas.</li>
<li>Another reason is that I want to deepen my knowledge of programming languages and CodeMasters has a solid curricula.</li>
<li>And last but not least, Talent Garden chose me. No, literally, they targeted me via Facebook Ads.</li>
</ul>
</section>
<section id ="contacts">
<h3>Contact me</h3>
<a href="https://www.linkedin.com/in/clarisa-abalasei/">
<img alt="linkedin-profile" src="images/linkedin-3-32.png">
</a>
<a href="https://www.facebook.com/cllarys">
<img alt="facebook-profile" src="images/facebook-3-32.png">
</a>
<a href="mailto:clarisa.abalasei@gmail.com">
<img alt="gmail-address" src="images/mail-32.png">
</a>
</section>
</main>
</body>
</html>
Raw
index.js
var nav = document.getElementById("navigation");
var liCollection = nav.children;
var navHeight = document.getElementsByTagName("nav")[0].getBoundingClientRect().height;
for(let i = 0; i < liCollection.length; i++) {
var aElement = liCollection[i].firstChild;
aElement.addEventListener('click', handleScroll);
}
/**
*
* @param {Event} ev
*/
function handleScroll(ev) {
// hijack normal click behaviour by "preventing the default"
ev.preventDefault();
let id = ev.target.hash.substring(1);
const targetElement = document.getElementById(id);
const y = targetElement.getBoundingClientRect().top + window.scrollY - navHeight;
window.scroll({
top: y,
behavior: 'smooth'
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment