Browse Source

A few more print adjustments

master
Julio Biason 6 years ago
parent
commit
13408f9116
  1. 10
      cv.css
  2. 513
      index.html
  3. 137
      print.css

10
cv.css

@ -167,15 +167,23 @@ a {
min-height: 23em;
}
#projects .columns.header {
min-height: 0px;
}
/* -------------------------------------------------- */
/* Projects */
/* -------------------------------------------------- */
.presentations .columns {
#presentations .columns {
/* border: 1px dashed gray; */
min-height: 10em;
}
#presentations .columns.header {
min-height: 0px;
}
/* -------------------------------------------------- */
/* Generic */

513
index.html

@ -445,181 +445,184 @@
</div> <!-- skills -->
</div>
<div class="row">
<div class="columns medium-12">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Personal Projects
</h2>
</div>
</div>
<div class="row" id="projects">
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue"></i>
WorkTime
</h3>
<ul>
<li class="description">Calculate the worked time and time
remaining till completion of a whole day work.</li>
<li>Written in Clojure.</li>
<li>Managed to do the most basic operations.</li>
<li>Broke in a mid-refactor when changing companies (when
the rules for work time changed.)</li>
</ul>
<div id="projects">
<div class="row">
<div class="columns medium-12 header">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Personal Projects
</h2>
</div>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Mitter
</h3>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue"></i>
WorkTime
</h3>
<ul>
<li class="description">Twitter Desktop Client.</li>
<li>Written in Python.</li>
<li>Designed to support multiple interfaces (currently,
PyGTK and TTY/Console).</li>
<li>Designed to support multiple networks. (currently
Twitter, Identica and Facebook were planned.)</li>
<li>Support ended when Twitter used OAuth in its APIs.</li>
</ul>
</div>
<ul>
<li class="description">Calculate the worked time and time
remaining till completion of a whole day work.</li>
<li>Written in Clojure.</li>
<li>Managed to do the most basic operations.</li>
<li>Broke in a mid-refactor when changing companies (when
the rules for work time changed.)</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Sectoid
</h3>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Mitter
</h3>
<ul>
<li class="description">Blogging app.</li>
<li>Written in PHP.</li>
<li>No templating system.</li>
<li>Option to display pages in sections and subsections
(hence the name).</li>
<li>Code lost when my personal HD and the server HD managed
to crash almost simultaneously.</li>
</ul>
</div>
<ul>
<li class="description">Twitter Desktop Client.</li>
<li>Written in Python.</li>
<li>Designed to support multiple interfaces (currently,
PyGTK and TTY/Console).</li>
<li>Designed to support multiple networks. (currently
Twitter, Identica and Facebook were planned.)</li>
<li>Support ended when Twitter used OAuth in its APIs.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
MMM - Move My Music
</h3>
<ul>
<li class="description">Rename files based on their MP3 tags.</li>
<li>Written in Python.</li>
<li>Read information directly from the ID3 tags inside MP3s
and OGGs, renaming the files and moving to directories,
if necessary (based on the renaming template).</li>
<li>Used three different ID3 tag-reading libraries, till a
custom library had to be written due crashes with
encodings.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Sectoid
</h3>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
TimeTracker
</h3>
<ul>
<li class="description">Application to track time spent in
different projects.</li> <li>Written in Python.</li>
<li>Based on TimeKeeper, a Windows application.</li>
<li>Console application.</li>
</ul>
</div>
<ul>
<li class="description">Blogging app.</li>
<li>Written in PHP.</li>
<li>No templating system.</li>
<li>Option to display pages in sections and subsections
(hence the name).</li>
<li>Code lost when my personal HD and the server HD managed
to crash almost simultaneously.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
GUP
</h3>
<ul>
<li class="description">Upload pictures to Web Gallery.</li>
<li>Written in Python.</li>
<li>Supports only Web Gallery 2.x or later.</li>
<li>Local cache for album information.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
MMM - Move My Music
</h3>
<ul>
<li class="description">Rename files based on their MP3 tags.</li>
<li>Written in Python.</li>
<li>Read information directly from the ID3 tags inside MP3s
and OGGs, renaming the files and moving to directories,
if necessary (based on the renaming template).</li>
<li>Used three different ID3 tag-reading libraries, till a
custom library had to be written due crashes with
encodings.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
ConfigOpt
</h3>
<ul>
<li class="description">A small library to Python to manage
configurations.</li>
<li>Written in Python, using OptParser and ConfigParser.</li>
<li>Used to have a single point for the application
options; the options could be loaded from config files
and be set in the command line at the same time.</li>
<li>Developed for Mitter, but designed to be a standalone library.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
TimeTracker
</h3>
<ul>
<li class="description">Application to track time spent in
different projects.</li> <li>Written in Python.</li>
<li>Based on TimeKeeper, a Windows application.</li>
<li>Console application.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
LyricsPicker
</h3>
<ul>
<li class="description">Web application to display song lyrics.</li>
<li>Based on a play with coworkers.</li>
<li>A single database for lyrics and artists, selected randomly.</li>
<li>Display the song lyric, but not the artist or the song name.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
GUP
</h3>
<ul>
<li class="description">Upload pictures to Web Gallery.</li>
<li>Written in Python.</li>
<li>Supports only Web Gallery 2.x or later.</li>
<li>Local cache for album information.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Lunch-O
</h3>
<ul>
<li class="description">A "Where We Are Going to Lunch Today?" app.</li>
<li>Started with NodeJS, but rewritten in Python with Flask and PonyORM.</li>
<li>Server only, with RESTful APIs</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
ConfigOpt
</h3>
<ul>
<li class="description">A small library to Python to manage
configurations.</li>
<li>Written in Python, using OptParser and ConfigParser.</li>
<li>Used to have a single point for the application
options; the options could be loaded from config files
and be set in the command line at the same time.</li>
<li>Developed for Mitter, but designed to be a standalone library.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
CV
</h3>
<ul>
<li class="description">This CV</li>
<li>Written with HTML and CSS.</li>
<li>Using Zurb Foundation for the style.</li>
</ul>
</div>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
LyricsPicker
</h3>
<ul>
<li class="description">Web application to display song lyrics.</li>
<li>Based on a play with coworkers.</li>
<li>A single database for lyrics and artists, selected randomly.</li>
<li>Display the song lyric, but not the artist or the song name.</li>
</ul>
</div>
<div class="row">
<div class="columns medium-12">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Presentations
</h2>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Lunch-O
</h3>
<ul>
<li class="description">A "Where We Are Going to Lunch Today?" app.</li>
<li>Started with NodeJS, but rewritten in Python with Flask and PonyORM.</li>
<li>Server only, with RESTful APIs</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
CV
</h3>
<ul>
<li class="description">This CV</li>
<li>Written with HTML and CSS.</li>
<li>Using Zurb Foundation for the style.</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
<div id="presentations">
<div class="row">
<div class="columns medium-12 header">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Presentations
</h2>
</div>
</div>
</div>
<div class="presentations">
<div class="row">
<div class="columns small-12 header">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
</div>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
@ -630,18 +633,16 @@
</ul>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017
</h3>
<div class="row">
<div class="columns small-12 header">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017
</h3>
</div>
</div>
</div>
<div class="presentations">
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
@ -693,111 +694,113 @@
</div>
</div>
<div class="row">
<div class="columns medium-12">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Events and Meetups
</h2>
</div>
</div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
<div id="events">
<div class="row">
<div class="columns medium-12">
<h2>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
Events and Meetups
</h2>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://pycaxias.org/">PyCaxias 2018</a>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017
</h3>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://pycaxias.org/">PyCaxias 2018</a>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://sf-2018.flink-forward.org/">Flink Forward 2018</a>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017
</h3>
</div>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://poa.devopsdays.com.br/#home">DevOpsDays Porto Alegre 2017</a>
</div>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://sf-2018.flink-forward.org/">Flink Forward 2018</a>
</div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2016
</h3>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://poa.devopsdays.com.br/#home">DevOpsDays Porto Alegre 2017</a>
</div>
</div>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://2016.pythonbrasil.org.br/" target="_blank">PythonBrasil</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-design-thinking" target="_blank">#TheDevConf - Design Thinking</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-arquitetura" target="_blank">#TheDevConf - Arquitetura</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-bigdata" target="_blank">#TheDevConf - Big Data</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-data-science" target="_blank">#TheDevConf - Data Science</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://braziljs.org/conf" target="_blank">BrazilJS</a>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2016
</h3>
</div>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://softwarelivre.org/fisl17" target="_blank">FISL 17</a>
</div>
<div class="row">
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://2016.pythonbrasil.org.br/" target="_blank">PythonBrasil</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-design-thinking" target="_blank">#TheDevConf - Design Thinking</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-arquitetura" target="_blank">#TheDevConf - Arquitetura</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-bigdata" target="_blank">#TheDevConf - Big Data</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-data-science" target="_blank">#TheDevConf - Data Science</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://braziljs.org/conf" target="_blank">BrazilJS</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.cnqs.com.br/" target="_blank">Congresso Nacional de Qualidade de Software</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://softwarelivre.org/fisl17" target="_blank">FISL 17</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://www.devopsdays.org/events/2016-portoalegre/welcome/" target="_blank">DevOpsDays Porto Alegre</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.cnqs.com.br/" target="_blank">Congresso Nacional de Qualidade de Software</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://poa.tchelinux.org/" target="_blank">TcheLinux 2016</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://www.devopsdays.org/events/2016-portoalegre/welcome/" target="_blank">DevOpsDays Porto Alegre</a>
</div>
<div class="columns small-12 medium-6 large-4 end">
<i class="fa fa-angle-right blue"></i>
<a href="http://rsjs.org/2016/" target="_blank">RSJS 2016</a>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://poa.tchelinux.org/" target="_blank">TcheLinux 2016</a>
</div>
<div class="columns small-12 medium-6 large-4 end">
<i class="fa fa-angle-right blue"></i>
<a href="http://rsjs.org/2016/" target="_blank">RSJS 2016</a>
</div>
</div>
</div>
</body>
</body>
</html>

137
print.css

@ -1,73 +1,88 @@
@media print {
.large-1,
.medium-1,
.small-1 {
width: 8.33333%;
}
.large-1,
.medium-1,
.small-1 {
width: 8.33333%;
}
.large-2,
.medium-2,
.small-2 {
width: 16.66667%;
}
.large-2,
.medium-2,
.small-2 {
width: 16.66667%;
}
.large-3,
.medium-3,
.small-3 {
width: 25%;
}
.large-3,
.medium-3,
.small-3 {
width: 25%;
}
.large-4,
.medium-4,
.small-4 {
width: 33.33333%;
}
.large-4,
.medium-4,
.small-4 {
width: 33.33333%;
}
.large-5,
.medium-5,
.small-5 {
width: 41.66667%;
}
.large-5,
.medium-5,
.small-5 {
width: 41.66667%;
}
.large-6,
.medium-6,
.small-6 {
width: 50%;
}
.large-6,
.medium-6,
.small-6 {
width: 50%;
}
.large-7,
.medium-7,
.small-7 {
width: 58.33333%;
}
.large-7,
.medium-7,
.small-7 {
width: 58.33333%;
}
.large-8,
.medium-8,
.small-8 {
width: 66.66667%;
}
.large-8,
.medium-8,
.small-8 {
width: 66.66667%;
}
.large-9,
.medium-9,
.small-9 {
width: 75%;
}
.large-9,
.medium-9,
.small-9 {
width: 75%;
}
.large-10,
.medium-10,
.small-10 {
width: 83.33333%;
}
.large-10,
.medium-10,
.small-10 {
width: 83.33333%;
}
.large-11,
.medium-11,
.small-11 {
width: 91.66667%;
}
.large-11,
.medium-11,
.small-11 {
width: 91.66667%;
}
.large-12,
.medium-12,
.small-12 {
width: 100%;
}
#projects {
display: none; /* hiding till I figure out how to print them properly */
}
#events {
display: none; /* same as above */
}
body {
font-weight: 100 !important;
font-size: 0.8em;
}
.large-12,
.medium-12,
.small-12 {
width: 100%;
}
#skills {
font-size: 0.8em;
}

Loading…
Cancel
Save