Skip to content

Commit f0c8d0c

Browse files
Astraxx04Astraxx04
committed
Speakers section
1 parent bbb9d2f commit f0c8d0c

File tree

5 files changed

+216
-0
lines changed

5 files changed

+216
-0
lines changed

‎src/_data/menuItems.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
"name": "Schedule",
3434
"link": "program/schedule"
3535
},
36+
{
37+
"name": "Speakers",
38+
"link": "program/speakers"
39+
},
3640
{
3741
"name": "CFP Overview",
3842
"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: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 %}" style="--w:{{ width }}; --h:{{ height }}; --d:{{ depth }}; --front-bg:{{ resolved_front_bg }}; --top-bg:{{ resolved_top_bg }}; --left-bg:{{ resolved_left_bg }};">
35+
<!-- Top Panel -->
36+
<div class="face top"></div>
37+
<!-- Left Panel -->
38+
<div class="face left"></div>
39+
<!-- Front Face -->
40+
<div class="face front">
41+
<img src="{{ url }}" alt="{{ altText }}" class="w-full h-full object-cover" />
42+
</div>
43+
</div>
44+
{% endmacro %}

‎src/program/speakers.njk

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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 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-[#000000] 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 pt-24 pb-72 lg:pb-40 md:pt-16 w-full text-black h-auto px-[6%]">
22+
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-10 ">
23+
{% for person in speakers %}
24+
<div class="flex flex-col items-center pb-4">
25+
<div class="items-start">
26+
<!-- Responsive Image with 4:3 ratio -->
27+
<div class="w-60 h-48 relative">
28+
<div class="absolute inset-0">
29+
<div class="w-full h-full">
30+
{% if person.imageLink %}
31+
{{ imgContainer(width=220, height=180, depth=16, frontBg="lavender", leftBg="purple", topBg="purple", url= person.imageLink) }}
32+
{% else %}
33+
{{ imgContainer(width=220, height=180, depth=16, frontBg="lavender", leftBg="purple", topBg="purple", url= person.imageLink) }}
34+
{% endif %}
35+
</div>
36+
</div>
37+
</div>
38+
39+
<!-- Name -->
40+
<p class="mt-2 ml-2 mb-1 text-xl font-light text-left">{{ person.name }}</p>
41+
42+
<!-- Socials -->
43+
<div class="flex ml-2 justify-left items-start gap-1 md:gap-4 flex-wrap">
44+
{% if person.socials.linkedin %}
45+
<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">
46+
<i class="fab fa-linkedin text-md md:text-xl"></i>
47+
</a>
48+
{% endif %}
49+
{% if person.socials.web %}
50+
<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">
51+
<i class="fa fa-globe text-md md:text-xl"></i>
52+
</a>
53+
{% endif %}
54+
{% if person.socials.twitter %}
55+
<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">
56+
<i class="fab fa-x-twitter text-md md:text-xl"></i>
57+
</a>
58+
{% endif %}
59+
{% if person.socials.github %}
60+
<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">
61+
<i class="fab fa-github text-md md:text-xl"></i>
62+
</a>
63+
{% endif %}
64+
{% if person.socials.youtube %}
65+
<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">
66+
<i class="fab fa-youtube text-md md:text-xl"></i>
67+
</a>
68+
{% endif %}
69+
{% if person.socials.insta %}
70+
<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">
71+
<i class="fab fa-instagram text-md md:text-xl"></i>
72+
</a>
73+
{% endif %}
74+
</div>
75+
</div>
76+
</div>
77+
{% endfor %}
78+
</div>
79+
</div>

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

Lines changed: 19 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)