Skip to content

feat(sitcon): SITCON 2026 event page full redesign#45

Open
w-club wants to merge 2 commits intoai-twinkle:rollingfrom
w-club:main
Open

feat(sitcon): SITCON 2026 event page full redesign#45
w-club wants to merge 2 commits intoai-twinkle:rollingfrom
w-club:main

Conversation

@w-club
Copy link
Contributor

@w-club w-club commented Mar 25, 2026

mascot integration and starry sky

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a comprehensive redesign of the SITCON 2026 event page, transforming its visual identity and user experience. The changes focus on creating a more engaging and modern interface, incorporating dynamic background elements and a new mascot, while also refining the presentation of key information and interactive components. The goal is to provide a more immersive and aesthetically pleasing experience for visitors.

Highlights

  • Complete Page Redesign: The SITCON 2026 event page has undergone a full visual overhaul, introducing a new aesthetic and layout.
  • Dynamic Starry Sky Background: Implemented a captivating starry sky background with ambient and shooting stars, enhancing the page's visual appeal.
  • Mascot Integration: A new mascot image has been integrated into the 'Connect' section, adding a unique visual element.
  • Enhanced UI Components: Project links, API information, and community links have been redesigned with improved styling and interactivity.
  • Removed Theme Toggle: The theme toggle functionality and associated light mode styles have been removed, streamlining the design to a single dark theme.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request significantly redesigns the sitcon-2026.vue page, introducing a new visual aesthetic with background effects like a night sky gradient, noise overlay, and animated shooting stars. The layout for the hero section, project links, free LLM API section, and community links has been revamped, including the addition of a mascot. The styling has been completely rewritten to support this new design, and font imports have been updated. Feedback indicates that new user-facing strings need to be internationalized, inline styles for animations should be moved to CSS, and the use of !important in CSS should be refactored for better maintainability.

@supersonictw
Copy link
Collaborator

/gemini review again

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request completely redesigns the sitcon-2026.vue page, introducing a new "night-sky" aesthetic with updated layouts for project contributions, a free LLM API section, and social links, alongside new internationalization keys. A critical security vulnerability was identified where the API key is exposed client-side due to being sourced from runtimeConfig.public and hardcoded, requiring it to be moved to a secure server-side environment variable. Further feedback includes suggestions to improve code maintainability by refactoring inline layout styles into dedicated CSS classes and adding a comment to explain the touchstart.passive listener workaround for :active styles on iOS devices.


<NuxtLink to="/" class="back-link anim-in" style="--d:0.40s">← 回到 Twinkle AI 官網</NuxtLink>
<!-- BACK BUTTON -->
<div class="anim-fade-up" style="--d: 0.4s; display: flex; justify-content: center; width: 100%;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using inline styles for layout properties like display: flex and justify-content: center reduces maintainability and makes overriding styles more difficult. It's better to define these styles in a dedicated CSS class.

You can add the following class to your <style> block:

.back-button-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

And then apply it to the div.

      <div class="anim-fade-up back-button-wrapper" style="--d: 0.4s;">

Comment on lines +696 to +704
/* ── MOBILE TOUCH ACTIVE ── */
.sitcon-page .project-card:active,
.sitcon-page .btn:active,
.sitcon-page .social-btn:active,
.sitcon-page .btn-back-gorgeous:active {
transform: translateY(1px) scale(0.95);
box-shadow: 0 2px 8px rgba(12,8,5,0.06);
transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s cubic-bezier(0.4, 0, 0.2, 1);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These :active styles won't work on some touch devices (like iOS) without a touchstart event listener on the element or a parent. The <main> element has an empty @touchstart.passive listener for this purpose. For better maintainability, it would be beneficial to add a comment here explaining this dependency.

/* ── MOBILE TOUCH ACTIVE ── */
/* Note: The empty @touchstart listener on the <main> element is a workaround
   to enable these :active pseudo-class styles on iOS. */
.sitcon-page .project-card:active,
.sitcon-page .btn:active,
.sitcon-page .social-btn:active,
.sitcon-page .btn-back-gorgeous:active {
  transform: translateY(1px) scale(0.95);
  box-shadow: 0 2px 8px rgba(12,8,5,0.06);
  transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s cubic-bezier(0.4, 0, 0.2, 1);
}

@supersonictw
Copy link
Collaborator

/gemini apiKey is a free-to-use key. DO NOT mention it anymore.

@gemini-code-assist
Copy link
Contributor

Understood. I will ensure that the apiKey is not mentioned in future comments or summaries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants