Designing and developing a website for the 20th Simonyi Conference

In autumn 2022 I joined the team that would create the design of the next Simonyi Conference. Since it was the 20th anniversary of the conference, we knew we have to make something awesome.

For base colors we chose Cyan Process and Bud Green as these colors are mostly similar to the design of Simonyi. After a careful consideration we chose Cyber Yellow as an accent color that looked great, especially on web link hovers.

Creating a responsive UI design for an event website is essential in today’s digital world. It ensures seamless user experience across various devices, enhancing accessibility and engagement. With a responsive design, attendees can easily access event details and register, regardless of their device. It reflects a commitment to user-centricity and inclusivity, ultimately contributing to the event’s success.

Some of the initial versions of the landing page

We chose Next.js (pages router), TailwindCSS and Contentful as a free CMS. Given the fact we already had experience with React, this was a good decision. We were also planning to use Astro, but ended up sticking to Next.js.

Next.js App router stable version was only released after the conference on May 4th 2023 so we didn’t want to base this small website on a preview version of that.

During the project one of my favourite discory was that you can actually animate text colors using css gradients fairly easily. You just have to specify atleast 2 colors, set one or two flags here and there 🪄, you will end up having an awesome animated text.

You can see a quick snippet with TailwindCSS how you can do that.

// file: tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        text: "text 3s ease infinite",
      },
      keyframes: {
        text: {
          "0%, 100%": {
            "background-size": "200% 200%",
            "background-position": "left center",
          },
          "50%": {
            "background-size": "200% 200%",
            "background-position": "right center",
          },
        },
      },
      transitionTimingFunction: {
        DEFAULT: transitionTimingFunction.out,
      },
    },
  },
};

// component.jsx
<h1
  class="bg-gradient-to-r bg-clip-text 
    text-transparent from-blue to-green animate-text"
>
  Your text
</h1>

Since Google Analytics is often blocked by several browser extensions, we chose to use Umami for tracking traffic on our website. Umami is a simple, fast, privacy-focused alternative to Google Analytics.

Our hard work and dedication have paid off, as we reached a total of 6.42k unique viewers and 27.7k overall page views on the website. These numbers exceeded our expectations.