Merge pull request #3 from eryxcoop/redisign

WIP - New styling in posts
eryxcoop · Dec 2, 2024 · e8e24c1 · e8e24c1
2 parents 349e115 + 564f1b1
commit e8e24c1
Show file tree

Hide file tree

Showing 95 changed files with 578 additions and 47 deletions.
diff --git a/_config.yml b/_config.yml
@@ -18,7 +18,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Eryx Blog
+title: eryx blog
 email: [email protected]
 description: >- # this means to ignore newlines until "baseurl:"
   Here you can find our amazing posts about ZK technology

diff --git a/_layouts/default_eryx.html b/_layouts/default_eryx.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <style>
+      .site-header {
+        border: none;
+      }
+  </style>
+
+  <body>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script type="text/javascript">
+      MathJax = {
+        tex: {
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          displayMath: [['$$', '$$'], ['\\[', '\\]']]
+        },
+        options: {
+          skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+          ignoreHtmlClass: 'tex2jax_ignore'
+        }
+      };
+    </script>
+
+    {%- include header.html color='content.color' -%}
+
+    <main aria-label="Content">
+      <div>
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include footer.html -%}
+
+  </body>
+
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -2,6 +2,14 @@
 layout: default
 ---
 
+<style>
+  .post-image{
+    width: 100px;
+    height: 100px;
+    border-radius: 5%;
+  }
+</style>
+
 <div class="home">
   {%- if page.title -%}
     <h1 class="page-heading">{{ page.title }}</h1>
@@ -20,7 +28,7 @@ <h2 class="post-list-heading">{{ page.list_title | default: "" }}</h2>
         <a class="post-link" href="{{ post.url | relative_url }}">
           <img class="post-image"src="{{ post.image }}" alt="Image not available">
           <div class="post-presentation-data">
-            <p class="title">{{ post.title | escape }}</p>
+            <h5 class="title">{{ post.title | escape }}</h5>
             <span class="post-meta">{{ post.date | date: date_format }}</span>
           </div>
         </a>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,18 +1,30 @@
 ---
-layout: default
+layout: default_eryx
 ---
+
+<link rel="stylesheet" href="{{ "/assets/styles/post.css" | relative_url }}">
+
+<!-- color 220844 de eryx -->
+
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
-    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
-    <p class="post-meta">
+    <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-metadata">
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- if page.author -%}
-        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
       {%- endif -%}</p>
+
+      <div class="intro-container">
+        <p style="line-height: 1.75;">
+          {{page.introduction}}
+        </p>
+        <img class="post-image" src="{{ media }}/{{ page.image }}" alt="Image not available">
+      </div>
   </header>
 
   <div class="post-content e-content" itemprop="articleBody">

diff --git a/_posts/2024-10-29-Noirky2:-how-we-made-a-Plonky2-proving-backend-for-Noir.md b/_posts/2024-10-29-Noirky2:-how-we-made-a-Plonky2-proving-backend-for-Noir.md
@@ -1,15 +1,17 @@
 ---
 layout: post
 title:  "Noirky2: how we made a Plonky2 proving backend for Noir"
-image: "assets/img/Noirky2_logo.webp"
+image: "assets/img/entries_covers/plonky2_backend.png"
 author: Bruno Weisz
----
+introduction: "This post is meant for curious developers who want to dive deeper into how the Noir programming Language works, or want to adapt a new proving system to be used with Noir. Right now (October 2024) there are implementations for the following proving systems although some of them need to be updated: Barretenberg, Plonky2, Halo2, Groth16, Marlin, Nova and HyperNova.<br></br>
+
+In Eryx we made a Plonky2 backend called Noirky2. Now, there are so many things we wish we had known from the start..<br></br>
 
-![vaporwave_header.webp](/assets/img/vaporwave_header.webp)
+Besides, a lot changed in Noir structurally in the process and that’s why so many backends need updating: the specification changed recently."
+---
 
-This post is meant for curious developers who want to dive deeper into how the Noir programming Language works, or want to adapt a new proving system to be used with Noir. Right now (October 2024) there are implementations for the following [proving systems](https://github.com/noir-lang/awesome-noir?tab=readme-ov-file#proving-backends) although some of them need to be updated: Barretenberg, Plonky2, Halo2, Groth16, Marlin, Nova and HyperNova.
 
-In [Eryx](https://eryx.co/) we made a Plonky2 backend called **Noirky2**. Now, there are so many things we wish we had known from the start. Besides, a lot changed in Noir structurally in the process and that's why so many backends need updating: the specification changed recently.
+### Introduction
 
 Before I start, I need to say that most of what we did is specific to the Plonky2 proving system, so it won't be useful when explaining how to do it in general. The idea is to extract abstract concepts and discuss the parts of the process that apply to every (or some) proving system.
 

diff --git a/_posts/2024-10-31-My-path-through-FHE.md b/_posts/2024-10-31-My-path-through-FHE.md
@@ -1,14 +1,12 @@
 ---
 layout: post
 title:  "My path through FHE"
-image: "assets/img/fhe_header.webp"
+image: "assets/img/entries_covers/path_through_fhe.png"
 author: Bruno Weisz
+introduction: "When we hear the term 'programmable cryptography' we often think about Zero Knowledge Proofs (ZK) alone. Still, sometimes we forget about other areas like Multi-Party Computation (MPC) or Fully Homomorphic Encryption (FHE). <br></br> I recently started learning about FHE and wanted to give an overview, not about the subjects targeted by FHE (I will write another post about that) but about my path and all the resources that guided me throughout the process."
 ---
 
-![FHE_header.webp](/assets/img/fhe_header.webp)
-
-
-When we hear the term "programmable cryptography," we often think about Zero Knowledge Proofs (ZK) alone. Still, sometimes we forget about other areas like Multi-Party Computation (MPC) or Fully Homomorphic Encryption (FHE). I recently started learning about FHE and wanted to give an overview, not about the subjects targeted by FHE (I will write another post about that) but about my path and all the resources that guided me throughout the process.
+### Introduction
 
 First of all, what is FHE? The basic idea is to allow a third party, like a remote server, to perform computations over your data without giving the server access to it. To do so, we provide this third party with an encrypted version of our data so that it can perform encrypted operations. When the server is done with the computation, it returns the encrypted result, which is to be decrypted by the original owner of the data. Learning how this is all done is a challenge. For a slightly deeper overview, read the first paragraphs of this [Wikipedia article](https://en.wikipedia.org/wiki/Homomorphic_encryption) or part 1 of this [blog post](https://mirror.xyz/privacy-scaling-explorations.eth/D8UHFW1t48x2liWb5wuP6LDdCRbgUH_8vOFvA0tNDJA).
 

diff --git a/...024-11-27-Parallel-Programming-with-CUDA-Parallel-programs-optimized-for-GPU.md b/...024-11-27-Parallel-Programming-with-CUDA-Parallel-programs-optimized-for-GPU.md
@@ -1,21 +1,14 @@
 ---
 layout: post
 title:  "Parallel Programming with CUDA"
-image: "assets/img/parallel-programming-cuda/nvidia-cuda.jpeg"
+image: "assets/img/entries_covers/parallel_programming.png"
 author: Julian Arnesino
+introduction: "In this article, we will talk about GPU parallelization with CUDA.
+Firstly, we introduce concepts and uses of the architecture.<br></br>
+We then present an algorithm for summing elements in an array, to then optimize it with CUDA using many different approaches.<br></br>
+Finally, we compare all optimizations, summarize the topics, and conclude that learning some CUDA is worth the effort."
 ---
 
-## Overview
-
-In this article, we will talk about GPU parallelization with CUDA.
-Firstly, we introduce concepts and uses of the architecture.
-We then present an algorithm for summing elements in an array, to then optimize it with CUDA using many different approaches.
-Finally, we compare all optimizations, summarize the topics, and conclude that learning some CUDA is worth the effort.
-
-Some more resources are attached at the end of the article.
-
-## Introduction
-
 ### What is CUDA?
 
 Well, CUDA is both a framework and an architecture for parallel GPU programming.

diff --git a/...24-11-27-The-Power-of-GPU-Parallelization-Applied-to-Cryptography-Primitives.md b/...24-11-27-The-Power-of-GPU-Parallelization-Applied-to-Cryptography-Primitives.md
@@ -1,15 +1,12 @@
 ---
 layout: post
 title:  "The Power of GPU Parallelization (Applied to Cryptography Primitives)"
-image: "assets/img/power-of-gpu-parallelization/power-of-gpu-parallelization.webp"
+image: "assets/img/entries_covers/power_of_gpu.png"
 author: Julian Arnesino
----
-
-## Overview
-
-We discuss the basics of GPU parallelization and how it's used in applied cryptography.
+introduction: "We discuss the basics of GPU parallelization and how it's used in applied cryptography.
 Then, we describe a case study, which helps us see how a real algorithm is adapted for its parallelization.
-Finally, we compare results, concluding with a successful application of GPU parallelization.
+<br></br>Finally, we compare results, concluding with a successful application of GPU parallelization."
+---
 
 ## Introduction
 

diff --git a/_posts/2024-11-28-Pairings-intuition.md b/_posts/2024-11-28-Pairings-intuition.md
@@ -1,16 +1,14 @@
 ---
 layout: post
 title:  "Pairings intuition"
-image: "assets/img/pairings_intuition.webp"
+image: "assets/img/entries_covers/pairings_intuition.png"
 author: Sergio Chouhy
+introduction: "There's a famous quote by John Von Neumann that says: 'In Mathematics you don't understand things. You just get used to them'. And that's true more often than one would like to admit. It is not uncommon in pure math to find objects defined in intricate ways that are very useful because of their properties.<br></br> Even outside the fields of Mathematics, this is true. Gravity, circuit analysis, etc. These are all things that are commonly understood through their properties rather than a deeply intuitive understanding of their underlying mechanisms. Sadly, pairings are no different in that sense. But that doesn't mean we can't try to improve our intuition."
 ---
 
-![Piezas_Crypto-07](/assets/img/piezas_crypto_07.png)
-
-
 
 ### Introduction
-There's a famous quote by John Von Neumann that says: "In Mathematics you don't understand things. You just get used to them". And that's true more often than one would like to admit. It is not uncommon in pure math to find objects defined in intricate ways that are very useful because of their properties. Even outside the fields of Mathematics, this is true. Gravity, [bike riding](https://www.youtube.com/watch?v=9cNmUNHSBac), circuit analysis, etc. These are all things that are commonly understood through their properties rather than a deeply intuitive understanding of their underlying mechanisms. Sadly, pairings are no different in that sense. But that doesn't mean we can't try to improve our intuition. The purpose of this short post is to give an analogy with other, more familiar, objects and operations that have the same properties than pairings. Even though this won't explain the intuition behind the definition of pairings in elliptic curves, having such an analogy and mental model may help to understand its use cases and its limitations.
+The purpose of this short post is to give an analogy with other, more familiar, objects and operations that have the same properties than pairings. Even though this won't explain the intuition behind the definition of pairings in elliptic curves, having such an analogy and mental model may help to understand its use cases and its limitations.
 
 ### Recap
 Let's quickly recap what an elliptic curve point is. One way to define an elliptic curve over a field $\mathbb{F}$ is as the set of pairs $(x,y)$ of elements of $\mathbb{F}$ such that $y^2 = x^3 + ax + b$. Here $a$ and $b$ are fixed and are part of the definition of the elliptic curve. For example, the curve [Secp256k1](https://en.bitcoin.it/wiki/Secp256k1) used for digital signatures in Bitcoin and Ethereum is the set of solutions $(x, y)$ to the equation $y^2 = x^3 + 7$, with $x$ and $y$ being elements of $\mathbb{F}_p$ for a particular 256-bit long prime.

diff --git a/_sass/minima.scss b/_sass/minima.scss
@@ -2,7 +2,17 @@
 
 // Define defaults for each variable.
 
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+@font-face {
+	font-family: "inter";
+	src: url("../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf")
+}
+
+@font-face {
+	font-family: "playfair";
+	src: url("../assets/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf")
+}
+
+$base-font-family: "inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $base-font-size:   16px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
@@ -11,7 +21,7 @@ $base-line-height: 1.5 !default;
 $spacing-unit:     30px !default;
 
 $text-color:       #111 !default;
-$background-color: #fdfdfd !default;
+$background-color: #fffefa !default;
 $brand-color:      #2a7ae2 !default;
 
 $grey-color:       #828282 !default;

diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
@@ -95,6 +95,7 @@ li {
  */
 h1, h2, h3, h4, h5, h6 {
   font-weight: $base-font-weight;
+  font-family:  "playfair" , $base-font-family;
 }
 
 

diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
@@ -211,7 +211,7 @@
 
 .post-image{
   width: 300px;
-  height: 300px;
+  height: auto;
 }
 
 .post-link {
@@ -227,6 +227,11 @@
   gap: 10px;
 }
 
+.post-presentation-data h5{
+  margin: 0;
+  font-size: 0.9em;
+}
+
 .title {
   color: black;
   font-size: 1em;

diff --git a/about.markdown b/about.markdown
@@ -1,9 +1,11 @@
 ---
 layout: page
-title: About Eryx
+title: About
 permalink: /about/
 ---
 
-We're Eryx, a high-end dev shop. We develop tailored technological solutions and support you at every stage of your project!
+![Piezas_Crypto-07](/assets/img/piezas_crypto_07.png)
+
+We're <a href="https://eryx.co/" target='_blank'>Eryx</a> , a high-end dev shop. We develop tailored technological solutions and support you at every stage of your project!
 
 Our cryptography experts analyze and implement protocols using mathematical techniques at the forefront of knowledge, such as Zero Knowledge Proofs and Fully Homomorphic Encryption, ensuring new forms of secure and scalable communication.
diff --git a/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf b/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf
diff --git a/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf b/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf
diff --git a/assets/fonts/Inter/OFL.txt b/assets/fonts/Inter/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
-Original file line number
+Diff line change
@@ Expand Up / @@ -95,6 +95,7 @@ li { @@
      */
     h1, h2, h3, h4, h5, h6 {
       font-weight: $base-font-weight;
+      font-family:  "playfair" , $base-font-family;
     }
@@ Expand Down @@