Fix CI backend tests and ship frontend UI overhaul#2
Merged
Conversation
Replace the brittle test/**/*.test.js glob (fails on Linux Node 20 CI) with a cross-platform test runner script. Includes dashboard layout, portfolio template redesign, unified theming, and navbar polish.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR refreshes Portlify’s visual design system and portfolio UI while refactoring several frontend pages/components for more consistent layout primitives, and it updates the backend test command to be cross-platform in CI.
Changes:
- Replace the backend
test/**/*.test.jsshell glob with a Node script-based test runner for consistent CI behavior. - Introduce a new portfolio template/theme system (CSS vars + redesigned sections/layout).
- Unify UI primitives across the app (icon system, headers, dashboard layout/sidebar, navbar/mobile navigation, async/toast states) and update theming/colors.
Reviewed changes
Copilot reviewed 44 out of 46 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/tailwind.config.js | Updates Tailwind theme colors, fonts, radii, and gradients to match the new design system. |
| frontend/src/utils/clerkAppearance.js | Centralizes Clerk appearance configuration for theme-aware auth + user menu styling. |
| frontend/src/portfolio/theme.js | Adds portfolio theme palettes and CSS variable generation helpers. |
| frontend/src/portfolio/PortfolioTemplate.jsx | New portfolio page layout with section navigation + theming. |
| frontend/src/portfolio/portfolio.css | Portfolio-specific CSS variables/utilities and reduced-motion/print styling. |
| frontend/src/portfolio/components/TopBar.jsx | Adds sticky portfolio top bar with theme toggle. |
| frontend/src/portfolio/components/SectionNav.jsx | Adds mobile section navigation for portfolio. |
| frontend/src/portfolio/components/SectionContent.jsx | New portfolio section renderers (experience/projects/skills/etc.). |
| frontend/src/portfolio/components/ProfileAside.jsx | New portfolio sidebar with social/contact/resume actions and section navigation. |
| frontend/src/portfolio/components/LoadingState.jsx | Portfolio loading UI. |
| frontend/src/portfolio/components/Footer.jsx | Portfolio footer with premium branding tooltip + CTA. |
| frontend/src/portfolio/components/ErrorState.jsx | Portfolio error UI. |
| frontend/src/portfolio/buildSections.js | Builds portfolio sections from profile data (including custom sections). |
| frontend/src/pages/UsernameSelection.jsx | Improves form accessibility and replaces inline SVGs with unified icons. |
| frontend/src/pages/ResumeUpload.jsx | Refactors layout to use PageHeader + unified icons and styling. |
| frontend/src/pages/ProfileEditor.jsx | Refactors editor to use shared layout primitives and updated styling. |
| frontend/src/pages/Premium.jsx | Refactors premium page UI to use shared components + unified icons. |
| frontend/src/pages/Onboarding.jsx | Refactors onboarding cards to use buttons, unified icons, and updated animations/colors. |
| frontend/src/pages/Landing.jsx | Overhauls landing page layout/animations/icons to match new theme system. |
| frontend/src/pages/Dashboard.jsx | Refactors dashboard to use DashboardLayout data + new sections, stats, and skeleton UI. |
| frontend/src/pages/Analytics.jsx | Refactors analytics UI with shared header, icon system, and async states. |
| frontend/src/main.jsx | Updates ClerkProvider appearance variables/elements to match new palette. |
| frontend/src/index.css | Major design system update: CSS variables, layout helpers, and component utility classes. |
| frontend/src/context/ToastContext.jsx | Refactors toast rendering with unified icons, improved a11y, and new styling. |
| frontend/src/components/UploadZone.jsx | Updates upload dropzone styling, icons, and error a11y. |
| frontend/src/components/ThemeToggle.jsx | Improves toggle a11y and replaces inline SVGs with Lucide icons. |
| frontend/src/components/SectionHeading.jsx | Adds a reusable section heading component. |
| frontend/src/components/ScrollToTop.jsx | Adds route-change scroll-to-top behavior. |
| frontend/src/components/ProfileCard.jsx | Updates profile card visuals and replaces inline SVGs with unified icons. |
| frontend/src/components/PageHeader.jsx | Adds a reusable page header that integrates with dashboard sidebar menu button. |
| frontend/src/components/Navbar.jsx | Refactors navbar for new theme, a11y improvements, and improved mobile menu behavior. |
| frontend/src/components/MobileTabBar.jsx | Adds a shared sticky mobile tab bar component. |
| frontend/src/components/IconTile.jsx | Introduces unified icon styling primitives (tile + inline). |
| frontend/src/components/DashboardSkeleton.jsx | Adds skeleton loading UI for dashboard. |
| frontend/src/components/DashboardSidebar.jsx | Adds a new responsive dashboard sidebar/drawer with focus management. |
| frontend/src/components/DashboardLayout.jsx | Adds a shared dashboard layout wrapper + data loading context. |
| frontend/src/components/AsyncState.jsx | Adds shared loading/error UI helpers. |
| frontend/src/App.jsx | Reorganizes routes under DashboardLayout and adds ScrollToTop + clipped background orbs. |
| frontend/public/og-image.svg | Updates OG image palette to the new theme. |
| frontend/public/manifest.json | Updates PWA theme/background colors to the new palette. |
| frontend/public/favicon.svg | Updates favicon gradient to the new palette. |
| frontend/index.html | Updates theme meta colors and font includes. |
| backend/scripts/run-tests.mjs | Adds a cross-platform Node test runner script (avoids shell globbing). |
| backend/package.json | Uses the new test runner script for npm test. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| document.documentElement.dataset.routeChanging = 'true' | ||
| window.scrollTo({ top: 0, left: 0, behavior: 'instant' }) |
| @@ -1,4 +1,6 @@ | |||
| import { motion } from 'framer-motion' | |||
| import { Globe, Github, Linkedin, Lightbulb, Twitter, User } from 'lucide-react' | |||
| import { IconTile, InlineIcon, ICON_STROKE } from './IconTile' | |||
| import { parseResume, getCurrentUser } from '../utils/api' | ||
| import { useToast } from '../context/ToastContext' | ||
| import { Check, CheckCircle, Info } from 'lucide-react' | ||
| import { IconTile, InlineIcon, ICON_STROKE } from '../components/IconTile' |
Comment on lines
+1
to
+13
| import { | ||
| Award, | ||
| BookOpen, | ||
| Briefcase, | ||
| Building, | ||
| Calendar, | ||
| ChevronRight, | ||
| ExternalLink, | ||
| Github, | ||
| GraduationCap, | ||
| MapPin, | ||
| Rocket, | ||
| } from 'lucide-react' |
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
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.
Replace the brittle test/**/*.test.js glob (fails on Linux Node 20 CI) with a cross-platform test runner script. Includes dashboard layout, portfolio template redesign, unified theming, and navbar polish.