Add first keynote

css/style.css

@@ -408,3 +408,94 @@ h1, h2, h3, h4, h5 {
   background-color: #a71b36 !important;
   border-top: 1px solid #a71b36;
 }
+
+/* keynotes */
+.card-keynote {
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  max-width: 1000px;
+}
+
+.card-keynote img {
+  display: block;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+
+.card-keynote .card-title {
+  width: 50%;
+  background-color: var(--py-lady-pink);
+  padding: 8px;
+  font-size: 95%;
+}
+
+.card-text {
+  font-size: 90%;
+}
+
+.card-link {
+  position: relative;
+}
+
+@media only screen and (max-width: 600px) {
+  .card-keynote {
+    flex-direction: column;
+  }
+  .card-keynote img {
+    width: 100%;
+  }
+
+  .card-keynote .card-title {
+    width: 100%;
+  }
+
+  .card-img-overlay {
+    height: 500px !important;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .card-img-overlay {
+    height: 380px !important;
+  }
+}
+
+@media only screen and (max-width: 425px) {
+  .card-img-overlay {
+    height: 300px !important;
+  }
+}
+
+@media only screen and (max-width: 393px) {
+  .card-img-overlay {
+    height: 280px !important;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .card-img-overlay {
+    height: 260px !important;
+  }
+}
+
+@media only screen and (max-width: 353px) {
+  .card-img-overlay {
+    height: 240px !important;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .card-img-overlay {
+    height: 210px !important;
+  }
+}
+
+.card-keynote img {
+  filter: sepia(100%) hue-rotate(190deg);/* saturate(500%); */
+}
+
+.card-keynote img:hover{
+  filter: none;
+  transition-duration: 0.3s;
+}

generate_site/generate.py

@@ -14,11 +14,17 @@
     reader = csv.DictReader(f)
     df_org = list(reader)
 
+# Keynote info from the csv
+with open("keynotes.csv") as f:
+    reader = csv.DictReader(f)
+    keynotes = list(reader)
+
 # TODO: Download images? 'Headshot image' is the column name
 
 ##### Template configuration
 conf = {
     "ORG": df_org,
+    "KEYNOTES": keynotes[:2], # only two keynotes
 }
 
 templates = {
@@ -57,7 +63,7 @@
     template_params = conf
     template_params.update(value)
     # Write final HTML
-    with open(Path("..") / f"{key}.html", "w") as f:
-        print(f"writing {f=}")
-        print(template_params)
+    fname = Path("..") / f"{key}.html"
+    with open(fname, "w") as f:
+        print(f"writing {fname}")
         f.write(_t.render(template_params))

generate_site/keynotes.csv

@@ -0,0 +1,7 @@
+name,mastodon,twitter,instagram,linkedin,photo,bio
+Sophia Yang,,sophiamyang,,sophiamyang,"img/keynote/sophia.jpeg","Sophia Yang is a Senior Data Scientist and a Developer Advocate at Anaconda. She is passionate about the data science community and the Python open-source community. She is the author of multiple Python open-source libraries such as condastats, cranlogs, PyPowerUp, intake-stripe, and intake-salesforce. She serves on the Steering Committee and the Code of Conduct Committee of the Python open-source visualization system HoloViz. She also volunteers at NumFOCUS, PyData, and SciPy conferences. She holds an M.S. in Computer Science, an M.S. in Statistics, and a Ph.D. in Educational Psychology from The University of Texas at Austin."
+Jimena Bermúdez,[email protected],Jimena_y_yo,,jimena-eb,"img/keynote/jimena.jpeg","Jimena is the esteemed president of Python Spain and a computer engineer who takes pride and joy in her profession. Although she was once drawn to the realms of design, UI, and UX, her true passion lies in coding and architectural design. A gifted communicator, Jimena has served as a web development instructor for individuals transitioning careers. She is an avid mentor, community speaker, and event organizer, holding active memberships in both Python Spain and PyLadies. With numerous publications emphasizing the importance of coding education and industry diversity, Jimena can be best described as a 'Full Stack developer ardently championing diversity, equity, and inclusion (DEI) from a tech standpoint and cherishing her role in the community.'"
+Marlene Mhangami,[email protected],marlene_zw,marlene_zw,marlenemhangami,"img/keynote/marlene.jpg","Marlene is a Zimbabwean software engineer, explorer, and speaker based in the city of Harare. She is a previous director and vice-chair for the Python Software Foundation and is currently serving as the vice-chair of the Association for Computing Machinery practitioner board. In 2017, she co-founded ZimboPy, a non-profit organization that gives Zimbabwean young women access to resources in the field of technology. She is also the previous chair of PyCon Africa and is an advocate for women in tech on the continent. Professionally, Marlene is currently working as a Developer Advocate at Voltron Data."
+Thais Viana,,,,,"img/keynote/thais.jpeg","Thais is currently a Group Product Manager at Jusbrasil, leading their Search & Recommendation team. Her active engagement in the tech community, including contributions to PyLadies in Rio de Janeiro and Afropython for more than 6 years, highlights her commitment to promoting diversity and inclusion in the industry."
+Abigail Mesrenyame Dogbe,,,,,"img/keynote/abigail.jpg","Abigail Mesrenyame Dogbe is an Open Source Programs Manager, Researcher and Community Builder who believes in the power of Open Source Community Building. Her current research focuses on Improving DEI in Open Source Community Leadership. She is a contributor and community member in the African Python Software Community and has served as an organizer for local and international community events. Mesrenyame is a Fellow and a Community Service award winner at the Python Software Foundation."
+Carolina Chavier,,,,,"img/keynote/carolina.jpeg","Some text"

generate_site/templates/index-base.html

@@ -69,6 +69,46 @@ <h3 class="display-6 special-font pink">About the conference</h2>
     </div>
   </div>
 
+  <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
+    <div class="bg-pink me-md-3 py-3 px-3 py-md-5 px-md-5 text-white overflow-hidden">
+      <div class="my-3 py-3 px-5">
+        <img class="icon-section" src="img/speakers-icon.png"/>
+        <h3 class="display-6 special-font">Keynotes</h3>
+          <div class="row text-center justify-content-around">
+            {% for keynote in KEYNOTES %}
+            <div class="col-12 col-xl-6 d-flex">
+              <div class="card card-keynote my-3 bg-opacity-50">
+                <img src="{{ keynote['photo'] }}" class="card-img-top w-100" alt="{{ keynote['name'] }} Photo">
+                <div class="card-img-overlay h-100 d-flex flex-column justify-content-end text-start">
+                  <h5 class="card-title text-white">{{ keynote['name'] }}</h5>
+                </div>
+                <div class="card-body w-100">
+                  <p class="card-text text-start">{{ '.'.join(keynote['bio'].split('.')[:2]) }}.</p>
+                  <div class="social">
+                    {% if keynote['mastodon'] %}
+                    {% set username = keynote['mastodon'].split('@')[0] %}
+                    {% set domain = keynote['mastodon'].split('@')[1] %}
+                    <a class="card-link" href="https://{{ domain }}/@{{ username }}"><i class="fab fa-mastodon px-2"></i></a>
+                    {% endif %}
+                    {% if keynote['twitter'] %}
+                    <a class="card-link" href="https://twitter.com/{{ keynote['twitter'] }}"><i class="fab fa-twitter px-2"></i></a>
+                    {% endif %}
+                    {% if keynote['instagram'] %}
+                    <a class="card-link" href="https://instagram.com/{{ keynote['instagram'] }}"><i class="fab fa-instagram px-2"></i></a>
+                    {% endif %}
+                    {% if keynote['linkedin'] %}
+                    <a class="card-link" href="https://www.linkedin.com/in/{{ keynote['linkedin'] }}"><i class="fab fa-linkedin px-2"></i></a>
+                    {% endif %}
+                  </div>
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+      </div>
+    </div>
+  </div>
+
   <!-- registration details -->
   <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
     <div class="bg-light me-md-3 py-3 px-3 py-md-5 px-md-5 overflow-hidden">