Skip to content

Commit 6a6897f

Browse files
Astraxx04Astraxx04
committed
Speakers Section
1 parent 84381c4 commit 6a6897f

File tree

6 files changed

+236
-0
lines changed

6 files changed

+236
-0
lines changed

‎src/_data/menuItems.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
"name": "Schedule",
4242
"link": "program/schedule"
4343
},
44+
{
45+
"name": "Speakers",
46+
"link": "program/speakers"
47+
},
4448
{
4549
"name": "CFP Overview",
4650
"link": "cfp"

‎src/_data/speakers.json

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
[
2+
{
3+
"name": "Jon Doe",
4+
"email": "[email protected]",
5+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
6+
"socials": {
7+
"youtube": "https://github.com/indiVar0508",
8+
"linkedin": "https://github.com/indiVar0508",
9+
"github": "https://github.com/indiVar0508",
10+
"twitter": "https://github.com/indiVar0508",
11+
"insta": "https://github.com/indiVar0508",
12+
"web": "https://github.com/indiVar0508"
13+
}
14+
},
15+
{
16+
"name": "Jon Doe",
17+
"email": "[email protected]",
18+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
19+
"socials": {
20+
"youtube": "https://github.com/indiVar0508",
21+
"linkedin": "https://github.com/indiVar0508",
22+
"github": "https://github.com/indiVar0508",
23+
"twitter": "https://github.com/indiVar0508"
24+
}
25+
},
26+
{
27+
"name": "Jon Doe",
28+
"email": "[email protected]",
29+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
30+
"socials": {
31+
"youtube": "https://github.com/indiVar0508",
32+
"linkedin": "https://github.com/indiVar0508",
33+
"github": "https://github.com/indiVar0508",
34+
"twitter": "https://github.com/indiVar0508"
35+
}
36+
},
37+
{
38+
"name": "Jon Doe",
39+
"email": "[email protected]",
40+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
41+
"socials": {
42+
"youtube": "https://github.com/indiVar0508",
43+
"linkedin": "https://github.com/indiVar0508",
44+
"github": "https://github.com/indiVar0508",
45+
"twitter": "https://github.com/indiVar0508"
46+
}
47+
},
48+
{
49+
"name": "Jon Doe",
50+
"email": "[email protected]",
51+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
52+
"socials": {
53+
"youtube": "https://github.com/indiVar0508",
54+
"linkedin": "https://github.com/indiVar0508",
55+
"github": "https://github.com/indiVar0508",
56+
"twitter": "https://github.com/indiVar0508"
57+
}
58+
},
59+
{
60+
"name": "Jon Doe",
61+
"email": "[email protected]",
62+
"imageLink": "https://media.istockphoto.com/id/1080398556/photo/beautiful-young-caucasian-man.jpg?s=170667a&w=0&k=20&c=u56IkfvV9qiPXYy3eihTrmB4Z0_3Rx6vJDi508mgShM=",
63+
"socials": {
64+
"youtube": "https://github.com/indiVar0508",
65+
"linkedin": "https://github.com/indiVar0508",
66+
"github": "https://github.com/indiVar0508",
67+
"twitter": "https://github.com/indiVar0508"
68+
}
69+
}
70+
]

‎src/_includes/components/img-container.njk

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% macro imgContainer(width=200, height=200, depth=100, frontBg="lime", topBg="", leftBg="", autoHeight=false, url="", altText="") %}
2+
{% if frontBg == "lime" %}
3+
{% set resolved_front_bg = "#D7FF7B" %}
4+
{% elseif frontBg == "lavender" %}
5+
{% set resolved_front_bg = "#F0EEFF" %}
6+
{% else %}
7+
{% set resolved_front_bg = frontBg %}
8+
{% endif %}
9+
10+
{% if topBg == "" %}
11+
{% set resolved_top_bg = resolved_front_bg %}
12+
{% elseif topBg == "lime" %}
13+
{% set resolved_top_bg = "#D7FF7B" %}
14+
{% elseif topBg == "lavender" %}
15+
{% set resolved_top_bg = "#F0EEFF" %}
16+
{% elseif topBg == "purple" %}
17+
{% set resolved_top_bg = "#CD89FF" %}
18+
{% else %}
19+
{% set resolved_top_bg = topBg %}
20+
{% endif %}
21+
22+
{% if leftBg == "" %}
23+
{% set resolved_left_bg = resolved_front_bg %}
24+
{% elseif leftBg == "lime" %}
25+
{% set resolved_left_bg = "#D7FF7B" %}
26+
{% elseif leftBg == "lavender" %}
27+
{% set resolved_left_bg = "#F0EEFF" %}
28+
{% elseif leftBg == "purple" %}
29+
{% set resolved_left_bg = "#CD89FF" %}
30+
{% else %}
31+
{% set resolved_left_bg = leftBg %}
32+
{% endif %}
33+
34+
<div class="window-container{% if autoHeight %} window-auto-height{% endif %}"
35+
style="--w:{{ width }}; --h:{{ height }}; --d:{{ depth }};
36+
--front-bg:{{ resolved_front_bg }};
37+
--top-bg:{{ resolved_top_bg }};
38+
--left-bg:{{ resolved_left_bg }};">
39+
<!-- Top Panel -->
40+
<div class="face top"></div>
41+
<!-- Left Panel -->
42+
<div class="face left"></div>
43+
<!-- Front Face -->
44+
<div class="face front">
45+
<img src="{{ url }}" alt="{{ altText }}" class="w-full h-full object-cover" />
46+
</div>
47+
</div>
48+
{% endmacro %}

‎src/css/main.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -605,3 +605,21 @@ body:not(.is-home-page) main {
605605
font-size: 0.85rem;
606606
}
607607
}
608+
609+
610+
.window-container .face.top {
611+
background: var(--top-bg);
612+
transition: background 0.3s ease;
613+
}
614+
.window-container .face.left {
615+
background: var(--left-bg);
616+
transition: background 0.3s ease;
617+
}
618+
619+
/* Hover opposite colors */
620+
.window-container:hover .face.top {
621+
background: color-mix(in srgb, var(--top-bg), #D7FF7B 100%);
622+
}
623+
.window-container:hover .face.left {
624+
background: color-mix(in srgb, var(--left-bg), #D7FF7B 100%);
625+
}

‎src/program/speakers.njk

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Speakers - PyCon India 2025
3+
description: PyCon India 2025 Speakers
4+
layout: base.njk
5+
---
6+
7+
{% from "components/img-container.njk" import imgContainer %}
8+
9+
<div class="w-full bg-pycon-blue h-auto px-[6%] -mb-16 md:mb-0 flex flex-col md:flex-row">
10+
<div class="pt-32 pb-8 md:pb-32 w-full lg:w-[70%]">
11+
<div class="black-han-sans-regular font-normal text-3xl md:text-5xl md:text-center text-[#FFFFFF] text-center lg:text-left">
12+
Speakers
13+
</div>
14+
</div>
15+
<div class="lg:w-[30%] w-[80%] lg:mt-40 items-center justify-center mx-auto hidden lg:block">
16+
<img src="{{ env.baseUrl }}img/assets/tetris-stars.svg" alt="Guide" class="w-[80%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
17+
</div>
18+
</div>
19+
20+
21+
<div class="main-container bg-lavender pt-48 pb-72 lg:pb-40 md:pt-16 w-full text-black h-auto px-[6%]">
22+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-10 ml-4">
23+
{% for person in speakers %}
24+
<div class="lex flex-col items-center pb-4 transition-transform duration-300 hover:-translate-y-2">
25+
<div class="mx-auto">
26+
<!-- Responsive Image with 4:3 ratio -->
27+
<div class="w-60 h-auto relative group mx-auto">
28+
<div class="w-full h-full">
29+
{% set image_url = person.imageLink if person.imageLink else env.baseUrl ~ 'img/assets/avatar.svg' %}
30+
{{ imgContainer(width=220, height=220, depth=12, frontBg="lavender", leftBg="purple", topBg="purple", url=image_url) }}
31+
</div>
32+
</div>
33+
34+
<!-- Name -->
35+
<p class="mt-2 mb-1 text-xl font-light mx-auto w-52 text-left">{{ person.name }}</p>
36+
37+
<!-- Title -->
38+
<p class="mt-2 mb-1 text-xs font-light mx-auto w-52 text-left">{{person.title}} Change this</p>
39+
40+
<!-- Socials -->
41+
<div class="flex justify-start items-start gap-1 md:gap-4 flex-wrap mx-auto w-52 text-left">
42+
{% if person.socials.linkedin %}
43+
<a href="{{ person.socials.linkedin }}" target="_blank" aria-label="LinkedIn" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
44+
<i class="fab fa-linkedin text-md md:text-xl"></i>
45+
</a>
46+
{% endif %}
47+
{% if person.socials.web %}
48+
<a href="{{ person.socials.web }}" target="_blank" aria-label="Website" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
49+
<i class="fa fa-globe text-md md:text-xl"></i>
50+
</a>
51+
{% endif %}
52+
{% if person.socials.twitter %}
53+
<a href="{{ person.socials.twitter }}" target="_blank" aria-label="Twitter" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
54+
<i class="fab fa-x-twitter text-md md:text-xl"></i>
55+
</a>
56+
{% endif %}
57+
{% if person.socials.github %}
58+
<a href="{{ person.socials.github }}" target="_blank" aria-label="GitHub" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
59+
<i class="fab fa-github text-md md:text-xl"></i>
60+
</a>
61+
{% endif %}
62+
{% if person.socials.youtube %}
63+
<a href="{{ person.socials.youtube }}" target="_blank" aria-label="YouTube" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
64+
<i class="fab fa-youtube text-md md:text-xl"></i>
65+
</a>
66+
{% endif %}
67+
{% if person.socials.insta %}
68+
<a href="{{ person.socials.insta }}" target="_blank" aria-label="Instagram" class="p-1 rounded-full outline outline-1 outline-lime-300 flex justify-center items-center hover:scale-110 hover:text-[#4E62F5] transition-transform duration-200 no-underline">
69+
<i class="fab fa-instagram text-md md:text-xl"></i>
70+
</a>
71+
{% endif %}
72+
</div>
73+
</div>
74+
</div>
75+
{% endfor %}
76+
</div>
77+
</div>

‎src/static/img/assets/tetris-stars.svg

Lines changed: 19 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)