Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

change design #50

Merged
merged 2 commits into from
Jan 23, 2025
Merged

change design #50

merged 2 commits into from
Jan 23, 2025

Conversation

hummusonrails
Copy link
Owner

@hummusonrails hummusonrails commented Jan 23, 2025 •
edited by github-actions bot
Loading

PR Type

enhancement, documentation

Description

  • Introduced a retro terminal-inspired design across the application.

  • Added new metadata fields, including YouTube, in SITE_METADATA.

  • Updated styles and components to align with the retro theme.

  • Enhanced project and blog layouts with improved structure and interactivity.

Changes walkthrough 📝

Relevant files
Enhancement
18 files
consts.js
Added YouTube link to `SITE_METADATA`.                                     
+1/-0     
global.css
Introduced retro terminal-inspired global styles.               
+219/-15
Card.astro
Updated card component with retro styling.                             
+42/-34 
Footer.astro
Redesigned footer with retro terminal aesthetics.               
+26/-15 
Header.astro
Updated header with retro design and interactive search. 
+41/-35 
MobileNav.astro
Enhanced mobile navigation with terminal-inspired animations.
 +90/-26 
PageTitle.astro
Styled page titles with retro terminal effects.                   
+66/-3   
PresentationCard.astro
Updated presentation card with retro design elements.       
+47/-31 
ProjectCard.astro
Refactored project card with retro styling and interactivity.
 +27/-44 
ListLayout.astro
Redesigned list layout with retro terminal theme.               
+59/-41 
ListWithTagsLayout.astro
Enhanced list with tags layout for retro aesthetics.         
+43/-33 
PostLayout.astro
Updated post layout with retro design and navigation.       
+96/-83 
RootLayout.astro
Applied global retro terminal design to root layout.         
+33/-14 
404.astro
Redesigned 404 page with retro error messaging.                   
+37/-18 
index.astro
Redesigned homepage with retro terminal theme.                     
+35/-45 
projects.astro
Updated projects page with retro design and new project data.
 +61/-67 
search.astro
Enhanced search page with retro design and error handling.
 +53/-5   
talks.astro
Updated talks page with retro terminal-inspired layout.   
+5/-5     
Documentation
1 files
about.astro
Updated about page with retro design and structured content.
 +39/-67 
Configuration changes
1 files
tailwind.config.cjs
Configured Tailwind for retro terminal colors and animations.
 +19/-49 
Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
    •

    @vercel Vercel
    Copy link

    vercel bot commented Jan 23, 2025 •
    edited
    Loading

    The latest updates on your projects. Learn more about Vercel for Git ↗︎

    Name Status Preview Comments Updated (UTC)
    personal-site ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 23, 2025 2:05pm

    @github-actions GitHub Actions
    Copy link

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    ⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Accessibility Concerns

    The retro design heavily relies on specific colors and animations. Ensure that the color contrast meets accessibility standards (e.g., WCAG AA/AAA) and that animations do not cause discomfort for users with motion sensitivity.

    @import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

:root {
  --terminal-green: #00ff00;
  --terminal-black: #000000;
  --terminal-dim: #33ff7a; /* Brightened from #00cc00 for better contrast */
  --terminal-bright: #00ff33;
}

body {
  background-color: var(--terminal-black);
  color: var(--terminal-green);
  font-family: "VT323", monospace;
  line-height: 1.2;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03),
    rgba(0, 255, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 999;
  animation: scan 0.5s linear infinite;
}

@keyframes scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(2px);
  }
}

.retro-container {
  border: 1px solid var(--terminal-green);
  padding: 1rem;
  margin: 1rem 0;
  position: relative;
  animation: flicker 30s infinite;
}

.retro-container::before {
  content: "[SYSTEM]";
  position: absolute;
  top: -0.8em;
  left: 1em;
  background: var(--terminal-black);
  padding: 0 0.5em;
  color: var(--terminal-bright);
}

.retro-link {
  color: var(--terminal-bright);
  text-decoration: none;
  position: relative;
}

.retro-link:hover {
  color: var(--terminal-dim);
  text-decoration: underline;
}

.retro-link::before {
  content: ">";
  margin-right: 0.5em;
}

.retro-button {
  background: var(--terminal-black);
  border: 1px solid var(--terminal-green);
  color: var(--terminal-green);
  padding: 0.5em 1em;
  font-family: "VT323", monospace;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-button:hover {
  background: var(--terminal-green);
  color: var(--terminal-black);
}

.ascii-divider {
  color: var(--terminal-green);
  font-family: monospace;
  text-align: center;
  margin: 1rem 0;
}

.retro-tag {
  font-family: "VT323", monospace;
  color: var(--terminal-green);
  border: 1px solid var(--terminal-green);
  padding: 0.25rem 0.5rem;
  transition: all 0.3s ease;
}

.retro-tag:hover {
  background: var(--terminal-green);
  color: var(--terminal-black);
}

img {
  position: relative;
}

img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.1),
    rgba(0, 255, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

@keyframes flicker {
  0% {
    opacity: 0.97;
  }
  5% {
    opacity: 0.95;
  }
  10% {
    opacity: 0.9;
  }
  15% {
    opacity: 0.95;
  }
  20% {
    opacity: 0.98;
  }
  25% {
    opacity: 0.95;
  }
  30% {
    opacity: 0.9;
  }
  35% {
    opacity: 0.95;
  }
  40% {
    opacity: 0.98;
  }
  45% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.95;
  }
  60% {
    opacity: 0.98;
  }
  65% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.9;
  }
  75% {
    opacity: 0.95;
  }
  80% {
    opacity: 0.98;
  }
  85% {
    opacity: 0.95;
  }
  90% {
    opacity: 0.9;
  }
  95% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.98;
  }
}

.text-gray-500,
.text-gray-600,
.text-gray-700,
.dark:text-gray-400,
.dark:text-gray-300 {
  color: var(--terminal-dim);
}

.text-gray-900,
.dark:text-gray-100 {
  color: var(--terminal-green);
}

.prose {
  color: var(--terminal-green);
}

.prose strong {
  color: var(--terminal-bright);
}

.prose a {
  color: var(--terminal-bright);
}

.prose a:hover {
  color: var(--terminal-dim);
}
    Potential Performance Issue

    The boot-up animation for links in the mobile menu may introduce delays in rendering or responsiveness, especially on slower devices. Validate performance impact.

        function onToggleNav() {
        const isNavHidden = document.body.style.overflow === '';
        mobileMenuContainer.classList.toggle('translate-x-full', !isNavHidden);
        mobileMenuContainer.classList.toggle('translate-x-0', isNavHidden);
        document.body.style.overflow = isNavHidden ? 'hidden' : '';

        // Add terminal boot-up animation when opening
        if (isNavHidden) {
            const links = mobileMenuContainer.querySelectorAll('a');
            links.forEach((link, index) => {
                setTimeout(() => {
                    link.style.opacity = '1';
                    link.textContent = `> ${link.textContent}`;
                }, index * 100);
            });
        }
    }
</script>

<style>
    .toggle-menu pre {
        line-height: 1;
        transition: all 0.3s ease;
    }

    .toggle-menu:hover pre {
        color: var(--terminal-bright);
    }

    #mobileMenuContainer {
        background: linear-gradient(
            to bottom,
            var(--terminal-black) 0%,
            rgba(0, 20, 0, 0.99) 100%
        );
    }

    #mobileMenuContainer a {
        opacity: 0;
        transition: all 0.3s ease;
    }

    #mobileMenuContainer.translate-x-0 {
        animation: bootUp 0.5s ease-out;
    }

    @keyframes bootUp {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
</style>
    Error Handling

    The search results page displays an error message for no matches but does not provide a fallback or suggestions for users. Consider enhancing the user experience with actionable suggestions.

        </li>
  `).join('');
}
---

<RootLayout title={SITE_METADATA.title} description={SITE_METADATA.description}>
  <div class="retro-container">
    <pre class="ascii-divider">
 /================================\
 |        SEARCH RESULTS          |
 \================================/
    </pre>

    <div class="space-y-2 pb-8 pt-6">
      <h1 class="text-2xl font-mono text-terminal-bright">
        > QUERY: "{searchTerm}"
      </h1>
      <pre class="text-terminal-dim">
Scanning database...
{searchResults.length} matches found
      </pre>
    </div>

    <ul id="search-results" class="border border-terminal-green p-4">
      {searchResults.length === 0 ? (
        <pre class="text-terminal-dim">
ERROR: No matching documents found
SYSTEM: Please try another search term
        </pre>
      ) : (
        searchResults.map(post => (
          <li class="py-4 border-b border-terminal-dim last:border-0" key={post.id}>
            <article class="space-y-2">
              <dl>
                <dt class="sr-only">Published on</dt>
                <dd class="text-terminal-dim font-mono">
                  > DATE: {new Date(post.date).toLocaleDateString()}
                </dd>
              </dl>
              <div>
                <h3 class="text-xl font-bold">
                  <a href={`/blog/${post.id}`} class="retro-link">
                    {post.title}
                  </a>
                </h3>
                <div class="flex flex-wrap gap-2 mt-2">
                  {post.tags.map(tag => (
                    <a href={`/tags/${tag}`} class="retro-tag">
                      [{tag}]
                    </a>
                  ))}
                </div>
              </div>
              <div class="text-terminal-dim font-mono">
                {post.summary}
              </div>
            </article>
          </li>
        ))
      )}
    </ul>
  </div>

    @github-actions GitHub Actions
    Copy link

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Score
    Accessibility
    Improve accessibility with meaningful alt text

    Ensure the alt attribute for the img tag dynamically reflects the content or purpose
    of the image to improve accessibility and SEO.

    src/components/PresentationCard.astro [18]

    -<img class="h-full w-full" src={image || "/placeholder.svg"} alt="" />
+<img class="h-full w-full" src={image || "/placeholder.svg"} alt={presentation || "Presentation image"} />
    Suggestion importance[1-10]: 9

    Why: Providing a meaningful alt attribute significantly improves accessibility and SEO. This change aligns with best practices for web development and enhances the user experience for screen readers.

    		9
    Security
    Sanitize user input for security

    Add proper sanitization or validation for the searchTerm variable to prevent
    potential injection attacks or unexpected behavior.

    src/pages/search.astro [71]

    -> QUERY: "{searchTerm}"
+> QUERY: "{sanitizeInput(searchTerm)}"
    Suggestion importance[1-10]: 9

    Why: Sanitizing the searchTerm variable is crucial for preventing injection attacks or unexpected behavior. This suggestion addresses a significant security concern and enhances the robustness of the application.

    		9
    Possible issue
    Prevent runtime errors in animations

    Add a check to ensure that the mobileMenuContainer and links elements exist before
    applying animations to avoid runtime errors if the DOM structure changes.

    src/components/MobileNav.astro [68-76]

    -if (isNavHidden) {
+if (isNavHidden && mobileMenuContainer) {
     const links = mobileMenuContainer.querySelectorAll('a');
-    links.forEach((link, index) => {
-        setTimeout(() => {
-            link.style.opacity = '1';
-            link.textContent = `> ${link.textContent}`;
-        }, index * 100);
-    });
+    if (links) {
+        links.forEach((link, index) => {
+            setTimeout(() => {
+                link.style.opacity = '1';
+                link.textContent = `> ${link.textContent}`;
+            }, index * 100);
+        });
+    }
 }
    Suggestion importance[1-10]: 8

    Why: Adding a check for the existence of mobileMenuContainer and links ensures that the code is robust against potential runtime errors due to DOM changes. This is a practical improvement for preventing crashes.

    		8
    Ensure metadata links are defined

    Validate that all SITE_METADATA properties used in the footer (e.g., email, github,
    linkedin) are defined to prevent broken links or runtime errors.

    src/components/Footer.astro [16-21]

    -<a href={`mailto:${SITE_METADATA.email}`} class="retro-link">[MAIL]</a>
-<a href={SITE_METADATA.github} class="retro-link">[GITHUB]</a>
-<a href={SITE_METADATA.linkedin} class="retro-link">[LINKEDIN]</a>
-<a href={SITE_METADATA.twitter} class="retro-link">[TWITTER]</a>
-<a href={SITE_METADATA.youtube} class="retro-link">[YOUTUBE]</a>
-<a href={SITE_METADATA.substack} class="retro-link">[SUBSTACK]</a>
+{SITE_METADATA.email && <a href={`mailto:${SITE_METADATA.email}`} class="retro-link">[MAIL]</a>}
+{SITE_METADATA.github && <a href={SITE_METADATA.github} class="retro-link">[GITHUB]</a>}
+{SITE_METADATA.linkedin && <a href={SITE_METADATA.linkedin} class="retro-link">[LINKEDIN]</a>}
+{SITE_METADATA.twitter && <a href={SITE_METADATA.twitter} class="retro-link">[TWITTER]</a>}
+{SITE_METADATA.youtube && <a href={SITE_METADATA.youtube} class="retro-link">[YOUTUBE]</a>}
+{SITE_METADATA.substack && <a href={SITE_METADATA.substack} class="retro-link">[SUBSTACK]</a>}
    Suggestion importance[1-10]: 8

    Why: Validating the existence of SITE_METADATA properties before rendering links prevents broken links and runtime errors. This is a valuable improvement for ensuring the reliability of the footer's functionality.

    		8
    Avoid reassigning variables in loops

    Ensure that the id variable is not being reassigned within the tags.map function, as
    this could lead to unintended side effects or bugs.

    src/layouts/ListWithTagsLayout.astro [80-82]

    -{tags.map(({ id, name }) => (
-    id = id.toLowerCase(),
-    <li key={id}>
+{tags.map(({ id, name }) => {
+    const tagId = id.toLowerCase();
+    return (
+        <li key={tagId}>
    Suggestion importance[1-10]: 8

    Why: Reassigning the id variable within the tags.map function could lead to unintended side effects or bugs. The suggestion to use a new variable (tagId) improves code clarity and avoids potential issues, making it a valuable enhancement.

    		8
    Validate array before iteration

    Validate that authors is an array before mapping over it to avoid runtime errors if
    the data structure is unexpected.

    src/layouts/PostLayout.astro [56-57]

    -{authors.map(({ id, name, avatar, twitter }) => (
+{Array.isArray(authors) && authors.map(({ id, name, avatar, twitter }) => (
     <li class="flex items-center gap-4" key={id}>
    Suggestion importance[1-10]: 7

    Why: Validating that authors is an array before mapping over it prevents potential runtime errors if the data structure is unexpected. This is a practical improvement for ensuring code reliability.

    		7
    General
    Validate URLs before rendering links

    Ensure that project.github_link and project.blog_link are valid URLs before
    rendering them as links to avoid broken or unsafe links.

    src/pages/projects.astro [82-83]

    -<a href={project.github_link} class="retro-link">SOURCE</a>
-<a href={project.blog_link} class="retro-link">DOCS</a>
+{project.github_link && <a href={project.github_link} class="retro-link">SOURCE</a>}
+{project.blog_link && <a href={project.blog_link} class="retro-link">DOCS</a>}
    Suggestion importance[1-10]: 8

    Why: Ensuring that project.github_link and project.blog_link are valid URLs before rendering them avoids broken or unsafe links, enhancing the user experience and application reliability.

    		8
    Add fallback fonts for reliability

    Consider using a fallback font for the mono and sans font families to ensure proper
    rendering in environments where VT323 is unavailable.

    tailwind.config.cjs [16]

    -mono: ['VT323', ...fontFamily.mono],
+mono: ['VT323', 'Courier New', ...fontFamily.mono],
    Suggestion importance[1-10]: 8

    Why: Adding a fallback font improves reliability and ensures proper rendering in environments where the primary font may not be available. This is a practical and impactful enhancement.

    		8
    Optimize animation timing for better performance

    Ensure that the terminal-blink animation uses a more precise timing function or
    duration to avoid potential performance issues or unintended visual effects,
    especially on slower devices.

    tailwind.config.cjs [20]

    -'terminal-blink': 'blink 1s step-end infinite',
+'terminal-blink': 'blink 0.8s ease-in-out infinite',
    Suggestion importance[1-10]: 7

    Why: The suggestion improves the animation's performance and visual smoothness by adjusting the timing function and duration. This is a valid enhancement, especially for devices with varying performance capabilities.

    		7
    Performance
    Optimize animation to reduce CPU usage

    Ensure the body::before animation does not cause excessive CPU usage by testing it
    on lower-end devices, as the infinite animation with high frequency could impact
    performance.

    src/styles/global.css [18-34]

     body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient(
     0deg,
     rgba(0, 255, 0, 0.03),
     rgba(0, 255, 0, 0.03) 1px,
     transparent 1px,
     transparent 2px
   );
   pointer-events: none;
   z-index: 999;
-  animation: scan 0.5s linear infinite;
+  animation: scan 1s linear infinite;
 }
    Suggestion importance[1-10]: 7

    Why: The suggestion to reduce the animation frequency from 0.5s to 1s could help lower CPU usage, especially on lower-end devices. However, it is not guaranteed to resolve performance issues entirely without testing, and the change might slightly affect the visual effect.

    		7

    @hummusonrails hummusonrails merged commit 2f960e1 into main Jan 23, 2025
    2 checks passed
    @hummusonrails hummusonrails deleted the rebrand branch January 23, 2025 14:06
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Reviewers
    No reviews
    Assignees
    No one assigned
    Labels
    None yet
    Projects
    None yet
    Milestone
    No milestone
    Development

    Successfully merging this pull request may close these issues.
    1 participant
    @hummusonrails