UI Overhaul: New Pages, Redesigned Components & Assets#10
Merged
digitalnomad91 merged 19 commits intomainfrom Mar 17, 2026
Merged
UI Overhaul: New Pages, Redesigned Components & Assets#10digitalnomad91 merged 19 commits intomainfrom
digitalnomad91 merged 19 commits intomainfrom
Conversation
- Replace loading spinner with poster image overlay that remains visible until video plays - Add useRef for video element and useCallback-based attemptPlay logic - Handle autoplay-blocked browsers with retry and graceful fallback - Add opacity transition for smooth reveal when video starts playing - Add playsInline attribute for mobile compatibility
… add new utility classes - Add display:block to separator and separator-2 pseudo-elements - Add separator-3 with light-colored gradient for dark backgrounds - Add margin-bottom to separator-2/3 containers - Clean up comments and quote style for tailwind import - Add new CSS classes for about page (counters, progress bars, team sections)
- Counter: animated number counter with intersection observer trigger - ProgressBar: animated skill progress bar with percentage display - TeamMember: team member card with photo, bio, skills, and contact links
- PortfolioCard: project card with hover overlay and category display - PortfolioModal: lightbox-style modal for portfolio project details
- Move contact banner from index-specific to layout for reuse across pages - CTA section with gradient background and contact/services links
…improvements - Replace next-nprogress-bar with custom loading bar integrated into header - Add route change detection via usePathname to animate progress - Intercept internal link clicks to trigger loading animation - Add active link highlighting based on current pathname - Add new navigation links (Services, Portfolio, About, Contact)
…emap - Switch from light gray to dark gradient background - Add structured social media links (Facebook, Twitter, LinkedIn, Reddit, etc.) - Add contact info section with email, phone, and address - Add sitemap links column with all main pages - Use Next.js Link for internal navigation
…ed layout - Add icon-based tab navigation (Globe, Mobile, Cubes, etc.) - Add secondary tab system (Flexibility, Customer Support, etc.) - Simplify accordion content to plain strings - Add 'Read More' link to services page - Update styling with Raleway font and improved spacing
- Move ContactSection import from index/ to layout/ in homepage - Update hero slide image from .jpg to .avif in test-router-transition page - Minor JSX formatting cleanup
…pany info - Add team members section with bios, skill bars, and contact links - Add animated stat counters (years experience, projects, team size, revenue) - Add company mission/vision content sections - Import new TeamMember, Counter components and ContactSection - Add video background hero section
- Add Contact page with form and company info - Add Portfolio page with project gallery and filtering - Add Services page with service offerings - Add /api/contact route handler for contact form submissions
- Add portfolio project screenshots (acs2, cdc, pifm, sf_heart, taxcoursecentral, etc.) - Add staff photos (corbin, kevin, larrygoodrie, tom) - Add background videos for portfolio, contact, and services pages - Add video poster/cover images - Optimize macbook-typing-poster.jpg
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| // Basic email validation | ||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ | ||
| if (!emailRegex.test(email)) { |
Check failure
Code scanning / CodeQL
Polynomial regular expression used on uncontrolled data High
Contributor
There was a problem hiding this comment.
Pull request overview
Major UI overhaul for the Next.js app, adding new top-level pages (Services/Portfolio/Contact) and redesigning shared layout/components (Header/Footer/About), plus new UI primitives and static media assets.
Changes:
- Added new pages for Services, Portfolio (with cards + modal), and Contact (with form +
/api/contacthandler). - Redesigned shared layout components (Header loading bar, Footer, Contact CTA banner) and refreshed About page with team + counters + progress bars.
- Updated global styles and introduced/updated static assets (images/videos; hero slide moved to
.avif).
Reviewed changes
Copilot reviewed 19 out of 39 changed files in this pull request and generated 20 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/video-player.tsx | Reworked autoplay behavior with poster fallback + fade-in video overlay. |
| src/components/portfolio/PortfolioModal.tsx | New portfolio detail modal with accordion, ESC/backdrop close, and body scroll locking. |
| src/components/portfolio/PortfolioCard.tsx | New portfolio card component with intersection-observer triggered animations. |
| src/components/layout/header.tsx | Replaced next-nprogress-bar with a custom loading progress line + updated nav links. |
| src/components/layout/footer.tsx | Redesigned footer with social/contact info, sitemap-like links, and payments strip. |
| src/components/layout/contact-banner.tsx | New reusable contact CTA banner component using motion + intersection observer. |
| src/components/index/scrolling-portfolio.tsx | JSX formatting cleanup for index client carousel cards. |
| src/components/index/accordion-tabs.tsx | Redesigned accordion + tabs UI with icon-based navigation and updated copy. |
| src/components/about/TeamMember.tsx | New team member card with animations, skills, and contact link rendering. |
| src/components/about/ProgressBar.tsx | New animated progress bar component triggered on scroll. |
| src/components/about/Counter.tsx | New animated numeric counter triggered on scroll. |
| src/assets/css/globals.css | Styling tweaks + new separators/animations/shadows + hero preload updated to .avif. |
| src/app/test-router-transition/page.tsx | Switched hero image to .avif and formatted TransitionLink usage. |
| src/app/services/page.tsx | New Services page with hero video background, animated service cards, and CTA sections. |
| src/app/portfolio/page.tsx | New Portfolio page with hero video background, card grid, modals, and toast notification. |
| src/app/page.tsx | Updated homepage to import ContactSection from its new layout location. |
| src/app/contact/page.tsx | New Contact page with video hero, form posting to /api/contact, and sidebar w/ map embed. |
| src/app/api/contact/route.ts | New mocked contact API route with basic validation and simulated delay. |
| src/app/about/page.tsx | Rebuilt About page with video hero, team listing, stats counters, and client logo strip. |
| public/images/staff/corbin.jpg | Added staff photo asset used by About page. |
| public/images/portfolio/sf_heart.jpg | Added portfolio image asset used by Portfolio page. |
| public/images/portfolio/logo-ddna.gif | Added portfolio logo asset used by Portfolio page. |
| public/images/portfolio/cdc.png | Added portfolio logo asset used by Portfolio page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+18
to
+34
| useEffect(() => { | ||
| if (inView && !hasAnimated) { | ||
| // Trigger the initial animation with a delay | ||
| const initialAnimationTimeout = setTimeout(() => { | ||
| setHasAnimated(true) | ||
| setShowLargeText(false) // Switch to smaller text | ||
|
|
||
| // Revert back to the larger text after 2 seconds | ||
| const revertTimeout = setTimeout(() => { | ||
| setShowLargeText(true) | ||
| }, 2000) | ||
|
|
||
| return () => clearTimeout(revertTimeout) | ||
| }, 500) | ||
|
|
||
| return () => clearTimeout(initialAnimationTimeout) | ||
| } |
| <div className="absolute inset-0 opacity-90"> | ||
| <VideoPlayer | ||
| mp4Src="/videos/network-technology-services.mp4" | ||
| webmSrc="/videos/network-technology-services.mp4" |
Comment on lines
+428
to
+435
| <iframe | ||
| className="border-0 w-full rounded" | ||
| style={{ height: '300px' }} | ||
| src="//www.google.com/maps/embed/v1/place?q=1211%2022nd%20Ave%20NE%20Minneapolis%20MN&zoom=17&key=AIzaSyCdnSPXfE71_GBBjj1lZYzmkohP_E9Ivm8" | ||
| allowFullScreen | ||
| loading="lazy" | ||
| referrerPolicy="no-referrer-when-downgrade" | ||
| title="CodeBuilder, Inc. Office Location" |
Comment on lines
+4
to
+22
| import Link from 'next/link' | ||
| import ProgressBar from './ProgressBar' | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import { faEnvelope, faPhone, faDiamond, faUsers, faMoneyBill, faCode } from '@fortawesome/free-solid-svg-icons' | ||
| import { faGithub, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons' | ||
| import { useEffect, useRef, useState } from 'react' | ||
| import 'animate.css' | ||
|
|
||
| interface Skill { | ||
| label: string | ||
| percentage: number | ||
| } | ||
|
|
||
| interface ContactLink { | ||
| icon: string | ||
| label: string | ||
| href: string | ||
| iconPack?: 'solid' | 'brands' | ||
| } |
Comment on lines
+26
to
+31
| console.log('[Contact Form] New submission:', { | ||
| name, | ||
| email, | ||
| subject, | ||
| message: message.substring(0, 100) + (message.length > 100 ? '...' : ''), | ||
| timestamp: new Date().toISOString(), |
| <div ref={ref} className="mb-3"> | ||
| <div className="relative h-7 bg-[#e0e0e0] rounded-sm overflow-hidden"> | ||
| <div | ||
| className="h-full rounded-r-sm transition-all duration-800 ease-out flex items-center" |
Comment on lines
+106
to
+120
| {[ | ||
| { label: 'Technology', href: '/technology' }, | ||
| { label: 'Sitemap', href: '/sitemap' }, | ||
| { label: 'Privacy Policy', href: '/privacy-policy' }, | ||
| { label: 'Contact Us', href: '/contact' }, | ||
| ].map((link) => ( | ||
| <li key={link.label}> | ||
| <Link | ||
| href={link.href} | ||
| className="text-[#ccc] hover:text-[#09afdf] font-normal block pb-2 text-sm transition-colors" | ||
| > | ||
| {link.label} | ||
| </Link> | ||
| </li> | ||
| ))} |
Comment on lines
+42
to
+51
| useEffect(() => { | ||
| if (isOpen) { | ||
| document.body.style.overflow = 'hidden' | ||
| setOpenAccordion(null) | ||
| } else { | ||
| document.body.style.overflow = '' | ||
| } | ||
| return () => { | ||
| document.body.style.overflow = '' | ||
| } |
Comment on lines
+108
to
+120
| {link ? ( | ||
| <> | ||
| {description.split(link.label)[0]} | ||
| <a | ||
| href={link.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-[#09afdf] hover:underline" | ||
| > | ||
| {link.label} | ||
| </a> | ||
| {description.split(link.label)[1]} | ||
| </> |
- Trigger workflow on all branches and PRs (not just main) - Deploy main to root, other branches to preview/<branch>/ subdirectory - Auto-comment preview URL on PRs - Add cleanup workflow to remove previews when PRs close - Add dynamic basePath/assetPrefix support via NEXT_BASE_PATH env var - Switch from deploy-pages API to peaceiris/actions-gh-pages for multi-preview support
| - name: 📤 Upload static site | ||
| uses: actions/upload-pages-artifact@v3 | ||
| - name: 🚀 Deploy to GitHub Pages | ||
| uses: peaceiris/actions-gh-pages@v4 |
Check warning
Code scanning / CodeQL
Unpinned tag for a non-immutable Action in workflow Medium
Contributor
|
🚀 Preview deployment ready! 📎 Preview URL: https://dev.codebuilder.org/preview/feature-ui-overhaul-and-new-pages/ Deployed from commit |
Custom domain (dev.codebuilder.org) doesn't include the repo name in the URL path, so basePath should be /preview/<branch> not /codebuilder-frontend/preview/<branch>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
digitalnomad91
temporarily deployed
to
github-pages
- Add cname: dev.codebuilder.org to peaceiris/actions-gh-pages action - Ensures CNAME file persists across deployments to gh-pages branch
- Change main deploy to keep_files=true so preview/ is not wiped - Add cleanup step that removes stale root files while preserving preview/ - Fixes 404 on preview URLs after main branch deploys
Member
Author
|
@copilot open a new pull request to apply changes based on the comments in this thread |
Contributor
|
@digitalnomad91 I've opened a new pull request, #11, to work on those changes. Once the pull request is ready, I'll request review from you. |
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.
Summary
Major UI overhaul introducing new pages (Contact, Portfolio, Services), redesigned existing components, and added static assets.
Changes
New Pages
/api/contactroute handlerNew Components
Counter— animated number counter with intersection observerProgressBar— animated skill progress bar with percentage displayTeamMember— team member card with photo, bio, skills, and contact linksPortfolioCard— project card with hover overlay and category displayPortfolioModal— lightbox-style modal for portfolio project detailsContactSection— shared CTA banner (moved from index to layout for reuse)Redesigned Components
About Page
Styles
Assets
Fixes