TE Conference - visual design

_data/conference-speakers.yml

@@ -0,0 +1,10 @@
+list:
+
+- i: kent_beck
+- i: vlad_khononov
+- i: jimmy_bogard
+- i: susanne_keiser
+- i: marco_consolaro
+- i: alessandro_di_gioia
+- i: nick_tune
+

_includes/community.html

@@ -2,30 +2,30 @@ <h2>Our Members</h2>
 
 
 {% assign membersC = site.data.members.list %}
-    <div class="c-container">
-        <a href="{{ site.url }}/members">
-            <div class="row">
-
-            {% for memberC in membersC %}
-                {% for member in site.members %}
-                    {% if member.i == memberC.i %}
-
-                    <!-- col-xs-4 col-sm-4 col-md-3 col-lg-3 -->
-                    <div class="col">
-                        <img src="{{ site.url }}/assets/img/{{ member.i }}.png?v=2" alt="{{ member.name }}" class="c-img" width="100" height="100" />
-                        <div class="text-container">
-                            <p class="p-name">{{ member.name }}</p>
-                        </div>
+<div class="c-container">
+    <a href="{{ site.url }}/members">
+        <div class="row">
+
+        {% for memberC in membersC %}
+            {% for member in site.members %}
+                {% if member.i == memberC.i %}
+
+                <!-- col-xs-4 col-sm-4 col-md-3 col-lg-3 -->
+                <div class="col">
+                    <img src="{{ site.url }}/assets/img/{{ member.i }}.png?v=2" alt="{{ member.name }}" class="c-img" width="100" height="100" />
+                    <div class="text-container">
+                        <p class="p-name">{{ member.name }}</p>
                     </div>
+                </div>
 
-                    {% endif %}
-                {% endfor %}
+                {% endif %}
             {% endfor %}
+        {% endfor %}
 
-            </div>
+        </div>
 
-            <p class="see-more mx-auto">See more...</p>
+        <p class="see-more mx-auto">See more...</p>
 
-        </a>
-    </div>
+    </a>
+</div>
 

_includes/incl-conference.html

@@ -1,8 +1,56 @@
-<div class="g-container" style="margin-top: 1.5rem; padding-bottom: 1rem;">
-    <!-- <a class="g-btn" href="{{ site.url }}/conference">
-        TE Conference 2024
-    </a> -->
+<!-- TODO JC: Add TIME SLOTS ======================= -->
+<!-- TODO: JC Add description for the conference, -->
+
+<div id="conference" class="g-container">
     <div class="conference-promo">
-        TE Conference 2024 - Coming soon...
+        <!-- TE Conference 2024 - Coming soon... -->
+        <!-- TE Conference  -->
+        Tech Excellence Conference
     </div>
-</div>
+
+    <div class="dates">
+        <p>Fri 22 Nov 2024</p>
+        <p>live Online</p>
+    </div>
+
+
+    {% assign conferenceSpeakers = site.data.conference-speakers.list %}
+
+    <div class="c-container">
+        <div class="row">
+
+            {% for conferenceSpeaker in conferenceSpeakers %}
+            {% for member in site.members %}
+            {% if member.i == conferenceSpeaker.i %}
+
+            <div class="col">
+                <a href="{{ member.linkedin }}" target="_blank">
+                    <img src="{{ site.url }}/assets/img/{{ member.i }}.png?v=2" alt="{{ member.name }}" width="120" height="120" />
+                </a>
+                <div class="text-container">
+                    <p class="p-name">
+                        <a href="{{ member.linkedin }}" target="_blank" rel="noopener">
+                            {{ member.name }}
+                        </a>
+                    </p>
+                    <p class="p-title">
+                        {{ member.title }}
+                    </p>
+                </div>
+            </div>
+
+            {% endif %}
+            {% endfor %}
+            {% endfor %}
+
+        </div>
+    </div>
+
+    <p class="conf-disclaimer">
+        Note: We are forming our speaker list during Jan/Feb 2024, the following reflects current speakers <br />
+        who are planning to speak. 
+        We'll further update this section with session slots.
+    </p>
+
+</div>
+

_includes/speaker-signup.html

@@ -1,10 +1,11 @@
 <!-- Sign up to speak at TE events, join an event as a speaker.
     Fill out the form at ... -->
+    <!-- request for proposal -->
 
-<h2>Tech Excellence - Speaker Proposal</h2>
+<h2>Speaker RFP</h2>
 
 <div class="s-container">
     <a class="g-btn" href="https://docs.google.com/forms/d/e/1FAIpQLSewaFClcpkx-lmEdYaELKjt-bToK69Elr3m5PArkeVf7iVGxw/viewform" target="_blank">
-        Interested in being a speaker at one of our meetup events?
+        Interested in being a speaker?
     </a>
 </div>

_includes/speakers.html

@@ -65,4 +65,5 @@
     {% assign speaker1 = null %}
     {% assign speaker2 = null %}
 
-{% endfor %}
+{% endfor %}
+

_scss/_conference.scss

@@ -0,0 +1,110 @@
+#conference {
+    margin-top: 3rem;
+    margin-bottom: 6rem;
+    padding-top: 2.5rem;
+    padding-bottom: 1rem;
+    padding-right: 3rem;
+    padding-left: 3rem;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border: 3px solid #58dbd578;
+    // border: 4px solid #81e3de80;
+    border-radius: 42px;
+    // background: #25b4bd;
+    @media (max-width: 567px){
+        margin-top: 4rem;
+        margin-bottom: 6rem;
+    }
+    .conference-promo {
+        background-color: #052426;
+        padding: 18px 48px;
+        border-radius: 12px;
+        display: inline-block;
+        font-size: 2.25rem;
+        font-weight: 600;
+        color: #12dfef;
+        box-shadow: 2px 2px 20px rgba(23, 141, 147, 0.6);
+    }
+    .dates {
+        font-weight: 500;
+        text-transform: uppercase;
+        font-size: 18px;
+        margin-top: 2rem;
+        margin-bottom: 2.5rem;
+        p {
+            background-color: #25b4bd;
+            color: white;
+            display: inline-block;
+            padding: .35rem 1rem;
+            border-radius: 6px;
+            margin-right: .25rem;
+            // box-shadow: 2px 2px 20px rgba(24, 24, 24, 0.6
+            box-shadow: 1px 1px 6px rgba(24, 24, 24, 0.4);
+        }
+    }
+    a:hover, a:active, a.active {
+        text-decoration: none;
+    }
+    .c-container {
+        margin-top: 1rem;
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 708px;
+        @media (max-width: 567px){
+            margin-top: 2rem;
+        }
+        .row {
+            margin-left: -15px;
+            margin-right: -15px;
+            justify-content: center;
+            padding-top: 1rem;
+            @media (max-width: 567px){
+                padding-top: 2rem;
+            }
+            .col, [class*="col-"] {
+                text-align: center;
+                margin-top: 1rem;
+                margin-bottom: 2rem;
+                padding-left: 15px;
+                padding-right: 15px;
+                max-width: 184px;
+                min-width: 184px;
+            }
+            img {
+                // border-radius: 50%;
+                // box-shadow: 2px 2px 20px rgba(24, 24, 24, 0.6);
+
+            }
+            .text-container {
+                .p-name {
+                    font-size: 17px;
+                    font-weight: 600;
+                    margin-top: .5rem;
+                    margin-bottom: .25rem;
+                    a {
+                        // color:#485a5a;
+                        color: #8573e5;
+                    }
+                    a:hover, a:active, a.active {
+                        color: #4d3bb3;
+                    }
+                }
+                .p-title {
+                    font-size: 13px;
+                    // color:#485a5a;
+                    color:#49475c;
+                }
+            }
+        }
+    }
+}
+
+.conf-disclaimer {
+    // max-width: 708px;
+    // max-width: 600px;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+    color: #a2b0b9;
+    font-size: 13px;
+}

_scss/_global.scss

@@ -151,12 +151,3 @@ a.g-btn {
     margin-bottom: 2rem;
 }
 
-.conference-promo {
-    background-color: #052426;
-    padding: 18px 48px;
-    border-radius: 12px;
-    display: inline-block;
-    font-size: 2rem;
-    color: #12dfef;
-    box-shadow: 2px 2px 20px rgba(23, 141, 147, 0.6);
-}

_scss/_masthead.scss

@@ -3,13 +3,16 @@
         min-height: 100vh;
     }
     @media (min-width: 567px) {
-        min-height: 620px;
+        min-height: 420px;
+        // max-height: 420px;
     }
     @media (min-width: 768px) {
-        min-height: 420px;
+        min-height: 320px;
+        // max-height: 320px;
     }
     @media (min-width: 1200px) {
-        min-height: 520px;
+        min-height: 420px;
+        // max-height: 420px;
     }
     margin-bottom: 2rem;
     background: radial-gradient(132.55% 86.57% at 80.5% 41.82%, #0A3B4C 0%, #06263A 100%);
@@ -18,11 +21,17 @@
     justify-content: center;
     align-items: center;
     .container {
-        padding-right: 36px;
-        padding-left: 36px;
+        padding-right: 3rem;
+        padding-left: 3rem;
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+        @media (min-width: 567px) and (max-width: 767px) {
+            padding-right: 5rem;
+            padding-left: 5rem;
+        }
         @media (min-width: 768px) {
-            padding-right: 24px;
-            padding-left: 24px;
+            padding-right: 2rem;
+            padding-left: 2rem;
         }
         @media (min-width: 1200px) {
             padding-right: 0;

_scss/techexcellence.scss

@@ -15,6 +15,7 @@
 @import "team.scss";
 @import "community.scss";
 @import "speakers.scss";
+@import "conference.scss";
 @import "icons.scss";
 
 

content/_members/kent_beck.md

@@ -0,0 +1,25 @@
+---
+i: kent_beck
+
+name: Kent Beck
+title: Programmer, artist, musician, pokerist
+#  ||| Chief Scientist @ Mechanical Orchard
+about: 
+location: San Francisco, California, United States
+specialities:
+    - 
+    - 
+tech-stack: 
+
+linkedin: https://www.linkedin.com/in/kentbeck/
+twitter: 
+github: 
+xing: 
+website: 
+youtube: 
+podcast: 
+medium: 
+blog: 
+---
+
+Talks about #incentives, #innovation, #programming, and #softwareengineering

content/_members/nick_tune.md

@@ -0,0 +1,27 @@
+---
+i: nick_tune
+
+name: Nick Tune
+title: Co-founder & Principal Modernization Consultant @ Empathy Software
+# ||| Co-founder & Consultant @ ModernArch Consulting ||| Co-organizer @ DDD London
+about: 
+location: London, England, United Kingdom
+specialities:
+    - 
+    - 
+tech-stack: 
+
+linkedin: https://www.linkedin.com/in/nick-tune/
+twitter: 
+github: 
+xing: 
+website: 
+youtube: 
+podcast: 
+medium: 
+blog: 
+---
+
+Author of Architecture Modernization
+
+Talks about #cto, #teamtopologies, #domaindrivendesign, #softwarearchitecture, and #architecturemodernization