Rewrite portfolio with LOJIK Labs aesthetic#1
Open
dgonzap30 wants to merge 4 commits into
Open
Conversation
Replace Astro + glassmorphism blob design with single-file static site using LOJIK's editorial-dark visual language: layered surfaces, slate accent, single hot-red CTA, Clash Display + Satoshi + JetBrains Mono, interlocked-L brandmark, eyebrow labels, bracket-corner card hovers, hr-glow dividers. Drops the Astro build pipeline entirely. - Hero with live "what I'm shipping" board - 4-row thesis stack (Velocity / Ownership / Verticals / Stack) - Work grid: Mövee, Medivoz, The Protocol, QuokkaQ, Passway, plus Nudge / Coco / DemoPilot as smaller bets - 5-column stack list, numbers, contact Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughSingle-file site replacement: inlines CSS and fonts, restructures content into anchored sections (Hero, Marquee, About, Work, Stack, Numbers, Contact, Footer), and adds client-side JS for marquee population, reveal animations, and mobile menu behavior. ChangesPortfolio Site Redesign
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@index.html`:
- Around line 798-801: The .sr-only rule currently keeps elements clipped and
inaccessible when focused; update the CSS so that .sr-only remains visually
hidden normally but becomes visible when focused/active (e.g., add a selector
like .sr-only:focus, .sr-only:active and override properties such as position,
width, height, margin, overflow, clip, and white-space to make the element
visible and operable). Ensure you modify the existing .sr-only rule and add the
focused/active variant so the "Skip to content" link is usable by keyboard
users.
- Around line 1348-1361: When the mobile menu is open the code in the click
handlers (using toggle and menu and the menu.querySelectorAll("a") listeners)
can leave aria attributes and body scroll locked when the viewport crosses the
CSS breakpoint; add a resize/matchMedia change handler that uses the same CSS
breakpoint media query as your menu to detect when viewport grows past the
breakpoint and in that handler force-close the menu (remove
menu.classList.remove("open")), set toggle.setAttribute("aria-expanded","false")
and menu.setAttribute("aria-hidden","true"), and clear
document.body.style.overflow so the state is reset whenever the breakpoint is
crossed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 44feea68-01f2-49d5-82e8-75c7185d09a3
⛔ Files ignored due to path filters (2)
favicon.icois excluded by!**/*.icofavicon.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
_astro/index.D9jn91_3.cssindex.html
💤 Files with no reviewable changes (1)
- _astro/index.D9jn91_3.css
Comment on lines
+798
to
+801
| .sr-only { | ||
| position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; | ||
| overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; | ||
| } |
There was a problem hiding this comment.
Skip link stays visually hidden when focused.
Line 814 points to a keyboard-accessibility affordance, but Lines 798-801 keep it clipped even on focus. That makes “Skip to content” effectively unusable for many keyboard users.
♿ Proposed fix
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
+.sr-only:focus,
+.sr-only:focus-visible {
+ position: fixed;
+ top: 0.75rem;
+ left: 0.75rem;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 0.55rem 0.8rem;
+ clip: auto;
+ overflow: visible;
+ white-space: normal;
+ z-index: 120;
+ border-radius: 8px;
+ background: var(--elevated);
+ border: 1px solid var(--border);
+ color: var(--text-1);
+}Also applies to: 814-814
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@index.html` around lines 798 - 801, The .sr-only rule currently keeps
elements clipped and inaccessible when focused; update the CSS so that .sr-only
remains visually hidden normally but becomes visible when focused/active (e.g.,
add a selector like .sr-only:focus, .sr-only:active and override properties such
as position, width, height, margin, overflow, clip, and white-space to make the
element visible and operable). Ensure you modify the existing .sr-only rule and
add the focused/active variant so the "Skip to content" link is usable by
keyboard users.
Comment on lines
+1348
to
+1361
| toggle.addEventListener("click", function () { | ||
| var open = menu.classList.toggle("open"); | ||
| toggle.setAttribute("aria-expanded", open ? "true" : "false"); | ||
| menu.setAttribute("aria-hidden", open ? "false" : "true"); | ||
| document.body.style.overflow = open ? "hidden" : ""; | ||
| }); | ||
| menu.querySelectorAll("a").forEach(function (a) { | ||
| a.addEventListener("click", function () { | ||
| menu.classList.remove("open"); | ||
| toggle.setAttribute("aria-expanded", "false"); | ||
| menu.setAttribute("aria-hidden", "true"); | ||
| document.body.style.overflow = ""; | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Mobile menu state is not reset on breakpoint changes.
If the menu is open and viewport grows past Line 172’s breakpoint, the toggle disappears but open/scroll-lock state can persist until another manual interaction.
🛠️ Proposed fix
if (toggle && menu) {
+ function closeMenu() {
+ menu.classList.remove("open");
+ toggle.setAttribute("aria-expanded", "false");
+ menu.setAttribute("aria-hidden", "true");
+ document.body.style.overflow = "";
+ }
+
toggle.addEventListener("click", function () {
var open = menu.classList.toggle("open");
toggle.setAttribute("aria-expanded", open ? "true" : "false");
menu.setAttribute("aria-hidden", open ? "false" : "true");
document.body.style.overflow = open ? "hidden" : "";
});
menu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
- menu.classList.remove("open");
- toggle.setAttribute("aria-expanded", "false");
- menu.setAttribute("aria-hidden", "true");
- document.body.style.overflow = "";
+ closeMenu();
});
});
+ window.addEventListener("resize", function () {
+ if (window.innerWidth >= 720) closeMenu();
+ });
}Also applies to: 172-172
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@index.html` around lines 1348 - 1361, When the mobile menu is open the code
in the click handlers (using toggle and menu and the menu.querySelectorAll("a")
listeners) can leave aria attributes and body scroll locked when the viewport
crosses the CSS breakpoint; add a resize/matchMedia change handler that uses the
same CSS breakpoint media query as your menu to detect when viewport grows past
the breakpoint and in that handler force-close the menu (remove
menu.classList.remove("open")), set toggle.setAttribute("aria-expanded","false")
and menu.setAttribute("aria-hidden","true"), and clear
document.body.style.overflow so the state is reset whenever the breakpoint is
crossed.
- Hero: name-first ("Hi, I'm Diego.") with personal lede
- Drop thesis section; replace with About: 4 paragraphs of
first-person bio + Facts card (Madison/San Diego, music in Logic
Pro X, golf, languages, brother as cofounder)
- "Currently" board (Mövee / Medivoz / Passway / wrapping CS) in
place of the LOJIK-style "what I'm shipping live" pulse
- Section headings: "A few things I've built", "My toolbox",
"Receipts", "Let's talk" — first-person voice throughout
- Nav: drop Thesis + Numbers, add About; "Say hi" on CTA
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- LOJIK Labs founded January 2026, not 2024 - Just graduated UW-Madison; moving to San Diego full time (no longer "splits time") - Grew up in Mexico, came to US at 14 for boarding school (was imprecise "between Mexico and the US") - Spanish is native — replace the "more seriously than résumé" line with "slowly working through French and Italian" - Facts card: split Native (ES · EN) and Learning (FR · IT); drop Cursor from editor; drop the standalone "Building since" line that was a guess - "Currently" board: replace CS '26 wrap-up with "Moving · Madison → San Diego · Summer '26" Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
index.html (1)
1351-1353:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUpdate footer navigation to a valid in-page target.
Line 1352 links to
#thesis, but there is no corresponding section id, so this footer link is broken.🔧 Proposed fix
- <a href="`#thesis`">Thesis</a> + <a href="`#about`">About</a>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@index.html` around lines 1351 - 1353, The footer contains an anchor with href="`#thesis`" that points to a non-existent in-page id; either add a corresponding section element with id="thesis" (e.g., <section id="thesis">...</section>) or change the footer link in the block containing <a href="`#thesis`">Thesis</a> to an existing section id (such as the id used for the thesis content), ensuring the anchor target matches an actual element id so the footer link works.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@index.html`:
- Around line 1351-1353: The footer contains an anchor with href="`#thesis`" that
points to a non-existent in-page id; either add a corresponding section element
with id="thesis" (e.g., <section id="thesis">...</section>) or change the footer
link in the block containing <a href="`#thesis`">Thesis</a> to an existing section
id (such as the id used for the thesis content), ensuring the anchor target
matches an actual element id so the footer link works.
Started shipping production software senior year of college, not "sophomore year" — the latter read as high school sophomore. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the Astro + glassmorphism blob design with a single-file static site using LOJIK Labs' editorial-dark visual language. Drops the Astro build pipeline entirely — GitHub Pages now serves
index.htmldirectly.Aesthetic — direct port of LOJIK tokens:
#0a0a0c, surfaces#15151a/#1f1f26#a8b5c4, single hot-red#ff3c2creserved for the primary CTA arrowSections
Files
index.html(single file, inline CSS + JS, ~1.4k lines)favicon.svg(gradient "D" → monochrome LOJIK mark)_astro/build output andfavicon.icoTest plan
gh pr checkoutand openindex.htmllocally — verify Fontshare + Google Fonts load🤖 Generated with Claude Code
Summary by CodeRabbit
Style
New Features