Redesign homepage. by Antoliny0919 · Pull Request #655 · django/djangosnippets.org

Antoliny0919 · 2026-02-03T08:23:45Z

Before

After

…omepage

Antoliny0919 · 2026-02-05T08:16:35Z

Hello @chriswedgwood (it's been a while!)

I apologize for reaching out while you're busy, but I've redesigned the homepage and would really appreciate if you could review the text content. My English isn't quite there yet, so I'd value your feedback :(

cliffordgama · 2026-02-05T08:33:07Z

@Antoliny0919 Great work!

Antoliny0919 · 2026-02-05T08:41:39Z

@Antoliny0919 Great work!

oh wow, hello @cliffordgama :)
Could you check the text part for me? It's okay if you're busy!

cliffordgama

Hello @Antoliny0919 Thanks for the work here 🏆⭐
I had a look at the redesign. There is nothing that is really blocking, but I think some of the components have low contrast, which may be an accessibility issue.

cliffordgama · 2026-02-05T09:37:19Z

djangosnippets/templates/homepage.html

-  <p><a href="https://readthedocs.org/">Find documentation</a> for popular open source apps</p>
+<section class="flex flex-col px-12 pt-8 pb-40 text-center">
+  <img class="mx-auto" src="{% static 'img/banner_logo.png' %}"></img>
+  <h1 class="text-4xl mx-auto max-w-6xl text-gray-900 font-bold tracking-tight leading-tight font-homepage-section-title lg:text-6xl">Share and Discover useful <span class="text-base-green-400 font-logo">Django</span> code <span class="text-base-orange-400 font-logo">Snippets</span></h1>


Suggested change

<h1 class="text-4xl mx-auto max-w-6xl text-gray-900 font-bold tracking-tight leading-tight font-homepage-section-title lg:text-6xl">Share and Discover useful <span class="text-base-green-400 font-logo">Django</span> code <span class="text-base-orange-400 font-logo">Snippets</span></h1>

<h1 class="text-4xl mx-auto max-w-6xl text-gray-900 font-bold tracking-tight leading-tight font-homepage-section-title lg:text-6xl">Share and discover useful <span class="text-base-green-400 font-logo">Django</span> code <span class="text-base-orange-400 font-logo">Snippets</span></h1>

There is a mix of Title Case and Sentence case for titles.

I did intend to emphasize "Share" and "Discover."
Does it look a bit odd?
Would it be better to express the emphasis in a different way 🤔

I'd keep the case consistent across the site instead of mixing title case and sentence case. Maybe you could try emphasize differently, like using if possible?

I think bold is probably already applied.
It would be fine to just switch to "discover" (since there's a button below)

I'm worried that emphasizing it in another way might make it too flashy.
I think the lowercase version looks fine 😄

cliffordgama · 2026-02-05T09:51:52Z

djangosnippets/templates/homepage.html

+        </div>
+      </a>
+      <a href="{{ top_bookmarked_snippet.get_absolute_url }}" class="block rounded-md bg-base-orange-400/50 no-underline text-black px-2 group">
+        <h3 class="text-flip-title homepage-stat-card-title" data-hover="Read More"><span>Top BookMarked Snippet</span></h3>


Suggested change

<h3 class="text-flip-title homepage-stat-card-title" data-hover="Read More"><span>Top BookMarked Snippet</span></h3>

<h3 class="text-flip-title homepage-stat-card-title" data-hover="Read More"><span>Most Bookmarked Snippet</span></h3>

I think this should be "most bookmarked"

cliffordgama · 2026-02-05T09:59:05Z

djangosnippets/templates/homepage.html

+      </div>
+    </div>
+    <div class="my-12 px-4">
+      <p class="homepage-section-sub-title">In programming, a snippet is a small, reusable piece of code.</p>


Suggested change

<p class="homepage-section-sub-title">In programming, a snippet is a small, reusable piece of code.</p>

<p class="homepage-section-sub-title">A snippet is a small, reusable piece of code.</p>

I think this is cleaner, since programming is already understood in the context.

What do you think of maybe using this space to display the most recently added snippet instead? (Perhaps in a future PR... the suggestion is not a blocker for this work.)

What do you think of maybe using this space to display the most recently added snippet instead? (Perhaps in a future PR... the suggestion is not a blocker for this work.)

Good idea! I think we'd probably need to add some restrictions on snippet length.
In my opinion, a static state would be best, but it's true that the currently displayed snippet isn't quite appropriate. (Actually, I struggled a lot with deciding which snippet to use.)
Since it's on the homepage, I think a simple yet powerful snippet would be ideal.

Whatever we're going to have there, a reader will be invited to read, so it is best if it is something that adds value to them. Thought: Maybe we could pick something at random from snippets that have 5+ likes. That way we'd be sure to have something of some value? What do you think?

You're right. I looked around a bit too, but I'll need to search more.
Or, since there are many people here who have used Django for a long time and contributed, I think it would be good to ask them!
But I think this part can be addressed slowly later.
(I'll create a separate issue for it)

cliffordgama · 2026-02-05T10:04:35Z

djangosnippets/templates/homepage.html

+    <div class="relative flex flex-col items-center py-6 text-center w-[24rem] border-3 rounded-lg border-gray-400 hover:-translate-y-2 hover:border-base-green-400 duration-300 group">
+      <a class="text-black no-underline" href="https://github.com/django/djangosnippets.org/pulls">
+        <div class="homepage-float-label-container"><span class="homepage-float-label">CONTRIBUTING</span></div>
+        <h3 class="underline underline-offset-2 py-2 text-lg lg:text-xl">Contribute on Github</h3>


Suggested change

<h3 class="underline underline-offset-2 py-2 text-lg lg:text-xl">Contribute on Github</h3>

<h3 class="underline underline-offset-2 py-2 text-lg lg:text-xl">Contribute on GitHub</h3>

cliffordgama · 2026-02-05T10:05:47Z

djangosnippets/templates/homepage.html

+  </div>
+</section>
+<section>
+  <h2 class="homepage-section-title">Join the Django Snippets Website Development !</h2>


Suggested change

<h2 class="homepage-section-title">Join the Django Snippets Website Development !</h2>

<h2 class="homepage-section-title">Join the Django Snippets Website Development!</h2>

cliffordgama · 2026-02-05T10:10:03Z

djangosnippets/templates/homepage.html

+<section class="my-40">
+  <div class="py-20 bg-base-green-400/20 max-w-[1920px] md:-mx-auto w-screen relative left-1/2 right-1/2 -translate-x-1/2 text-center lg:rounded-t-[60%]">
+    <h2 class="homepage-section-title max-w-5xl my-8 leading-tight mx-auto">Community at a Glance</h2>
+    <p class="homepage-section-sub-title max-w-2xl mt-4 mb-18 text-gray-600 mx-auto">See how our community has grown and discover the most popular snippets shared by Django developers worldwide.</p>


"Check out some highlights from the site, and discover the most popular snippets shared by Django developers worldwide."
(Maybe, it's just me but "See how our community has grown..." led me to expect that I'd find some article to read on the subject of community 🙃.)

Yes, I agree. I thought data like the number of members and snippets represented the community's growth.
The sentence you suggested seems more appropriate 👍

cliffordgama · 2026-02-05T10:16:02Z

djangosnippets/templates/homepage.html

+        <div class="flex flex-col items-center">
+          <p class="homepage-stat-card-sub-title">Total Users</p>
+          {% component "icon" kind="user" label="user" color="white" classes="w-[50px] h-[50px]" / %}
+          <p class="homepage-stat-card-metric my-3">{{ total_users|intcomma }}</p>


This looks like it has low contrast.

You're referring to the sub-title and backgro
und color, right?
Hmm... since it's a color with transparency, I'm not sure exactly how to measure it.
To my eye, the parts with the worst color contrast seem to be the sub-title, and the clearly problematic part appears to be the bookmark icon and its background.
I've bumped up the sub-title color by one shade!

For the bookmark, I'd like to keep the color as is if possible (to maintain the same color as the snippet list)...
I'll need to think about it a bit more 🫠

Yes I meant the grayish subtitle on the greenish bg. I hadn't noticed the problem with the icons 😄, but now that you mention it

이시현 added 12 commits February 3, 2026 17:22

feat: redesign homepage banner area

7adfca1

fix: incorrect font name

b539f5f

feat: add 'What is Django Snippets' section in homepage

54f2ca4

feat: add typing animation to 'What is Django Snippets' text

4d7031d

feat: add 'Community at a Glance' section in homepage

19a280a

feat: add 'Join the Django Snippets Website Development' section in h…

329a4bf

…omepage

fix: rename stat container utility class for clarity

dc1d3e2

feat: enhance stat cards with full snippet details and link

755daac

style: separate font theme and add custom classes

7369aa9

style: add responsive styles for homepage

359dcb8

fix: homepage banner subtitle text

958d726

fix: Add thousand separators to hompepage stat number

98f9e12

cliffordgama reviewed Feb 5, 2026

View reviewed changes

fix: apply clifford suggestions

178a2ed

Antoliny0919 requested a review from cliffordgama February 6, 2026 01:36

fix: convert homepage banner title 'Discover' text to lowercase

647a8f2

	<h1 class="text-4xl mx-auto max-w-6xl text-gray-900 font-bold tracking-tight leading-tight font-homepage-section-title lg:text-6xl">Share and Discover useful <span class="text-base-green-400 font-logo">Django</span> code <span class="text-base-orange-400 font-logo">Snippets</span></h1>
	<h1 class="text-4xl mx-auto max-w-6xl text-gray-900 font-bold tracking-tight leading-tight font-homepage-section-title lg:text-6xl">Share and discover useful <span class="text-base-green-400 font-logo">Django</span> code <span class="text-base-orange-400 font-logo">Snippets</span></h1>

	<h3 class="text-flip-title homepage-stat-card-title" data-hover="Read More"><span>Top BookMarked Snippet</span></h3>
	<h3 class="text-flip-title homepage-stat-card-title" data-hover="Read More"><span>Most Bookmarked Snippet</span></h3>

	<p class="homepage-section-sub-title">In programming, a snippet is a small, reusable piece of code.</p>
	<p class="homepage-section-sub-title">A snippet is a small, reusable piece of code.</p>

	<h3 class="underline underline-offset-2 py-2 text-lg lg:text-xl">Contribute on Github</h3>
	<h3 class="underline underline-offset-2 py-2 text-lg lg:text-xl">Contribute on GitHub</h3>

	<h2 class="homepage-section-title">Join the Django Snippets Website Development !</h2>
	<h2 class="homepage-section-title">Join the Django Snippets Website Development!</h2>

Conversation

Antoliny0919 commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

Antoliny0919 commented Feb 5, 2026

Uh oh!

cliffordgama commented Feb 5, 2026

Uh oh!

Antoliny0919 commented Feb 5, 2026

Uh oh!

cliffordgama left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cliffordgama Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Antoliny0919 commented Feb 3, 2026 •

edited

Loading

cliffordgama Feb 6, 2026 •

edited

Loading