Timeline
Tags: codepen
Published: 2021-12-13 23:50:39

html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
}
body {
  background: #25303B;
}
section#timeline {
  width: 80%;
  margin: 20px auto;
  position: relative;
}
section#timeline:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 0 0 -1px;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.2);
}
section#timeline article {
  width: 100%;
  margin: 0 0 20px 0;
  position: relative;
}
section#timeline article:after {
  content: '';
  display: block;
  clear: both;
}
section#timeline article div.inner {
  width: 40%;
  float: left;
  margin: 5px 0 0 0;
  border-radius: 6px;
}
section#timeline article div.inner span.date {
  display: block;
  width: 60px;
  height: 50px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -32px;
  border-radius: 100%;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #25303B;
  color: rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 7px #25303B;
}
section#timeline article div.inner span.date span {
  display: block;
  text-align: center;
}
section#timeline article div.inner span.date span.day {
  font-size: 10px;
}
section#timeline article div.inner span.date span.month {
  font-size: 18px;
}
section#timeline article div.inner span.date span.year {
  font-size: 10px;
}
section#timeline article div.inner h2 {
  padding: 15px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -1px;
  border-radius: 6px 6px 0 0;
  position: relative;
}
section#timeline article div.inner h2:after {
  content: '';
  position: absolute;
  top: 20px;
  right: -5px;
  	width: 10px; 
	  height: 10px;
  -webkit-transform: rotate(-45deg);
}
section#timeline article div.inner p {
  padding: 15px;
  margin: 0;
  font-size: 14px;
  background: #fff;
  color: #656565;
  border-radius: 0 0 6px 6px;
}
section#timeline article:nth-child(2n+2) div.inner {
  float: right;
}
section#timeline article:nth-child(2n+2) div.inner h2:after {
  left: -5px;
}
section#timeline article:nth-child(1) div.inner h2 {
  background: #e74c3c;
}
section#timeline article:nth-child(1) div.inner h2:after {
  background: #e74c3c;
}
section#timeline article:nth-child(2) div.inner h2 {
  background: #2ecc71;
}
section#timeline article:nth-child(2) div.inner h2:after {
  background: #2ecc71;
}
section#timeline article:nth-child(3) div.inner h2 {
  background: #e67e22;
}
section#timeline article:nth-child(3) div.inner h2:after {
  background: #e67e22;
}
section#timeline article:nth-child(4) div.inner h2 {
  background: #1abc9c;
}
section#timeline article:nth-child(4) div.inner h2:after {
  background: #1abc9c;
}
section#timeline article:nth-child(5) div.inner h2 {
  background: #9b59b6;
}
section#timeline article:nth-child(5) div.inner h2:after {
  background: #9b59b6;
}

section#timeline article:nth-child(6) div.inner h2 {
  background: #e74c3c;
}
section#timeline article:nth-child(6) div.inner h2:after {
  background: #e74c3c;
}

section#timeline article:nth-child(7) div.inner h2 {
  background: #2ecc71;
}

section#timeline article:nth-child(7) div.inner h2:after {
  background: #2ecc71;
}

section#timeline article:nth-child(8) div.inner h2 {
  background: #e67e22;
}

section#timeline article:nth-child(8) div.inner h2:after {
  background: #e67e22;
}


section#timeline article:nth-child(9) div.inner h2 {
  background: #1abc9c;
}
section#timeline article:nth-child(9) div.inner h2:after {
  background: #1abc9c;
}

section#timeline article:nth-child(10) div.inner h2 {
  background: #e67e22;
}
section#timeline article:nth-child(10) div.inner h2:after {
  background: #e67e22;
}

section#timeline article:nth-child(11) div.inner h2 {
  background: #9b59b6;
}
section#timeline article:nth-child(11) div.inner h2:after {
  background: #9b59b6;
}

<section id="timeline">
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">Oct</span>
        <span class="year">2021</span>
      </span>
      <h2>Milestone: Running stress test of regression suite on the FPGA</h2>
      <p>Regression suite
        <br>- transplants
        <br>- memory transactions
        <br>- page faults
        <br>- stress test for queues
      </p>
      <p>Laboratory Infra
        <br>- DevteroFlex QEMU 5.2 to 6.0
        <br>- helped Ali and Shanqing with QEMU instrumentation for CS471
        <br>- helped Sid and Atri with QEMU instrumentation for ISCA submission
      </p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">Nov</span>
        <span class="year">2021</span>
      </span>
      <h2>Milestone: Run program in QEMU with DevteroFlex attached</h2>
      <p>Tutorials:
        <br>- QEMU instrumentation
        <br>- Chisel development and DevteroFlex accelerator
      </p>
      <p>DevteroFlex software:
        <br>- Demand Paging
        <br>- Inverted Page table for synonyms
        <br>- Physical page management
        <br>- Sychronization on QEMU modification of FPGA page
        <br>- DevteroFlex as master of QEMU execution
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="month">Today</span>
      </span>
	  <h2>Today Status, EPFL Report;<h2/>
	<big>The Good</big>
	<p>These two months leaded:
	  	<br>- fixing more than 70 bugs in both RTL and software
	  	<br>- fixing design errors
	  	<br>- helping other labs members understand deep aspects of QEMU
	  	<br>- designing tutorials for the platform
	  	<br>- improving our verification suite
	  	<br>- rewritting and verifying the whole DevteroFlex software in QEMU
	  	<br>- having a good regression suite methodology and tests
	  	<br><big>Running for the first time a program in QEMU with DevteroFlex attached</big></p>
	  <big>The Bad</big>
	  <p>
	  	<br>- can't run in kernel mode without a significant amount of transplants
		<br>- can't run correctly multithreaded with QEMU as the master
	  </p>
	  <big>The Ugly</big>
	  <p>
		<br>- we still don't have clear direction/the research for a killer app
	  	<br>- we don't have a paper yet
		<br>- interrupts, vm clock integration with QEMU might be tricky
		<br>- full determinism might be impossible?
	  </p>
    </div>
  </article>

  <article>
    <div class="inner">
      <span class="date">
        <span class="day">20<sup>th</sup></span>
        <span class="month">Dec</span>
        <span class="year">2021</span>
      </span>
      <h2>Milestone: Check instrumentation slowdown and multithread speedup</h2>
	  <p>In the context of the CS471 course, we want to measure the instrumentation overhead of DevteroFlex.
	     We would also like to see if increasing the number of threads leads to increase performance without impacting instrumentation speed.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">15<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2022</span>
      </span>
      <h2>Milestone: SVC and system registers single threaded running SPEC</h2>
	  <p>Significant slowdown is due to not supporting a wide range of system registers (MSR, MRS), and missing system calls (SVC) support</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2022</span>
      </span>
      <h2>Milestone: Fully Functioning Multithreaded</h2>
	  <p>With this, we can finally close a fully functioning product of DevteroFlex and try to measure a decent multi-threaded program performance</p>
      
	  <p><big>Research: We need to know which app we will showcase (tracing? reverse debugging? memory tagging? system-call argument checkup?)</big></p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">Fev</span>
        <span class="year">2022</span>
      </span>
      <h2>Milestone: Instrumentation case implemented</h2>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">22<sup>th</sup></span>
        <span class="month">March</span>
        <span class="year">2022</span>
      </span>
      <h2>Paper Submission: FPL</h2>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">April</span>
        <span class="year">2022</span>
      </span>
      <h2>Milestone: Prepare for submission for funding proposal</h2>
	<p>Wrap up infrastructure for improved usage</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="month">June-July</span>
        <span class="year">2022</span>
      </span>
      <h2>Performance optimisations, support for multiplexed memory hierarchy</h2>
	<p>
	  <br>- fix issues due to paper
	  <br>- fix issues of funding submission proposal
	</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="month">Aug-Sept</span>
        <span class="year">2022</span>
      </span>
      <h2>Milestone: Paper presentation</h2>
    </div>
  </article>
</section>