Skip to content

Commit

Permalink
feat: reformat people pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@crfmc
crfmc committed Dec 3, 2024
1 parent 45d2388 commit 993ddb5
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 107 deletions.
56 changes: 36 additions & 20 deletions _layouts/people-category.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,44 @@
{% assign people_by_category = site.people | group_by: "position_category" %}

{% for category in site.data.categories-order %}
<h2 class="category-header">{{ category }}</h2>
<hr>

{% assign currentPositionCategory = people_by_category | where: "name" , category | first %}

{% for person in currentPositionCategory.items %}
<div class="person-container" data-person="{{ person.name }}">
{% if person.image %}
<div class="person-card">
<div class="image-container">
<img src="{{ person.image }}" alt="{{ person.name }}" />
</div>
<div class="person-information">
<p class="title">{{ person.person_title }}</p>
<p class="subtitle">{{ person.subtitle }}</p>
<p class="professional_title">{{ person.professional_title }}</p>
{% comment %} <a class="read-more" href="{{ person.id }}">Read more</a> {% endcomment %}
</div>
<div class="category-container">
<h2 class="category-header">{{ category }}</h2>

{% assign currentPositionCategory = people_by_category | where: "name" , category | first %}

<div class="category-body">
{% for person in currentPositionCategory.items %}
<div class="person-container" data-person="{{ person.name }}">
{% if person.image %}
<div class="person-card">
<div class="image-container">
<img src="{{ person.image }}" alt="{{ person.name }}" />
</div>
<div class="person-information">
<p class="title">{{ person.person_title }}</p>
<p class="subtitle">{{ person.subtitle }}</p>
{% comment %} <a class="read-more" href="{{ person.id }}">Read more</a> {% endcomment %}
{% if person.additional_links %}
<div class="additional-links-container">
{% if person.additional_links.github %}
<a class="link github" href="{{ person.additional_links.github }}" target="_blank">
<i class="fab fa-github"></i>
</a>
{% endif %}
{% if person.additional_links.linkedin %}
<a class="link linkedin" href="{{ person.additional_links.linkedin }}" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
37 changes: 31 additions & 6 deletions _layouts/person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@
<div class="content column is-10">
<div class="header">
{% if page.name %}
<h1 class="name">{{ page.name }}</h1>
<div class="header-container">
<h1 class="name">{{ page.name }}</h1>
</div>
{% endif %}
{% if page.professional_title %}
<h2 class="title">{{ page.professional_title }}</h2>
Expand All @@ -79,17 +81,40 @@ <h2 class="title">{{ page.professional_title }}</h2>
</div>
{% endif %}

{% if page.description %}
{{ page.description }}
{% else %}
{{ page.content }}
{% endif %}
<div class="description-container">
{% if page.description %}
{{ page.description }}
{% else %}
{{ page.content }}
{% endif %}
</div>

</div>

<hr />

<div class="information-cards-container">

{% if page.additional_links %}
<div class="information-card">
<span class="title">Additional Links</span>
<div class="value">
<div class="additional-links-container">
{% if page.additional_links.github %}
<a class="link github" href="{{ page.additional_links.github }}" target="_blank">
<i class="fab fa-github"></i>
</a>
{% endif %}
{% if page.additional_links.linkedin %}
<a class="link linkedin" href="{{ page.additional_links.linkedin }}" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
{% endif %}
</div>
</div>
</div>
{% endif %}

{% if page.contact_information %}
<div class="information-card">
<span class="title">Contact Information</span>
Expand Down
6 changes: 5 additions & 1 deletion _people/cesar-ferreyra-mansilla.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ person_title: <a href="/people/cesar-ferreyra-mansilla">Cesar Ferreyra-Mansilla<
name: Cesar Ferreyra-Mansilla
subtitle: Software Engineer # Set subtitle to position_link_text
professional_title: "Front End Engineer"
description: "I received a BA in Information Science at Cornell University. During my time there, I worked as a Software Developer for the university newspaper organization, the Cornell Daily Sun, where I built interactive web pages for news articles. Afterwards, I worked as a software developer at a digital agency based out of New York City, where I built websites and portals for healthcare startups. Outside of programming I like running, cooking, and admiring my indoor plants."
layout: person
academic: 5 # Updated academic field
image: ./img/cesar-ferreyra-mansilla.jpg
hide_footer: true
position_category: Staff Scientists and Software Engineers
additional_links:
github: "https://github.com/crfmc"
linkedin: "https://www.linkedin.com/in/cesarferreyramansilla/"
---

I received a BA in Information Science at Cornell University. During my time there, I worked as a Software Developer for the university newspaper organization, the Cornell Daily Sun, where I built interactive web pages for news articles. Afterwards, I worked as a software developer at a digital agency based out of New York City, where I built websites and portals for healthcare startups. Outside of programming I like running, cooking, and admiring my indoor plants.
186 changes: 112 additions & 74 deletions _sass/pages/_people.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,90 +4,128 @@
.page-body-container {
margin-top: 50px;

.category-header {
font-weight: 700;
font-size: 1.5rem;
margin-top: 20px;
}
.category-container {
.category {
&-header {
font-weight: 700;
font-size: 1.5rem;
margin-top: 20px;
}
&-body {
display: flex;
flex-wrap: wrap;
gap: 32px;

hr {
margin: 10px 0px;
}
.person-container {
display: flex;
max-height: 150px;
height: min-content;
width: 100%;
margin: 0px ;
padding: 20px 0px;

.person-card {
height: min-content;
display: flex;
width: 100%;
.person-container {
display: flex;
width: 380px;
min-width: 300px;
height: min-content;
margin: 0px ;
padding: 8px 0px;

.image-container {
height: 100%;
max-width: 75px;

img {
height: auto;
width: auto;
border-radius: 5px;
box-shadow: 0px 0px 5px 1px lightgray;
}
}
.person-information {
max-width: 80%;
padding: 0px 20px;

.title {
font-size: 1.125rem;
line-height: inherit;
font-weight: bold;
margin: 0px auto;
}
.subtitle {
font-size: 0.9rem;
line-height: inherit;
font-weight: bold;
margin: 0px auto;
}
.professional_title {
display: none;
}
.description {
display: none;
margin-top: 10px;
.person-card {
height: min-content;
display: flex;
width: 100%;

.image-container {
display: flex;
max-width: 120px;

img {
height: auto;
width: auto;
// border-radius: 5px;
// box-shadow: 0px 0px 5px 1px lightgray;
}
}
.person-information {
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-start;
max-width: 80%;
padding: 10px 20px 0px;

.title {
margin: 0px;

a {
color: #4A4A4A;
font-size: 1rem;
line-height: inherit;
font-weight: bold;
text-decoration: underline;

&:hover {
color: #404040;
}
}
}
.subtitle {
font-size: 0.875rem;
line-height: inherit;
font-weight: 400;
margin: 0px;
}
.description {
display: none;
margin-top: 10px;
}
.additional-links-container {
display: flex;
justify-content: center;
gap: 12px;
.link {
color: #4A4A4A;
font-size: 1.5rem;

&:hover {
color: #404040;
}
}
}
}
}
.person-container {
width: 100%;
}
}
}
}
.person-container {
width: 100%;
}
}



@media (min-width: 992px) {

.category-header {
margin-top: 30px;
}

.person-container {
max-height: 200px;
padding: 10px 0px;
.category-container {

.person-card {
.person-information {
.professional_title {
display: flex;
font-size: 0.875rem;
font-weight: 500;
}
.description {
display: flex;
font-size: 0.875rem;
line-height: inherit;
.category {
&-header {
margin-top: 30px;
}

&-body {
.person-container {
max-height: 200px;
padding: 10px 0px;

.person-card {
.person-information {
.professional_title {
display: flex;
font-size: 0.875rem;
font-weight: 500;
}
.description {
display: flex;
font-size: 0.875rem;
line-height: inherit;
}
}
}
}
}
}
Expand Down
Loading

0 comments on commit 993ddb5

Please sign in to comment.