From 796042a8d7c89519fa8efed0c0b9f0c95710c8eb Mon Sep 17 00:00:00 2001 From: Galo Navarro Date: Sat, 6 Jan 2024 00:45:45 +0100 Subject: [PATCH] refactor, remove css crap Signed-off-by: Galo Navarro --- _config.yml | 2 +- _includes/footer.html | 14 +- _includes/head.html | 12 +- _includes/header.html | 39 +-- _includes/icon-email.svg | 3 +- _layouts/default.html | 2 - _posts/2018-04-28-gc-analysis-by-example.md | 2 +- ...0-22-kubernetes-added-a-0-to-my-latency.md | 2 +- _sass/_base.scss | 292 ++++++------------ _sass/_layout.scss | 221 ------------- _sass/_syntax-highlighting.scss | 71 ----- about.html | 61 ++++ contact.html | 13 + css/main.scss | 46 +-- feed.xml | 2 +- index.html | 132 ++++---- 16 files changed, 261 insertions(+), 653 deletions(-) delete mode 100644 _sass/_layout.scss delete mode 100644 _sass/_syntax-highlighting.scss create mode 100644 about.html create mode 100644 contact.html diff --git a/_config.yml b/_config.yml index 15449a6..66bd3f7 100644 --- a/_config.yml +++ b/_config.yml @@ -6,7 +6,7 @@ description: > background in distributed systems, scalability and data plumbing. This site collects some of the stuff I make, mostly about and around software engineering. -baseurl: "" # the subpath of your site, e.g. /blog +baseurl: "/" # the subpath of your site, e.g. /blog url: "https://varoa.net" twitter_username: srvaroa github_username: srvaroa diff --git a/_includes/footer.html b/_includes/footer.html index dfbe5b6..99810b5 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,15 +1,5 @@
- -
- -
- © {{ site.time | date: '%Y' }} Galo Navarro -
-
- This site is built with Vim and - Jekyll. -
- +
+ © {{ site.time | date: '%Y' }} Galo Navarro
-
diff --git a/_includes/head.html b/_includes/head.html index 874ef01..098e497 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,7 +7,15 @@ {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} - + - + + + + + + + + + diff --git a/_includes/header.html b/_includes/header.html index 90d29e8..b344df1 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,34 +1,9 @@
- -
- - {{ site.title }} - - - -
- + {{ site.title }} +
diff --git a/_includes/icon-email.svg b/_includes/icon-email.svg index 9084495..44fc91a 100644 --- a/_includes/icon-email.svg +++ b/_includes/icon-email.svg @@ -1,2 +1 @@ - - + diff --git a/_layouts/default.html b/_layouts/default.html index e4ab96f..cc54f80 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,9 +8,7 @@ {% include header.html %}
-
{{ content }} -
{% include footer.html %} diff --git a/_posts/2018-04-28-gc-analysis-by-example.md b/_posts/2018-04-28-gc-analysis-by-example.md index a7dfd49..92251d0 100644 --- a/_posts/2018-04-28-gc-analysis-by-example.md +++ b/_posts/2018-04-28-gc-analysis-by-example.md @@ -52,7 +52,7 @@ looking into:

- +

diff --git a/_posts/2019-10-22-kubernetes-added-a-0-to-my-latency.md b/_posts/2019-10-22-kubernetes-added-a-0-to-my-latency.md index 815b161..c71de6b 100644 --- a/_posts/2019-10-22-kubernetes-added-a-0-to-my-latency.md +++ b/_posts/2019-10-22-kubernetes-added-a-0-to-my-latency.md @@ -148,7 +148,7 @@ mention later.) But something in the way our service handled each request seemed strange. Below is a screenshot of the capture, showing the reception of a request until the start of the response. - + The packet numbers are shown in the first column. I coloured the different TCP streams for clarity. diff --git a/_sass/_base.scss b/_sass/_base.scss index 396ac06..a13333b 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1,224 +1,120 @@ -/** - * Reset some basic elements - */ -body, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, hr, -dl, dd, ol, ul, figure { - margin: 0; - padding: 0; -} - - - -/** - * Basic styling - */ body { - font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; - color: $text-color; - background-color: $background-color; - -webkit-text-size-adjust: 100%; - -webkit-font-feature-settings: "kern" 1; - -moz-font-feature-settings: "kern" 1; - -o-font-feature-settings: "kern" 1; - font-feature-settings: "kern" 1; - font-kerning: normal; -} - - - -/** - * Set `margin-bottom` to maintain vertical rhythm - */ -h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -ul, ol, dl, figure, -%vertical-rhythm { - margin-bottom: $spacing-unit / 2; -} - - - -/** - * Images - */ -img { - max-width: 100%; - vertical-align: middle; -} - - - -/** - * Figures - */ -figure > img { - display: block; -} - -figcaption { - font-size: $small-font-size; -} - - - -/** - * Lists - */ -ul, ol { - margin-left: $spacing-unit; -} - -li { - > ul, - > ol { - margin-bottom: 0; - } -} - - - -/** - * Headings - */ -h1, h2, h3, h4, h5, h6 { - font-weight: $base-font-weight; + max-width: 800px; + margin: 0px auto; + background-color: rgb(230, 235, 245); + font-family: "Helvetica Neue", Arial, sans-serif; + font-size: 16px; + color: rgb(55, 53, 47); + text-align: left; + line-height: 1.5; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding: 20px; } - - -/** - * Links - */ a { - color: $brand-color; - text-decoration: none; + text-decoration: none; + color: #4595DB; - &:visited { - color: darken($brand-color, 15%); - } - - &:hover { - color: $text-color; - text-decoration: underline; - } + &:hover { + text-decoration: underline; + } } +.site-header { + border-bottom: 1px solid #aaaaaa; + margin: 40px 0px 0px 0px; + display: grid; + grid-template-columns: 1fr 1fr; + .site-title { + font-weight: bold; + font-size: 1.5em; + align-self: end; + } -/** - * Blockquotes - */ -blockquote { - color: $grey-color; - border-left: 4px solid $grey-color-light; - padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; + a { + color: #3C3C3C; + text-transform: uppercase; + } - > :last-child { - margin-bottom: 0; + a:hover { + text-decoration: none; + } + + nav { + align-self: end; + font-size: 1em; + letter-spacing: 1px; + } + + ul { + list-style: none; + display: flex; + justify-content: flex-end; + align-items: right; + padding: 0px; + margin: 0px; + + li { + margin-left: 20px; } + } } +.page-content { + margin-top: 40px; + min-height: calc(80vh - 160px); + h1, h2, h3 { + color: #5C5C5C; + } + hr { + width: 20px; + } + li { + margin-bottom: 10px; + } + pre.highlight { + background: #222; + padding: 10px; + color: #ddd; + font-family: Arial; + font-size: 0.8em; + } -/** - * Code formatting - */ -pre, -code { - font-size: 15px; - border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; } -code { - padding: 1px 5px; +.box { + background-color: rgb(225, 230, 240); + padding: 10px; + border: 1px solid #aaaaaa; + text-align: center; } -pre { - padding: 8px 12px; - overflow-x: auto; - - > code { - border: 0; - padding-right: 0; - padding-left: 0; - } +h1, h2, h3 { + font-size: 1.3em; } +.site-footer { + margin-top: 40px; + border-top: 1px solid #aaaaaa; + padding-top: 20px; + font-size: 0.8em; + text-align: center; - -/** - * Wrapper - */ -.wrapper { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); - max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); - margin-right: auto; - margin-left: auto; - padding-right: $spacing-unit; - padding-left: $spacing-unit; - @extend %clearfix; - - @include media-query($on-laptop) { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); - max-width: calc(#{$content-width} - (#{$spacing-unit})); - padding-right: $spacing-unit / 2; - padding-left: $spacing-unit / 2; - } } - - -/** - * Clearfix - */ -%clearfix { - - &:after { - content: ""; - display: table; - clear: both; +@media (max-width: 768px) { + header { + display: grid; + grid-template-rows: 1fr; + .site-title { + font-size: 1.2em; } -} - - - -/** - * Icons - */ -.icon { - - > svg { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - - path { - fill: $grey-color; - } + nav { + font-size: 0.8em; } -} - -span.image_foot { - width:75%; - margin:0 auto #{$spacing-unit} auto; - display:block; - font-style:italic; -} - -table { - border:1px solid #ddd; - border-spacing:0; - margin:25px; -} - -td, th { - border:1px solid #ddd; - padding: 5px; -} + } +} \ No newline at end of file diff --git a/_sass/_layout.scss b/_sass/_layout.scss deleted file mode 100644 index 15ecc14..0000000 --- a/_sass/_layout.scss +++ /dev/null @@ -1,221 +0,0 @@ -/** - * Site header - */ -.site-header { - border-top: 5px solid $grey-color-dark; - border-bottom: 1px solid $grey-color-light; - min-height: 112px; - - // Positioning context for the mobile navigation icon - position: relative; -} - -.site-title { - font-size: 26px; - font-weight: 300; - line-height: 56px; - letter-spacing: -1px; - margin-bottom: 0; - font-weight: bold; - float: left; - - &, - &:visited { - color: $grey-color-dark; - } -} - -.site-nav { - float: right; - line-height: 56px; - - .menu-icon { - display: none; - } - - .page-link { - color: $text-color; - line-height: $base-line-height; - - // Gaps between nav items, but not on the last one - &:not(:last-child) { - margin-right: 20px; - } - } - - .trigger ul { - list-style: none; - margin-left: 0; - } - - .trigger li { - display: inline; - clear: both; - margin-left: 10px; - } - - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: $spacing-unit / 2; - background-color: $background-color; - border: 1px solid $grey-color-light; - border-radius: 5px; - text-align: right; - - .menu-icon { - display: block; - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 10px; - text-align: center; - - > svg { - width: 18px; - height: 15px; - - path { - fill: $grey-color-dark; - } - } - } - - .trigger { - clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; - } - - .page-link { - display: block; - padding: 5px 10px; - - &:not(:last-child) { - margin-right: 0; - } - margin-left: 20px; - } - } -} - -/** - * Site footer - */ -.site-footer { - border-top: 1px solid $grey-color-light; - padding: $spacing-unit 0; -} - -.footer-col-wrapper { - font-size: 15px; - color: $grey-color; - text-align: center; - margin-left: -$spacing-unit / 2; - @extend %clearfix; -} - -/** - * Page content - */ -.page-content { - padding: $spacing-unit 0; -} - -.page-heading { - font-size: 20px; -} - -.post-list { - margin-left: 0; - list-style: none; - - > li { - margin-bottom: $spacing-unit / 5; - } -} - -.post-meta { - font-size: $small-font-size; - color: $grey-color; - display: inline-block; - width: 100px; -} - -.post-list h2 { - display: inline; - margin-left: $spacing-unit; -} - -.post-link { - display: inline; - font-size: 18px; -} - -/** - * Posts - */ -.post-header { - margin-bottom: $spacing-unit; -} - -.post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; - - @include media-query($on-laptop) { - font-size: 36px; - } -} - -.post-content { - margin-bottom: $spacing-unit; - - div.image-box { - text-align:center; - margin:$spacing-unit * 2 0; - } - - div.image-box span { - text-align:center; - width:100%; - margin:0px; - font-size:90%; - } - - li { - margin-bottom: $spacing-unit / 2; - } - - h2 { - font-size: 32px; - margin-top: $spacing-unit * 2; - - @include media-query($on-laptop) { - font-size: 28px; - } - } - - h3 { - font-size: 26px; - - @include media-query($on-laptop) { - font-size: 22px; - } - } - - h4 { - font-size: 20px; - - @include media-query($on-laptop) { - font-size: 18px; - } - } - -} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss deleted file mode 100644 index 8fac597..0000000 --- a/_sass/_syntax-highlighting.scss +++ /dev/null @@ -1,71 +0,0 @@ -/** - * Syntax highlighting styles - */ -.highlight { - background: #fff; - @extend %vertical-rhythm; - - .highlighter-rouge & { - background: #eef; - } - - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long -} diff --git a/about.html b/about.html new file mode 100644 index 0000000..efda085 --- /dev/null +++ b/about.html @@ -0,0 +1,61 @@ +--- +layout: page +title: "About me" +--- + +

+Available ocassionally for short/medium term consulting or contract work. + Get in touch! +

+ +

+My background as a software engineer is focused distributed systems, +scalability and data plumbing, with extensive experience in +technical leadership roles and a 2y tour of duty as Product Manager. +

+ +

+I operate in hands-on roles inside engineering teams, but think at +the strategic level in close collaboration with stakeholders across +the business. My job is to ensure that engineering delivers +short/medium term company goals effectively, and is positioned well in +advance to anticipate the future needs of the business. +

+ +

Work experience

+ +

+ I currently work as Principal Engineer at Midokura building systems that manage + fleets of devices which can running applications based on AI models. These run + as part of Sony's Edge AI sensing platform, AITRIOS. +

+ +

+ Prior to that worked at New Relic, as + a Principal Engineer for two teams that built systems to inspect real-time + telemetry, infer what type of entity was reporting them so other teams could + build New Relic's observability experience on top of them. +

+ +

+ At Adevinta I joined as a Staff engineer + and later took a role as Technical Product Manager leading the development of an + internal platform that supported some of the biggest online marketplaces in + Europe and South America to migrate to the cloud. You can find some +content +about +this. +

+ + +

+ Even earlier, I worked on distributed virtual networks, built data + infrastructure for telcos, and some backend services for high volume sites + like Last.fm, Tuenti.) +

+ +

+ You can find more about my professional experience at LinkedIn, or + maybe you should just drop me an email! +

+ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a8cd4f4 --- /dev/null +++ b/contact.html @@ -0,0 +1,13 @@ +--- +layout: page +title: "Contact" +--- + +

+

+

diff --git a/css/main.scss b/css/main.scss index 9fd7373..fed02c3 100644 --- a/css/main.scss +++ b/css/main.scss @@ -3,51 +3,7 @@ --- @charset "utf-8"; - - -// Our variables -$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -$base-font-size: 16px; -$base-font-weight: 400; -$small-font-size: $base-font-size * 0.875; -$base-line-height: 1.75; - -$spacing-unit: 20px; - -$text-color: #111; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; - -$grey-color: #828282; -$grey-color-light: lighten($grey-color, 40%); -$grey-color-dark: darken($grey-color, 25%); - -// Width of the content area -$content-width: 800px; - -$on-palm: 600px; -$on-laptop: 800px; - - - -// Use media queries like this: -// @include media-query($on-palm) { -// .wrapper { -// padding-right: $spacing-unit / 2; -// padding-left: $spacing-unit / 2; -// } -// } -@mixin media-query($device) { - @media screen and (max-width: $device) { - @content; - } -} - - - // Import partials from `sass_dir` (defaults to `_sass`) @import - "base", - "layout", - "syntax-highlighting" + "base" ; diff --git a/feed.xml b/feed.xml index a6628bd..1314051 100644 --- a/feed.xml +++ b/feed.xml @@ -14,7 +14,7 @@ layout: null {% for post in site.posts limit:10 %} {{ post.title | xml_escape }} - {{ post.content | xml_escape }} + {{ post.content | xml_escape | replace: 'src="/', 'src="https://varoa.net/' | replace: 'href="/', 'href="https://varoa.net/' }} {{ post.date | date_to_rfc822 }} {{ post.url | prepend: site.baseurl | prepend: site.url }} {{ post.url | prepend: site.baseurl | prepend: site.url }} diff --git a/index.html b/index.html index 0b71e9e..4e59a31 100644 --- a/index.html +++ b/index.html @@ -2,75 +2,79 @@ layout: default --- -
+

Hello!

-

Hello.

+

I am a software engineer with a background on distributed systems and data +plumbing. I'm more broadly interested how complex systems work. Right now I +work as Principal Engineer at Midokura building systems to manage fleets of +intelligent devices as part of Sony's Edge AI sensing platform, AITRIOS. +The about section contains more details about my professional work.

-

I'm a software engineer with a background in distributed systems, - scalability and data plumbing.

+

+ My focus is mainly on building, but I believe that putting ideas into writing makes + better thinking. Below you can find some of the content I've produced over time, + generally related to my work. To keep up with updates you can use the + RSS feed, at least until I + set up one of those email lists that cool kids have nowadays. I'm in + Twitter & + Mastodon, + and always happy to get an + email. +

-

I work as a Principal Software Engineer at Midokura, where we build - systems to manage fleets of intelligent sensing devices capable of - running AI models for Sony's Edge AI sensing platform, AITRIOS.

- -

These are some projects I worked on in the past: -

    -
  • At New Relic, leading the - the teams that manage the internal platform to process raw real-time - telemetry, infers what type of entity reports them (hosts, - devices, applications..) and provides type-specific semantics - to create New Relic's observability - experience.
    • - -
  • Adevinta - leading the development of an internal - PaaS for 1500 engineers that supported the migration of multiple large - online marketplaces to the cloud.
    • - -
  • Distributed virtual networks at Midokura.
    • - -
  • Data infrastructure for telcos at Zhilabs - -
  • Backend systems for some high volume internet sites (Last.fm, Tuenti.)
    • -
-

- -

For more details you can find me in - GitHub, - LinkedIn. - Twitter, - Mastodon. -

+
-

Writings (RSS)

- -

Kubernetes, PaaS.

+

Writing

- +

+During my tenure at Adevinta I led development of an internal +platform to support all the online marketplaces in the group +(including some of the biggest in Europe and South America). I +produced some content about strategic and technical challenges (yes, +before Platform Engineering became a short-lived hype :) +

-

JVM

+
    +
  • + How to build a PaaS for 1500 engineers. An overview of the strategic principles that we used to + create Adevinta's internal platform. This was done before Platform Engineering became a thing, and + remains relevant for any team working on technical infrastructure. +
    • +
  • + "Kubernetes made my latency 10x higher". This was the knee-jerk reaction of some product engineers when + we ran into performance problems while migrating their services to Kubernetes. This post shows the + actual cause was usually a result of blending complex systems together in ways we had not tried before. +
    • +
  • + Migrating an Eureka-based microservice fleet to Kubernetes. Technical deep-dive explaining + how we achieved a smooth migration of the legacy service discovery and client-side load balancing to + work with our new Kubernetes-based platform. +
    • +
- +

Most of my career I've worked with the JVM, sometimes I write +about things that catch my attention:

+ + -