migrate/v3 by Coderx85 · Pull Request #3 · Coderx85/Portfolio

Coderx85 · 2026-02-17T17:16:33Z

feat: Revamp Navbar with Framer Motion animations and introduce ambient background orbs and ScrambleText component.
feat: Revamp portfolio UI/UX with new components, animations, and content restructuring across pages.
feat: Introduce new ScrambleText,
feat: Enhance resume experience and tech stack, add service and footer components, and refactor project display.
feat: Implement resume PDF generation and dedicated resume pages, refactor service section, and update dependencies.
feat: Add resume PDF viewer and download page, refactor services section, and update dependencies."
feat: Enhance contact page with new UI, introduce resume PDF page, and refactor service section into a component.
feat: Implement PDF resume generation, revamp achievement section with animations, and enhance resume tech stack with icons.
feat: enhance experience section UI with dynamic colors and add profile descriptions.
docs: Add portfolio review notes and refactor the contact page UI with updated styling and new icons.
feat: Add a dedicated experience page and refresh UI/UX for achievement and GitHub stats components with animations and new styling.
feat: Add experience page, refactor social link types, and enhance contact form with new icons and submission handling.
feat: update resume types for experience descriptions and tech stack icons, and refine homepage layout.
feat: Redesign profile picture and achievement sections with new animations and styling, and add a todo file.

…nt background orbs and ScrambleText component.

…tent restructuring across pages.

…r components, and refactor project display.

…actor service section, and update dependencies.

…ion, and update dependencies."

…d refactor service section into a component.

…h animations, and enhance resume tech stack with icons.

…le descriptions.

…h updated styling and new icons.

…nt and GitHub stats components with animations and new styling.

…ntact form with new icons and submission handling.

…icons, and refine homepage layout.

…ations and styling, and add a todo file.

Copilot

Pull request overview

This is a comprehensive v3 migration of the portfolio that introduces major UI/UX enhancements, including Framer Motion animations, PDF resume generation, new reusable components, and significant restructuring of the codebase. The changes modernize the portfolio with glass-morphism effects, ambient background orbs, scrambled text animations, and a completely redesigned experience across all pages.

Changes:

Introduced PDF resume generation with @react-pdf/renderer and dedicated resume viewer/download functionality
Added new animated components including ScrambleText, enhanced navigation with Framer Motion, and ambient background orbs
Restructured experience, services, and resume data with enhanced TypeScript types supporting dates, tech stacks, and dynamic theming
Redesigned all major pages (home, resume, work, contact, service) with glass-morphism effects, improved accessibility, and responsive layouts
Added new utility functions for date formatting, level conversion, and enhanced configuration management

Reviewed changes

Copilot reviewed 35 out of 36 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
src/types/resume.ts	Enhanced type definitions for experience with date ranges, tech stacks, and new PDF component types
src/types/index.ts	Updated social links and navigation types with stricter typing and icon components
src/lib/dayjs.ts	New utility for date formatting and duration calculations
src/lib/convertLevel.ts	New utility to convert skill levels to numeric values for progress bars
src/lib/config.ts	Simplified config import pattern
src/constants/resume.ts	Major restructuring with detailed experience data, comprehensive tech stack categorization, and color theming
src/constants/socialLinks.ts	Enhanced with usernames, colors, and devicon integration
src/constants/services.ts	Complete redesign with icons, descriptions, and color theming for 9 services
src/constants/navLinks.ts	Added new "Experience" navigation link
src/constants/config.ts	Added profile highlights and removed interface in favor of const assertion
src/components/ui/progress.tsx	Enhanced with custom indicator styling support
src/components/ui/input.tsx	Updated placeholder styling
src/components/resume/style.ts	New PDF styling definitions for resume generation
src/components/resume/ResumePDF.tsx	New component for generating PDF resume documents
src/components/animation/ScrambleText.tsx	New animated text component with cycling and scramble effects
src/components/menubar/Navlink.tsx	Updated styling to use theme variables
src/components/Navbar.tsx	Complete redesign with sticky positioning, scroll effects, and mobile menu animations
src/components/Footer.tsx	New comprehensive footer with navigation, social links, and contact info
src/components/ExperienceSection.tsx	New component displaying work experience timeline with animations
src/components/ServiceSection.tsx	New component for displaying services grid with hover effects
src/components/Social.tsx	Redesigned social links with improved styling
src/components/ServiceSection.tsx	Services display component with grid layout and animations
src/app/work/page.tsx	Updated with new animations and gradient styling
src/app/work/_components/ProjectCard.tsx	Enhanced with hover effects, tech badges, and improved layout
src/app/service/page.tsx	Simplified to use ServiceSection component
src/app/resume/page.tsx	Complete rewrite with web/print mode toggle and PDF viewer
src/app/resume/_components/webmodeToggle.tsx	New toggle component for switching between web and print views
src/app/resume/_components/webView.tsx	New web-optimized resume view with profile, skills, and GitHub stats
src/app/resume/_components/printView.tsx	New print view with PDF download and preview
src/app/page.tsx	Complete homepage redesign with hero section, skills preview, and services
src/app/layout.tsx	Added ambient orbs and updated metadata
src/app/contact/page.tsx	Redesigned contact form with improved UX and glass-morphism styling
src/app/experience/page.tsx	New dedicated experience page
src/app/_components/GitHubStats.tsx	Enhanced GitHub contribution calendar with improved styling
src/app/globals.css	Major CSS additions including glass effects, animations, gradients, and custom scrollbar
package.json	Added new dependencies: @devicon/react, @react-pdf/renderer, devicons, use-scramble

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2026-02-17T17:20:57Z

src/app/resume/page.tsx

+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        PDFViewer: pdfRenderer.PDFViewer as any,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        PDFDownloadLink: pdfRenderer.PDFDownloadLink as any,
+        ResumePDF: resumePdf.default,
+      });


The ESLint disable comments for @typescript-eslint/no-explicit-any on lines 24 and 26-27 are used to bypass type checking when importing PDF components. While this is a pragmatic solution for third-party library type compatibility, consider creating proper type definitions or using the library's exported types if available to maintain type safety.

Copilot · 2026-02-17T17:20:57Z

src/app/work/_components/ProjectCard.tsx

-          className="overlay items-center justify-center absolute top-0 left-0 w-full h-full bg-black/55 hidden group-hover:flex group-hover:hover:bg-black/55 transition-all duration-500 hover:cursor-pointer "
-          onClick={() => setIsOpen(true)}
-        ></div>
+          className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent


The inline style uses "bg-linear-to-t" which is not valid CSS. This should be a proper CSS gradient like background: linear-gradient(to top, ...) or use Tailwind classes instead of inline styles.

Suggested change

className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent

className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent

Copilot · 2026-02-17T17:20:57Z

src/constants/resume.ts

+      startDate: new Date("2025-11-01"),
+      endDate: new Date("2026-01-31"),
+      description: [
+        "Contributed 15+ pull requests to open-source repositories, improving documentation and fixing bugs",
+        "Collaborated with a global team of 50+ developers using Git-based workflows and code reviews",
+        "Refactored legacy TypeScript modules, improving type safety and reducing runtime errors by 25%",
+        "Mentored junior contributors on Git best practices, branching strategies, and CI/CD pipelines",
+      ],
+      linkedin: "https://www.linkedin.com/company/websmiths",
+      isCurrent: false,


The "Winter of Code Social 2025" experience has dates that extend into the future. The endDate is "2026-01-31", which is in the past now (current date is February 17, 2026), but the startDate is "2025-11-01". However, the isCurrent flag is set to false even though this should have ended recently. Consider whether this experience period is accurate and whether isCurrent should reflect if it's still ongoing.

Copilot · 2026-02-17T17:20:57Z

src/constants/resume.ts

+        color: "#E34F26",
+      },
+      {
+        title: "Taiwind",


Spelling error: "Taiwind" should be "Tailwind".

Suggested change

title: "Taiwind",

title: "Tailwind",

Copilot · 2026-02-17T17:20:58Z

src/components/ServiceSection.tsx

+            animate={{ opacity: 1 }}
+            transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
+          >
+            Whats I Offer


Grammar error: "Whats I Offer" should be "What I Offer".

Suggested change

Whats I Offer

What I Offer

Copilot · 2026-02-17T17:20:59Z

src/components/animation/ScrambleText.tsx

+  /** Whether to overdrive the scramble effect (boolean or number), default false */
+  overdrive?: boolean | number;
+  /** Character set for scrambling, default "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" */
+  scramble?: number;


The ScrambleText component's scramble prop is documented as accepting a character set string but is typed as number on line 24. This type mismatch will cause runtime errors or confusion. The type should be string if it's meant to be a character set.

Suggested change

scramble?: number;

scramble?: string;

Copilot · 2026-02-17T17:20:59Z

src/components/animation/ScrambleText.tsx

+
+interface ScrambleTextProps extends MotionProps {
+  /** The text to be scrambled and displayed. Can be a string or an array of strings to cycle through. */
+  text: readonly string[];


The text prop is defined as readonly string[] but the comment on line 9 says "Can be a string or an array of strings", suggesting it should accept both. The actual implementation checks Array.isArray(text) on line 51, which will always be true with the current type definition. Either update the type to string | readonly string[] or update the documentation to remove the mention of single strings.

Suggested change

text: readonly string[];

text: string | readonly string[];

Copilot · 2026-02-17T17:20:59Z

src/app/contact/page.tsx

+                name="message"
+                id="message"
+                className="glass border-white/10 rounded-xl min-h-[140px] p-3 text-sm
+                      placeholder:text-white/95


The placeholder text opacity is set to placeholder:text-white/95 which makes it very bright (95% opacity). This is unusual for placeholder text which is typically lower opacity for better UX. Consider using a lower opacity like placeholder:text-white/40 or placeholder:text-white/50 for better visual hierarchy, consistent with the rest of the form.

Suggested change

placeholder:text-white/95

placeholder:text-white/50

Copilot · 2026-02-17T17:21:00Z

src/components/Footer.tsx

+        </div>
+
+        {/* ── Divider ── */}
+        <div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-10" />


There's a CSS class "bg-linear-to-r" on line 52 which is not a valid Tailwind CSS class. The correct class should be "bg-gradient-to-r". This will result in the gradient not rendering as expected.

Suggested change

<div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-10" />

<div className="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-10" />

Copilot · 2026-02-17T17:21:00Z

src/components/Footer.tsx

+        </div>
+
+        {/* ── Bottom Divider ── */}
+        <div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-6" />


There's a CSS class "bg-linear-to-r" on line 161 which is not a valid Tailwind CSS class. The correct class should be "bg-gradient-to-r". This will result in the gradient not rendering as expected.

Suggested change

<div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-6" />

<div className="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-6" />

Coderx85 added 14 commits February 14, 2026 19:20

feat: Revamp Navbar with Framer Motion animations and introduce ambie…

fd499d9

…nt background orbs and ScrambleText component.

feat: Revamp portfolio UI/UX with new components, animations, and con…

a8b1657

…tent restructuring across pages.

feat: Introduce new ScrambleText,

66fa827

feat: Enhance resume experience and tech stack, add service and foote…

bcf86a1

…r components, and refactor project display.

feat: Implement resume PDF generation and dedicated resume pages, ref…

6aa5151

…actor service section, and update dependencies.

feat: Add resume PDF viewer and download page, refactor services sect…

52bb3e2

…ion, and update dependencies."

feat: Enhance contact page with new UI, introduce resume PDF page, an…

3a93d77

…d refactor service section into a component.

feat: Implement PDF resume generation, revamp achievement section wit…

7f2f3b8

…h animations, and enhance resume tech stack with icons.

feat: enhance experience section UI with dynamic colors and add profi…

daa65b3

…le descriptions.

docs: Add portfolio review notes and refactor the contact page UI wit…

3126dcb

…h updated styling and new icons.

feat: Add a dedicated experience page and refresh UI/UX for achieveme…

acf3e6a

…nt and GitHub stats components with animations and new styling.

feat: Add experience page, refactor social link types, and enhance co…

f127308

…ntact form with new icons and submission handling.

feat: update resume types for experience descriptions and tech stack …

6b7a472

…icons, and refine homepage layout.

feat: Redesign profile picture and achievement sections with new anim…

1a21a63

…ations and styling, and add a todo file.

Copilot AI review requested due to automatic review settings February 17, 2026 17:16

vercel bot deployed to Preview February 17, 2026 17:16 View deployment

Copilot started reviewing on behalf of Coderx85 February 17, 2026 17:17 View session

Coderx85 merged commit 842aaab into main Feb 17, 2026
6 of 7 checks passed

Coderx85 deleted the migrate/v3 branch February 17, 2026 17:17

Copilot AI reviewed Feb 17, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

migrate/v3#3

migrate/v3#3
Coderx85 merged 14 commits intomainfrom
migrate/v3

Coderx85 commented Feb 17, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Copilot AI Feb 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent
	className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent

	<div className="w-full h-px bg-linear-to-r from-transparent via-white/10 to-transparent mb-10" />
	<div className="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-10" />

Conversation

Coderx85 commented Feb 17, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants