personal-website 0.1.2 → 0.2.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5823ed4e5393639258abc4bebe8fa2ee512f1daea5f6ddb9c3f26e03eda7df18
-  data.tar.gz: '0893622ed5c01601afcb3f0741958841c61831670f757cb6dce384fcfeded5fb'
+  metadata.gz: 74e1fa2039a9d2499a70007bf8411ae76d5afd0eb0b55d577a7551d2d1148a86
+  data.tar.gz: 4a79203036ff6abf0e4d922463dea2b55d14ffb90e4a9532b18549f21a76b3fe
 SHA512:
-  metadata.gz: 48483fe0a78d6fba0299ec2cfc7443c39b5ff5a19218774c3b3ab67832eafd6dd990c56b6072cb89a55f545de5f7cfbaad892fec5ce6e40b4c9e9c8650b82c05
-  data.tar.gz: ffa66308beb70a128d27df81667e0ae8ccdb1998f6611c96f5d3f95f190a852734796b0d2aebf6a47a3bb5ee35aec8aa21a89a23e5805986102d445662a50eef
+  metadata.gz: 2623174bc5942b7e959b12265b245263aefc19112bb9a9da02342b93a0baafc47e240f1c58dab173f769c609d9849273b89738213a952a381e0f75f49f7fdcbc
+  data.tar.gz: c24eb95822da3b96e2d07fd1c9c1b32d72f0aeb5bcecd2a97c95dd29308aaf160f258b027b6fe8d5203b4608abb6bad81ad8698f5871f2fc172659e9d527e015

data/_includes/external-item.html

@@ -0,0 +1,29 @@
+<div class="item" year="{{ ext.year }}">
+    {% if ext.image %}
+        {% if ext.url == nil %}
+            <span class="image"><img src="{{ ext.image }}"></span>
+        {% else %}
+            <a href="{{ ext.url }}" target="_blank" class="image" referrerpolicy="no-referrer"><img src="{{ ext.image }}"></a>
+        {% endif %}
+    {% endif %}
+    <div {% if ext.image == nil %}class="no-img"{% endif %}>
+        <p>
+            {% if ext.url == nil %}
+                {{ ext.title }}
+            {% else %}
+                <a href="{{ ext.url }}" target="_blank" referrerpolicy="no-referrer">{{ ext.title }}</a>
+            {% endif %}
+            <br>
+            {% if ext.subtitle %}
+                <span class="sub font-italic">{{ ext.subtitle }}</span><br>
+            {% endif %}
+            <span class="sub">
+                {% if ext.location %}
+                    {{ ext.location }} - 
+                {% endif %}
+                {{ ext.year }}
+            </span>
+        </p>
+        <p class="sub">{{ ext.authors }}</p>
+    </div>
+</div>

data/_includes/footer.html

@@ -1,3 +1,3 @@
 <footer class="text-center bg-dark text-light">
-    &copy; 2020 {{ site.name }}
+    &copy; {{ 'now' | date: "%Y" }} {{ site.name }}
 </footer>

data/_includes/header.html

@@ -1,7 +1,7 @@
 <header class="container-fluid fixed-top bg-dark py-5 py-md-0">
     <div class="row align-items-center">
         <div class="col-md-auto text-center">
-            <img src="{{ site.photo }}" alt="" id="photo" class="rounded-circle">
+            <a href="/"><img src="{{ site.image }}" alt="" id="photo" class="rounded-circle"></a>
         </div>
         <div class="col-md container text-center">
             <div class="row align-items-center text-md-left">

data/_includes/post.html

@@ -0,0 +1,11 @@
+<div class="post">
+    <a href="{{ post.url }}" target="_blank"><img src="{{ post.image }}"></a>
+    <div class="desc">
+        <p>
+            <span class="text-secondary">{{ post.date | date: "%a, %b %d, %y" }}</span><br>
+            By @{{ post.authors | join: ", @" }}
+        </p>
+        <h3><a href="{{ post.url }}" target="_blank">{{ post.title }}</a></h3>
+        <p>{{ post.description }}</p>
+    </div>
+</div>

data/_includes/project.html

@@ -1,6 +1,6 @@
 <a href="{{ project.url }}" target="_blank" class="project">
     <figure>
-        <h5>{{ project.title }}</h5>
+        <h5 class="text-center">{{ project.title }}</h5>
         <img src="{{ project.image_path }}" alt="">
         <br><br>
         <figcaption>

data/_includes/share-buttons.html

@@ -0,0 +1,18 @@
+<style>
+    .IN-widget button{
+        border-radius: 3px !important;
+    }
+
+    .IN-widget svg{
+        padding: 2px;
+        vertical-align: top;
+    }
+
+    .twitter-share-button{
+        vertical-align: bottom;
+    }
+</style>
+<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<div class="fb-share-button" data-href="{{ page.url | absolute_url }}" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
+<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
+<script type="IN/Share" data-url="{{ page.url | absolute_url }}"></script>

data/_layouts/external.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+<link rel="stylesheet" href="/assets/css/external.css?version=0.2.1">
+{% seo %}
+</head>
+
+<body>
+    {% include header.html %}
+    <div class="external mx-auto">
+        <div class="sidebar">
+            {% assign grouped = site.data.external[page.external].list | group_by: "year" %}
+            {% for year in grouped %}
+                <a href="/{{ page.external }}?year={{ year.name }}" class="active"><p>{{ year.name }}</p></a>
+            {% endfor %}
+        </div>
+        <div class="content">
+            <div>
+                {% assign content_stripped = content | strip %}
+                {% if content_stripped != "" %}
+                    <div>{{ content }}</div>
+                {% endif %}
+            </div>
+            <div class="list">
+                {% for ext in site.data.external[page.external].list %}
+                    {% include external-item.html %}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+    {% include footer.html %}
+</body>
+
+<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+<script src="/assets/js/external.js?version=0.2.1"></script>
+</html>

data/_layouts/home.html

@@ -7,21 +7,29 @@ layout: default
 
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-{% if site.google-search-console %}
-    <meta name="google-site-verification" content="{{ site.google-search-console }}" />
-{% endif %}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-<link rel="stylesheet" href="/assets/css/home.css">
-<title>{{ site.name }}</title>
+<link rel="stylesheet" href="/assets/css/home.css?version=0.2.1">
+{% seo %}
 </head>
 
 <body>
     {% include header.html %}
-    <div class="content">
+    <div id="home-content">
         {% assign content_stripped = content | strip %}
         {% if content_stripped != "" %}
             <div>{{ content }}</div>
         {% endif %}
+        {% assign n_posts = site.posts | size %}
+        {% if n_posts > 0 %}
+            <div>
+                <h1 class="text-center mb-5">Blog</h1>
+                <div class="posts">
+                    {% for post in site.posts %}
+                        {% include post.html %}
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
         {% if site.data.work or site.data.education %}
             <div class="row d-flex">
                 {% if site.data.work %}
@@ -47,18 +55,35 @@ layout: default
             </div>
         {% endif %}
         {% if site.data.projects %}
-            <div class="text-center">
-                <h1>Projects</h1>
-                {% for project in site.data.projects %}
-                    {% include project.html %}
-                {% endfor %}
+            <div>
+                <h1 class="text-center">Projects</h1>
+                <div class="projects">
+                    {% for project in site.data.projects %}
+                        {% include project.html %}
+                    {% endfor %}
+                </div>
             </div>
         {% endif %}
+        {% if site.data.external %}
+            {% for external in site.data.external %}
+                <div class="external" id="{{ external[0] }}">
+                    <h1>{{ external[1].name }}</h1>
+                    <div class="list">
+                        {% for ext in external[1].list limit:external[1].limit %}
+                            {% include external-item.html %}
+                        {% endfor %}
+                    </div>
+                    {% if external[1].list.size > external[1].limit %}
+                        <a href="/{{ external[0] }}" target="_blank" class="more">More</a>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        {% endif %}
     </div>
     {% include footer.html %}
 </body>
 
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-<script src="/assets/js/header.js"></script>
+<script src="/assets/js/header.js?version=0.2.1"></script>
 </html>

data/_layouts/post.html

@@ -0,0 +1,40 @@
+---
+layout: default
+---
+
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+<link rel="stylesheet" href="/assets/css/post.css?version=0.2.1">
+{% seo %}
+</head>
+
+<body>
+    {% include header.html %}
+    <div id="post" class="mx-auto">
+        <h1 class="font-italic">{{ page.title }}</h1>
+        <p>{{ page.description }}</p>
+        <hr>
+        <p>By @{{ page.authors | join: ", @" }}</p>
+        <div class="d-flex justify-content-between">
+            <p class="text-secondary">
+                {{ page.date | date: "%a, %b %d, %y" }}
+            </p>
+            <div>{% include share-buttons.html %}</div>
+        </div>
+        <div id="post-content">
+            {{ content }}
+        </div>
+        <br>
+        <hr style="height:2px;border-width:0;background-color:silver">
+        <div>{% include share-buttons.html %}</div>
+    </div>
+    {% include footer.html %}
+    <div id="fb-root"></div>
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="il42YRik"></script>
+</body>
+
+</html>

data/_sass/external-home.scss

@@ -0,0 +1,73 @@
+
+.external{
+    display: inline-flex;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.external h1{
+    width: 100%;
+    text-align: center;
+}
+
+.external .list{
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.external .item{
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: 25px;
+    flex-direction: column;
+}
+
+.external .item .image{
+    margin: 0 auto;
+}
+
+.external .item img{
+    height: 250px;
+    max-width: min(calc(100vw - 40px), 400px);
+    object-fit: contain;
+    transition: transform .5s ease;
+}
+
+.external .item img:hover{
+    text-decoration: none;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+
+.external .item div{
+    margin-top: 10px;
+    max-width: min(calc(100vw - 40px), 400px);
+}
+
+.external .item .sub{
+    color: grey;
+}
+
+.external .item a:hover{
+    text-decoration: none;
+}
+
+.external .item p:last-child{
+    margin-bottom: 0;
+}
+
+.external .more{
+    margin-top: 50px;
+    margin-left: auto;
+    padding: 10px;
+    display: inline-flex;
+    border: 1px black solid;
+    border-radius: 5px;
+    color: initial;
+}
+
+.external .more:visited{
+    color: initial;
+}

data/_sass/external.scss

@@ -0,0 +1,51 @@
+.external{
+    margin: 50px;
+    width: min(900px, calc(100% - 100px));
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.external .sidebar{
+    padding: 15px 50px;
+}
+
+.external .content{
+    width: calc(100% - 140px);
+}
+
+.external .list{
+    display: inline-flex;
+    flex-wrap: wrap;
+}
+
+.external .item:nth-child(odd){
+    background-color: #f5f5f5;
+}
+
+.external .item{
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 25px;
+}
+
+.external .item .image{
+    align-self: center;
+}
+
+.external .item img{
+    width: 200px;
+    margin-right: 25px;
+}
+
+.external .item div{
+    width: calc(100% - 225px);
+}
+
+.external .item p:last-child{
+    margin-bottom: 0;
+}
+
+.external .item div.no-img{
+    width: 100%;
+}

data/_sass/header-mini.scss

@@ -0,0 +1,12 @@
+body > header{
+    position: initial !important;
+}
+
+#photo{
+    margin: calc(2vw * (1 - 250 / 350));
+    max-height: 100px;
+}
+
+.social{
+    max-height: 50px;
+}

data/_sass/header.scss

@@ -1,7 +1,11 @@
+body > header{
+    box-shadow: 0 0 1px black;
+}
+
 #photo{
     margin: 2vw;
     min-height: 100px;
-    max-width: calc(24vh + 12vw);
+    max-width: min(calc(24vh + 12vw), 100%);
     max-height: calc(24vh + 12vw);
     border: 2px solid white;
     object-fit: cover;

data/_sass/home.scss

@@ -0,0 +1,45 @@
+#home-content{
+    border-spacing: 15px;
+    margin-top: calc(24vh + 16vw);
+}
+
+#home-content > div{
+    padding: 50px;
+}
+
+#home-content > div:nth-child(even){
+    background-color: #fafafa;
+}
+
+.posts, .projects{
+    display: grid;
+    justify-content: center;
+}
+
+.posts{
+    gap: 50px 75px;
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.projects{
+    grid-template-columns: repeat(auto-fit, min(calc(100vw - 100px), 600px));
+}
+
+.row{
+    margin-left: 0;
+    margin-right: 0;
+}
+
+@media screen and (max-width: 768px){
+    #home-content{
+        margin-top: 0px;
+    }
+
+    #home-content > div{
+        padding-right: 50px;
+        padding-left: 50px;
+    }
+}

data/_sass/post.scss

@@ -0,0 +1,63 @@
+.post{
+    display: inline-flex;
+    margin: 0 15px;
+}
+
+.post img{
+    margin: 5px 10px;
+    width: 400px;
+    height: 250px;
+    object-fit: cover;
+}
+
+.post .desc{
+    display: inline-block;
+    margin: 5px 10px;
+    width: 260px;
+    vertical-align: top;
+}
+
+.post a:hover{
+    text-decoration: none;
+}
+
+#post{
+    margin: 50px;
+    width: min(700px, calc(100% - 100px));
+    font-family: "Times New Roman", Times, serif;
+    font-size: 1.2em;
+}
+
+#post-content img{
+    max-width: 100%;
+}
+
+table, th, td {
+    border: 1px solid silver;
+}
+
+table{
+    width: 100%;
+}
+
+th, td{
+    padding: 5px 15px;
+}
+
+th{
+    text-align: center;
+}
+
+@media screen and (max-width: 768px){
+    .post{
+        display: initial;
+    }
+
+    .post img, .post .desc{
+        width: calc(100vw - 100px);
+    }
+
+    .post img{
+        height: calc(62.5vw - 100px);
+    }
+}

data/_sass/project.scss

@@ -3,20 +3,17 @@
     padding: 40px;
     margin: 25px;
     display: inline-block;
-    border-radius: 15px;
     transition: transform .5s ease;
 }
 
 .project img{
     object-fit: contain;
-    max-height: 250px;
-    max-width: 100%;
-    width: 400px;
-    border-radius: 15px;
+    max-height: 300px;
+    width: 100%;
 }
 
 .project figcaption{
-    max-width: 400px;
+    max-width: 100%;
 }
 
 .project, .project:visited{

data/assets/css/external.scss

@@ -0,0 +1,6 @@
+---
+---
+@import "header";
+@import "header-mini";
+@import "external";
+@import "footer";

data/assets/css/home.scss

@@ -1,7 +1,9 @@
 ---
 ---
 @import "header";
-@import "content";
+@import "home";
+@import "post";
 @import "experience";
 @import "project";
+@import "external-home";
 @import "footer";

data/assets/css/post.scss

@@ -0,0 +1,6 @@
+---
+---
+@import "header";
+@import "header-mini";
+@import "post";
+@import "footer";

data/assets/js/external.js

@@ -0,0 +1,4 @@
+let searchParams = new URLSearchParams(window.location.search)
+let year = searchParams.get("year")
+
+if(year != null) $(".external .item[year!="+year+"]").remove();

data/assets/js/header.js

@@ -1,20 +1,24 @@
-me_height = $("#photo").outerHeight();
-social_height = $(".social").outerHeight();
-me_margin = ($("#photo").outerHeight(true) - me_height) / 2;
+// Get viewport dimensions
+vw = $(window).width();
+vh = $(window).height()
+
+me_height = .24 * vh + .12 * vw // 24vh + 12vw
+social_height = .05 * vw;
+me_margin = .02 * vw;
 
 $(window).resize(function(e){
     $("#photo").outerHeight('');
     $(".social").outerHeight('');
     $("#photo").css("margin", '');
-    me_height = $("#photo").outerHeight();
-    social_height = $(".social").outerHeight();
-    me_margin = ($("#photo").outerHeight(true) - me_height) / 2;
-    test(e);
+    me_height = .24 * vh + .12 * vw // 24vh + 12vw
+    social_height = .05 * vw;
+    me_margin = .02 * vw;
+    scroll_header(e);
 });
 
-$(window).scroll(test);
+$(window).scroll(scroll_header);
 
-function test(e){
+function scroll_header(e){
     scroll_top = $(window).scrollTop();
     // Disable resizing for small screens and negative scroll
     if(scroll_top < 0 || $(window).width() <= 768) return;
@@ -30,4 +34,6 @@ function test(e){
     if($(window).width() <= 945) return;
     // Resize social media icons
     $(".social").outerHeight(social_height - scroll_top / 5);
-}
+}
+
+$(window).resize();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: personal-website
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.12
 platform: ruby
 authors:
 - Lucas Bulgarelli
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-06 00:00:00.000000000 Z
+date: 2021-03-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,6 +24,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.9'
+- !ruby/object:Gem::Dependency
+  name: jekyll-mentions
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.5.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.5.1
+- !ruby/object:Gem::Dependency
+  name: jekyll-sitemap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -77,18 +119,30 @@ files:
 - LICENSE.txt
 - README.md
 - _includes/education.html
+- _includes/external-item.html
 - _includes/footer.html
 - _includes/header.html
+- _includes/post.html
 - _includes/project.html
+- _includes/share-buttons.html
 - _includes/work.html
 - _layouts/default.html
+- _layouts/external.html
 - _layouts/home.html
-- _sass/content.scss
+- _layouts/post.html
 - _sass/experience.scss
+- _sass/external-home.scss
+- _sass/external.scss
 - _sass/footer.scss
+- _sass/header-mini.scss
 - _sass/header.scss
+- _sass/home.scss
+- _sass/post.scss
 - _sass/project.scss
+- assets/css/external.scss
 - assets/css/home.scss
+- assets/css/post.scss
+- assets/js/external.js
 - assets/js/header.js
 homepage: https://github.com/lbulgarelli/personal-website
 licenses:
@@ -109,7 +163,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Jekyll theme for personal websites.

data/_sass/content.scss

@@ -1,28 +0,0 @@
-.content{
-    border-spacing: 15px;
-    margin-top: calc(24vh + 16vw);
-}
-
-.content > div{
-    padding: 50px;
-}
-
-.content > div:nth-child(even){
-    background-color: #fafafa;
-}
-
-.row{
-    margin-left: 0;
-    margin-right: 0;
-}
-
-@media screen and (max-width: 768px){
-    .content{
-        margin-top: 0px;
-    }
-
-    .content > div{
-        padding-right: 0px;
-        padding-left: 0px;
-    }
-}