Refresh landing page design and styling#4
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @MrFruitDude, 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 significant visual and structural overhaul of the website, focusing on a modern, cohesive user experience. The changes encompass a complete redesign of the homepage, an updated site-wide design system with glassmorphism elements, and necessary Ruby dependency updates to ensure the Jekyll build remains functional and future-proof. The goal is to present a fresh, engaging, and consistent interface to visitors.
Highlights
- Design Refresh: The landing page has been completely rebuilt with a new gradient hero, feature stories, a capabilities grid, testimonials, and updated Call-to-Action (CTA) content, aligning with a new aesthetic.
- New Design System: An updated glassmorphism-inspired design system has been introduced, along with redesigned header and footer components, ensuring a cohesive look and feel across the entire site.
- Ruby Dependency Updates: Several missing Ruby standard library gems (csv, logger, base64, bigdecimal) have been added to the Gemfile to maintain Jekyll build compatibility with Ruby versions 3.4 and above.
- Style Consolidation: Page-level style overrides that previously conflicted with the new global styling have been removed, streamlining the CSS and improving maintainability.
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| 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 issue 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.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
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. ↩
There was a problem hiding this comment.
Code Review
This is a fantastic and comprehensive refresh of the landing page and overall site styling. The move to a centralized, modern CSS design system using custom properties is a huge improvement for maintainability and consistency. The new homepage design is modern and engaging, and the component-based approach in the SCSS is well-executed. The assets/css/main.scss file has grown quite large; for long-term maintainability, you might consider splitting it into smaller, more focused partials (e.g., for variables, buttons, header, etc.) and importing them into the main file. I've noted a few other minor areas for improvement regarding code organization, semantics, and a small bug in the CSS, but overall this is a very strong pull request.
| position: fixed; | ||
| inset: 0; | ||
| pointer-events: none; | ||
| background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cfilter id="n" x="0" y="0" width="100%25" height="100%25"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.07"/%3E%3C/svg%3E'); |
There was a problem hiding this comment.
There appears to be an issue with the URL-encoded SVG in the background-image for the body::after pseudo-element. The % characters in width="100%" and height="100%" have been incorrectly encoded as %25, resulting in width="100%25". While some browsers might be lenient, this is technically incorrect and could cause rendering issues. The % symbol should not be encoded in this context within the SVG data URI.
| background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cfilter id="n" x="0" y="0" width="100%25" height="100%25"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.07"/%3E%3C/svg%3E'); | |
| background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cfilter id="n" x="0" y="0" width="100%" height="100%"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23n)" opacity="0.07"/%3E%3C/svg%3E'); |
| gem "csv" | ||
| gem "logger" | ||
| gem "base64" | ||
| gem "bigdecimal" |
There was a problem hiding this comment.
To improve maintainability, it would be helpful to add a comment explaining why these standard library gems are being explicitly added. The pull request description mentions it's for Ruby 3.4+ compatibility, and capturing that context here will be valuable for future developers.
# Default gems that need to be explicitly defined for Jekyll on Ruby 3.4+
gem "csv"
gem "logger"
gem "base64"
gem "bigdecimal"
| <span>AI product strategy</span> | ||
| <span>Experience design</span> | ||
| <span>Applied machine learning</span> | ||
| <span>Platform engineering</span> |
There was a problem hiding this comment.
For better semantic structure and accessibility, this list of capabilities should be marked up as an unordered list (<ul> with <li> items) instead of a series of <span> elements. This more accurately represents the content as a list. You may need to add some styles to the <ul> and <li> to reset default browser styling (like list-style: none; padding: 0;) and apply the intended spacing between items.
<ul>
<li>AI product strategy</li>
<li>Experience design</li>
<li>Applied machine learning</li>
<li>Platform engineering</li>
</ul>| <script> | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const menuToggle = document.getElementById('menu-toggle'); | ||
| const mobileMenu = document.getElementById('mobile-menu'); | ||
|
|
||
| menuToggle.addEventListener('click', function() { | ||
| mobileMenu.classList.toggle('hidden'); | ||
| }); | ||
|
|
||
| if (menuToggle && mobileMenu) { | ||
| menuToggle.addEventListener('click', function() { | ||
| mobileMenu.classList.toggle('hidden'); | ||
| }); | ||
| } | ||
| }); | ||
| </script> No newline at end of file | ||
| </script> |
There was a problem hiding this comment.
This script for the mobile menu toggle is functional, but it's generally better to centralize JavaScript. The _layouts/default.html file already includes a <script> block at the end of the body where this logic could be moved to improve code organization and keep all page scripts in one place.
| .animate-slide-left { | ||
| opacity: 0; | ||
| transform: translateX(-30px); | ||
| transform: translateX(40px); | ||
| transition: opacity 0.8s ease-out, transform 0.8s ease-out; | ||
|
|
||
| &.animate-visible { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| } | ||
|
|
||
| .animate-slide-left { | ||
| .animate-slide-left.animate-visible { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
|
|
||
| .animate-slide-right { | ||
| opacity: 0; | ||
| transform: translateX(30px); | ||
| transform: translateX(-40px); | ||
| transition: opacity 0.8s ease-out, transform 0.8s ease-out; | ||
| &.animate-visible { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| } | ||
|
|
||
| .animate-slide-right.animate-visible { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } |
There was a problem hiding this comment.
The naming of the slide animation classes could be clearer and is currently counter-intuitive:
.animate-slide-left(lines 1152-1161) slides the element in from the right..animate-slide-right(lines 1163-1172) slides the element in from the left.
Consider renaming them to be more descriptive of their behavior, such as .animate-slide-in-from-right and .animate-slide-in-from-left, to improve clarity and maintainability.
1 participant
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68c8525a2e008326ab13e0cd4e914d25