Create macro for section heading

- Update layouts to use new macro
- Reformat some files
This commit is contained in:
Sravan Balaji
2025-01-02 10:25:18 -05:00
parent 40028ed830
commit 1798624bce
9 changed files with 55 additions and 61 deletions

View File

@@ -1,42 +1,38 @@
<!doctype html> <!doctype html>
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% from "macros.html" import sectionHeading %}
{% block content %} {% block content %}
<div class="container-fluid px-md-6"> <div class="container-fluid px-md-6">
<div class="row align-items-center"> {{ sectionHeading("Bio") }}
<div class="col-md-12">
<h1><a name="bio">Bio</a></h1> <div class="row align-items-center">
</div> <div class="col-md-3">
<img
class="img-fluid mx-auto d-block"
src="{{ profilePicture }}"
/>
</div> </div>
<div class="row align-items-center"> <div class="col-md-9">
<div class="col-md-3"> {{ content | safe }}
<img
class="img-fluid mx-auto d-block"
src="{{ profilePicture }}"
/>
</div>
<div class="col-md-9">
{{ content | safe }}
</div>
</div> </div>
<div class="row align-items-center"> </div>
<div class="col-md-12">
<h1><a name="contact_me">Contact Me</a></h1> {{ sectionHeading("Contact Me") }}
</div>
</div> <div class="row align-items-center">
<div class="row align-items-center"> {% for item in contact.items %}
{% for item in contact.items %} <div class="col-md-{{ 12//contact.items.length }} text-center">
<div class="col-md-{{ 12//contact.items.length }} text-center"> <a href="{{ item.link }}" target="_blank">
<a href="{{ item.link }}" target="_blank"> <img
<img class="img-fluid mx-auto d-block"
class="img-fluid mx-auto d-block" width=50%
width=50% alt="{{ item.label }}"
alt="{{ item.label }}" src="{{ item.icon }}"
src="{{ item.icon }}" />
/> </a>
</a> <p><br /><b>{{ item.label }}:</b> {{ item.displayText }}</p>
<p><br /><b>{{ item.label }}:</b> {{ item.displayText }}</p>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div>
</div> </div>
{% endblock %} {% endblock %}

View File

@@ -12,4 +12,4 @@
<footer> <footer>
{% include "partials/footer.html" %} {% include "partials/footer.html" %}
</footer> </footer>
</html> </html>

View File

@@ -1,11 +1,14 @@
<!doctype html> <!doctype html>
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% from "macros.html" import sectionHeading %}
{% block content %} {% block content %}
<div class="container-fluid px-md-6"> <div class="container-fluid px-md-6">
{{ sectionHeading("Welcome") }}
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-12"> <div class="col-md-12">
{{ content | safe }} {{ content | safe }}
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

10
src/_includes/macros.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
{% macro sectionHeading(name) %}
<div class="row align-items-center">
<div class="col-md-12">
<h1>
<a name="{{ name | slugify }}">{{ name }}</a>
</h1>
</div>
</div>
{% endmacro %}

View File

@@ -1,6 +1,3 @@
<!doctype html> <!doctype html>
<div class="row align-items-center"> {% from "macros.html" import sectionHeading %}
<div class="col-md-12"> {{ sectionHeading("Education") }}
<h1><a name="education">Education</a></h1>
</div>
</div>

View File

@@ -1,11 +1,6 @@
<!doctype html> <!doctype html>
<div class="row align-items-center"> {% from "macros.html" import sectionHeading %}
<div class="col-md-12"> {{ sectionHeading("Professional Experience") }}
<h1>
<a name="professional_experience">Professional Experience</a>
</h1>
</div>
</div>
{% for profExp in collections.professionalExperience %} {% for profExp in collections.professionalExperience %}
<div class="row"> <div class="row">

View File

@@ -1,6 +1,3 @@
<!doctype html> <!doctype html>
<div class="row align-items-center"> {% from "macros.html" import sectionHeading %}
<div class="col-md-12"> {{ sectionHeading("Research") }}
<h1><a name="research">Research</a></h1>
</div>
</div>

View File

@@ -1,9 +1,7 @@
<!doctype html> <!doctype html>
<div class="row align-items-center"> {% from "macros.html" import sectionHeading %}
<div class="col-md-12"> {{ sectionHeading("Resume") }}
<h1><a name="resume">Resume</a></h1>
</div>
</div>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-12"> <div class="col-md-12">
<p> <p>

View File

@@ -3,10 +3,8 @@ title: Sravan Balaji
layout: "layouts/home.html" layout: "layouts/home.html"
--- ---
# Welcome!
Welcome to my personal website! This started out as a side project to learn about web development and UI design, but it has since expanded into a professional portfolio and blog (sort of). If you are a fan of dark mode, try out the toggle button in the upper right corner! Welcome to my personal website! This started out as a side project to learn about web development and UI design, but it has since expanded into a professional portfolio and blog (sort of). If you are a fan of dark mode, try out the toggle button in the upper right corner!
On this website, you can find information about my [educational](./portfolio.html#education) and [professional career](./portfolio.html#professional_experience) as well as some of my [personal interests](./personal.html). If you are looking to create your own website and are curious about how I created and hosted this one, please see the [documentation](./documentation.html) page. On this website, you can find information about my [educational](./portfolio.html#education) and [professional career](./portfolio.html#professional_experience) as well as some of my [personal interests](./personal.html). If you are looking to create your own website and are curious about how I created and hosted this one, please see the [documentation](./documentation.html) page.
This website is a constant work in progress and updates will be made as I find time. You can follow development and make suggestions on [GitHub](https://github.com/balajsra/sravanbalaji.com). This website is a constant work in progress and updates will be made as I find time. You can follow development and make suggestions on [GitHub](https://github.com/balajsra/sravanbalaji.com).