683 lines
25 KiB
HTML
683 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
|
|
<!--- Basic Page Needs
|
|
================================================== -->
|
|
<meta charset="utf-8">
|
|
<title>Dennis Potter</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- Mobile Specific Metas
|
|
================================================== -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
<link rel="stylesheet" href="css/default.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/fonts.css">
|
|
<link rel="stylesheet" href="css/media-queries.css">
|
|
<link rel="stylesheet" href="css/magnific-popup.css">
|
|
|
|
<!-- Script
|
|
================================================== -->
|
|
<script src="js/modernizr.js"></script>
|
|
|
|
|
|
<!-- Favicons
|
|
================================================== -->
|
|
<link rel="shortcut icon" href="favicon.png" >
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Header
|
|
================================================== -->
|
|
<header id="home">
|
|
|
|
<nav id="nav-wrap">
|
|
|
|
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
|
|
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
|
|
|
|
<ul id="nav" class="nav">
|
|
<li class="current"><a class="smoothscroll" href="#home">Home</a></li>
|
|
<li><a class="smoothscroll" href="#about">About</a></li>
|
|
<li><a class="smoothscroll" href="#resume">Resume</a></li>
|
|
<li><a class="smoothscroll" href="#volunteering">Volunteering</a></li>
|
|
<!--<li><a class="smoothscroll" href="#testimonials">Testimonials</a></li>-->
|
|
<li><a class="smoothscroll" href="#contact">Contact</a></li>
|
|
</ul> <!-- end #nav -->
|
|
|
|
</nav> <!-- end #nav-wrap -->
|
|
|
|
<div class="row banner">
|
|
<div class="banner-text">
|
|
<h1 class="responsive-headline">
|
|
<div id="header-hi-div">
|
|
<span id="header-hi">[~]$ </span>
|
|
<span id="header-hi-text"></span>
|
|
</div>
|
|
<div id="header-eng-div">
|
|
<span id="header-eng">[~]$ </span>
|
|
<span id="header-eng-text"></span>
|
|
</div>
|
|
<div id="header-scr-div">
|
|
<span id="header-scr">[~]$ </span>
|
|
<span id="header-scr-text"></span>
|
|
</div>
|
|
<div id="header-empt-div">
|
|
<span id="header-empt">[~]$
|
|
<span style="color: #ffffff;">█</span>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
|
|
|
|
<ul class="social">
|
|
<li><a href="https://www.facebook.com/dennispotter25" target="_blank"><i class="fab fa-facebook"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/dennispotter25" target="_blank"><i class="fab fa-linkedin"></i></a></li>
|
|
<li><a href="https://www.instagram.com/dennispotter25" target="_blank"><i class="fab fa-instagram"></i></a></li>
|
|
<li><a href="https://git.dennispotter.eu/Dennis" target="_blank"><i class="fab fa-git-square"></i></a></li>
|
|
<li><a href="skype:dennispotter25?call"><i class="fab fa-skype"></i></a></li>
|
|
<li><a class="smoothscroll" href="#contact"><i class="fa fa-envelope"></i></a></li>
|
|
<li><a class="smoothscroll" href="#contact"><i class="fa fa-phone-square"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="scrolldown">
|
|
<a class="smoothscroll" href="#about"><i class="icon-down-circle"></i></a>
|
|
</p>
|
|
|
|
</header> <!-- Header End -->
|
|
|
|
|
|
<!-- About Section
|
|
================================================== -->
|
|
<section id="about">
|
|
<div class="row">
|
|
|
|
<div class="three columns">
|
|
<img class="profile-pic" src="images/profilepic.jpg" alt="" />
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
<h2>Who am I?</h2>
|
|
<p>My name is Dennis. Although I am Dutch, I am currently living in Germany where I am studying electrical engineering & computer science (EECS) at RWTH Aachen University. I am hoping to have attained my masters degree by the end of this year. Technological innovations have always roused my curiosity and excitement. Because I wanted to be able to develop these novel technologies myself, I decided to enroll EECS a few years ago. Since I had been programming before and thus possessed a rough understanding of computer architectures, it was important to me that my field of study would also include electrical engineering. In that way I would be able to acquire a proper understanding of computers from the lowest level—i.e. the bare integrated circuits—to the highest—i.e. user space—, and everything in between.
|
|
</p>
|
|
|
|
<h2>Contact Details</h2>
|
|
<p>Do you want to get in touch? <a class="smoothscroll" href="#contact">Click here to get to the contact section of this page.</a> There I provided my phone number, email address, PGP Key ID, and a contact form to make it more convenient for you to reach me!</p>
|
|
|
|
|
|
</div> <!-- end .main-col -->
|
|
|
|
</div>
|
|
|
|
</section> <!-- About Section End-->
|
|
|
|
|
|
<!-- Resume Section
|
|
================================================== -->
|
|
<section id="resume">
|
|
|
|
<!-- Education -->
|
|
<div class="row education">
|
|
|
|
<div class="three columns header-col">
|
|
<h1><span>Education</span></h1>
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>RWTH Aachen University</h3>
|
|
<p class="info">M.Sc. Electrical Engineering and Computer Science<span>•</span>
|
|
<em class="date">October 2015 - October 2018</em></p>
|
|
|
|
<p>
|
|
<i>Specialization: Micro- and Nanoelectronics</i><br />
|
|
|
|
Modules included: lectures on VLSI architectures, computer arithmetics, mixed analog signals, neural networks, new materials and devices in information technology, and operating systems. Lab training of VLSI design, FPGA design, and on the production of a FeRAM cell.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
<div class="row item">
|
|
<div class="twelve columns">
|
|
<h3>RWTH Aachen University</h3>
|
|
<p class="info">B.Sc. Electrical Engineering and Computer Science<span>•</span>
|
|
<em class="date">October 2011 - September 2015</em></p>
|
|
|
|
<p>Final project: “Analysis of Concepts for Power Reduction in Arithmetic Units of MAP Decoders”—A mathematical, bit accurate implementation of a decoder in MATLAB and C++, to find techniques that will potentially reduce the switching activity (and so the power) in the arithmetic units of the decoder.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Sophianum SG. in het Heuvelland</h3>
|
|
<p class="info">Gymnasium<span>•</span>
|
|
<em class="date">September 2005 - July 2011</em></p>
|
|
|
|
<p>
|
|
Comparable to a university-preparatory school with Latin or Ancient Greek as additional language.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
</div> <!-- main-col end -->
|
|
|
|
</div> <!-- End Education -->
|
|
|
|
|
|
<!-- Work -->
|
|
<div class="row work">
|
|
|
|
<div class="three columns header-col">
|
|
<h1><span>Work</span></h1>
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Aquantia Corporation</h3>
|
|
<p class="info">Consultant<span>•</span> <em class="date">August 2017 - Present</em></p>
|
|
|
|
<p style="margin: 0 0 15px 0;">Development of a level 2 Ethernet switch in SystemC. Support and further development of the FPGA user interface and the power analysis environment.
|
|
</p>
|
|
<p class="info">Intern<span> •</span> <em class="date">Nobember 2016 - July 2017</em></p>
|
|
<p>Power analysis of various digital chips. Development an intuitive graphical user interface, written in Python, Tkinter, and C, to access and manipulate an FPGA Ethernet debug tool.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Boscafé 't Hijgend Hert</h3>
|
|
<p class="info">Web developer and server administrator <span>•</span> <em class="date">April 2012 - Present</em></p>
|
|
|
|
<p style="margin: 0 0 15px 0;">
|
|
Responsible for the online marketing (on e.g. social media), the development of both websites and the maintenance and security of the Linux based virtual private server.
|
|
</p>
|
|
<p class="info">Headwaiter <span>•</span> <em class="date">September 2010 - October 2016</em></p>
|
|
|
|
<p>
|
|
Head of a small subteam of about 8 waiters in a large Dutch restaurant. Responsible for a smooth running of daily restaurant business.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Chair for Electrical Engineering and Computer Systems, RWTH Aachen University</h3>
|
|
<p class="info">Student Research Assistent <span>•</span> <em class="date">May 2016 - July 2016</em></p>
|
|
|
|
<p>
|
|
Establishment of burst-mode communication between the FPGA fabric and CPU subsystem, over AXI and/or DDR interface on Altera Cyclone V devices.
|
|
</p>
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
</div> <!-- main-col end -->
|
|
|
|
</div> <!-- End Work -->
|
|
|
|
|
|
<!-- Skills -->
|
|
<div class="row skill">
|
|
|
|
<div class="three columns header-col">
|
|
<h1><span>Skills</span></h1>
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<p>
|
|
Below, I listed skills I acquired during professional work or during intensive work in my free time. Besides the skills I have listed below, I
|
|
have some basic knowledge about photography and photo editting, webdesign with HTML5, CSS, and JavaScript, and server-side scripting with PHP and PostreSQL.
|
|
Furthermore I know how to sript in Linux with Perl/CSH and have basic knowledge about the Linux kernel architecture.
|
|
</p>
|
|
|
|
<div class="bars">
|
|
|
|
<ul class="skills">
|
|
<li><span class="bar-expand cpp"></span><em>C++</em></li>
|
|
<li><span class="bar-expand c"></span><em>C</em></li>
|
|
<li><span class="bar-expand python"></span><em>Python</em></li>
|
|
<li><span class="bar-expand tkinter"></span><em>Tkinter</em></li>
|
|
<li><span class="bar-expand systemc"></span><em>SystemC</em></li>
|
|
<li><span class="bar-expand verilog"></span><em>(System)Verilog</em></li>
|
|
<li><span class="bar-expand matlab"></span><em>Matlab</em></li>
|
|
<li><span class="bar-expand linuxserver"></span><em>Linux Server configuration</em></li>
|
|
<li><span class="bar-expand fpga"></span><em>FPGA</em></li>
|
|
</ul>
|
|
|
|
</div><!-- end skill-bars -->
|
|
|
|
</div> <!-- main-col end -->
|
|
|
|
</div> <!-- End skills -->
|
|
|
|
</section> <!-- Resume Section End-->
|
|
|
|
|
|
<!-- Volunteering Section
|
|
================================================== -->
|
|
<section id="volunteering">
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns collapsed">
|
|
|
|
<h1>This is some of my volunteering work.</h1>
|
|
|
|
<!-- volunteering-wrapper -->
|
|
<div id="volunteering-wrapper" class="bgrid-quarters s-bgrid-thirds cf">
|
|
|
|
<div class="columns volunteering-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-01" title="">
|
|
<img alt="" src="images/volunteering/alcuinus.png">
|
|
<div class="overlay">
|
|
<div class="volunteering-item-meta">
|
|
<h5>Board member of K.A.V. Alcuinus</h5>
|
|
<p>Alcuinus is the biggest Dutch student association in Aachen</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns volunteering-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-02" title="">
|
|
<img alt="" src="images/volunteering/nws_logo.png">
|
|
<div class="overlay">
|
|
<div class="volunteering-item-meta">
|
|
<h5>Board member of NWS</h6>
|
|
<p>NWS forms a worldwide network of Dutch students enrolled at foreign universities.</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns volunteering-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-03" title="">
|
|
<img alt="" src="images/volunteering/beautycorner.png">
|
|
<div class="overlay">
|
|
<div class="volunteering-item-meta">
|
|
<h5>Website Beauty Corner Vaals</h5>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
|
|
</div> <!-- volunteering-wrapper end -->
|
|
|
|
</div> <!-- twelve columns end -->
|
|
|
|
|
|
<!-- Modal Popup -->
|
|
|
|
<div id="modal-01" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/volunteering/alcuinus.png" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Board member of K.A.V. Alcuinus</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="https://www.alcuinus.nl" target="_blank">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-01 End -->
|
|
|
|
<div id="modal-02" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/volunteering/nws_logo.png" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Board member of NWS</h4>
|
|
<p>NWS forms a worldwide network of Dutch students currently, formerly and prospectively enrolled
|
|
at foreign universities or professional schools. It offers a platform for joint activities and
|
|
bridges the gap to the government, private sector, academic sector and society of the Netherlands.
|
|
NWS currently has more than 4500 members.<br />
|
|
|
|
<b>Responsibilities</b>: Setting up the new online environment on a Ubuntu based virtual
|
|
private server, including a new front end website, an online member management system, a new newsletter
|
|
system and a Microsoft Office 365 email environment. The given requirements are more user-friendliness
|
|
and improvements in terms of design and security.
|
|
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="https://www.wereldwijdestudenten.nl" target="_blank">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-02 End -->
|
|
|
|
<div id="modal-03" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/volunteering/beautycorner.png" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Beauty Corner Vaals</h4>
|
|
<p>Beauty Corner Vaals is a beauty salon in Vaals (NL), ran by my lovely mother. Since her old website was deprecated and non-responsive, I offered to create a new website from the scratch.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="https://www.beautycornervaals.nl" target="_blank">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-03 End -->
|
|
|
|
|
|
|
|
</div> <!-- row End -->
|
|
|
|
</section> <!-- Portfolio Section End-->
|
|
|
|
|
|
<!-- Call-To-Action Section
|
|
<section id="call-to-action">
|
|
|
|
<div class="row">
|
|
|
|
<div class="two columns header-col">
|
|
|
|
<h1><span>Get Hosting.</span></h1>
|
|
|
|
</div>
|
|
|
|
<div class="seven columns">
|
|
|
|
<h2><span class="lead">Unde Omnis Iste</span></h2>
|
|
<p><span class="lead">
|
|
</span></p>
|
|
|
|
</div>
|
|
|
|
<div class="three columns action">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> <!-- Call-To-Action Section End-->
|
|
|
|
|
|
<!-- Testimonials Section -->
|
|
<!-- <section id="testimonials">
|
|
|
|
<div class="text-container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="two columns header-col">
|
|
|
|
<h1><span>Testimonials</span></h1>
|
|
|
|
</div>
|
|
|
|
<div class="ten columns flex-container">
|
|
|
|
<div class="flexslider">
|
|
|
|
<ul class="slides">
|
|
|
|
<li>
|
|
<blockquote>
|
|
<p>test
|
|
</p>
|
|
<cite>test</cite>
|
|
</blockquote>
|
|
</li> <!-- slide ends -->
|
|
|
|
|
|
</ul>
|
|
|
|
</div> <!-- div.flexslider ends -->
|
|
|
|
</div> <!-- div.flex-container ends -->
|
|
|
|
</div> <!-- row ends -->
|
|
|
|
</div> <!-- text-container ends -->
|
|
|
|
</section> <!-- Testimonials Section End-->
|
|
|
|
|
|
<!-- Contact Section
|
|
================================================== -->
|
|
<section id="contact">
|
|
<div class="row section-head">
|
|
<div class="two columns header-col">
|
|
<h1></h1>
|
|
</div>
|
|
|
|
<div class="ten columns">
|
|
<p class="contacttext">Do you have any further questions? Don't hesitate to reach out to me! You can either use the contact form or the contact details below.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Contact details -->
|
|
<div class="contact-detail-wrapper">
|
|
<div class="three columns contact-column-wrapper">
|
|
<i class="fa fa-phone-square" id="contact-fa"></i>
|
|
<p id="contact-phone">+49 176 386 635 87</p>
|
|
</div>
|
|
<!--<div class="five columns">
|
|
</div>-->
|
|
<div class="four columns contact-column-wrapper">
|
|
<i class="fa fa-envelope" id="contact-fa"></i>
|
|
<p id="contact-email">dennis@dennispotter.eu</p>
|
|
</div>
|
|
<div class="five columns contact-column-wrapper">
|
|
<i class="fa fa-key" id="contact-fa"></i>
|
|
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<!-- form -->
|
|
<form action="" method="post" id="contactForm" name="contactForm">
|
|
<div class="six columns">
|
|
<div>
|
|
<label for="contactName">Name <span class="required">*</span></label>
|
|
<input type="text" value="" size="35" id="contactName" name="contactName">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="contactEmail">Email <span class="required">*</span></label>
|
|
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="contactSubject">Subject</label>
|
|
<input type="text" value="" size="35" id="contactSubject" name="contactSubject">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="six columns">
|
|
<label for="contactMessage">Message <span class="required">*</span></label>
|
|
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
|
|
</div>
|
|
|
|
<div class="twelve columns">
|
|
<button class="submit">Submit</button>
|
|
<span id="image-loader">
|
|
<img alt="" src="images/loader.gif">
|
|
</span>
|
|
</div>
|
|
</form> <!-- Form End -->
|
|
|
|
<!-- contact-warning -->
|
|
<div class="twelve columns">
|
|
<div id="message-warning">Error boy</div>
|
|
<!-- contact-success -->
|
|
<div id="message-success">
|
|
<i class="fa fa-check"></i>Your message was sent, thank you!<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> <!-- Contact Section End-->
|
|
|
|
|
|
<!-- footer
|
|
================================================== -->
|
|
<footer>
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<ul class="social-links">
|
|
<li><a href="https://www.facebook.com/dennispotter25" target="_blank"><i class="fab fa-facebook"></i></a></li>
|
|
<li><a href="https://www.linkedin.com/in/dennispotter25" target="_blank"><i class="fab fa-linkedin"></i></a></li>
|
|
<li><a href="https://www.instagram.com/dennispotter25" target="_blank"><i class="fab fa-instagram"></i></a></li>
|
|
<li><a href="https://git.dennispotter.eu/Dennis" target="_blank"><i class="fab fa-git-square"></i></a></li>
|
|
<li><a href="skype:dennispotter25?call"><i class="fab fa-skype"></i></a></li>
|
|
<li><a class="smoothscroll" href="#contact"><i class="fa fa-envelope"></i></a></li>
|
|
<li><a class="smoothscroll" href="#contact"><i class="fa fa-phone-square"></i></a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
|
|
|
|
</div>
|
|
|
|
</footer> <!-- Footer End-->
|
|
|
|
<!-- Java Script
|
|
================================================== -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="js/jquery-3.3.1.min.js"><\/script>')</script>
|
|
<script type="text/javascript" src="js/jquery-migrate-3.0.0.min.js"></script>
|
|
|
|
|
|
<script src="js/jquery.flexslider.js"></script>
|
|
<script src="js/waypoints.js"></script>
|
|
<script src="js/jquery.fittext.js"></script>
|
|
<script src="js/magnific-popup.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<script src="js/typed.js"></script>
|
|
|
|
<script>
|
|
function toggle(id) {
|
|
document.getElementById(id).style.display = 'inline-block';
|
|
}
|
|
|
|
function sleep(milliseconds) {
|
|
var start = new Date().getTime();
|
|
for (var i = 0; i < 1e7; i++) {
|
|
if ((new Date().getTime() - start) > milliseconds){
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** YAKS, RECURSION **/
|
|
var typed = new Typed('#header-hi-text', {
|
|
strings: ["Hi, I'm Dennis"],
|
|
typeSpeed: 45,
|
|
startDelay: 200,
|
|
onComplete: function(){
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
|
|
|
sleep(200);
|
|
toggle('header-eng');
|
|
|
|
var typed = new Typed('#header-eng-text', {
|
|
strings: ["I'm an electrical engineer and computer scientist"],
|
|
typeSpeed: 45,
|
|
startDelay: 500,
|
|
onComplete: function(){
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
|
|
|
sleep(200);
|
|
toggle('header-scr')
|
|
var typed = new Typed('#header-scr-text', {
|
|
strings: ["Scroll down and learn more"],
|
|
typeSpeed: 45,
|
|
startDelay: 500,
|
|
onComplete: function(){
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "animation", "none" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "opacity", "0" );
|
|
$( "span" ).siblings( ".typed-cursor" ).css( "position", "fixed" );
|
|
|
|
sleep(200);
|
|
toggle('header-empt')
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|