Update Contacting Bar #13

pphatdev · 2025-07-06T05:31:59Z

This pull request introduces several updates across multiple files to enhance the functionality, UI components, and styling of the application. Key changes include the addition of a ContactBar component, updates to the Profile and HeroSection components, and improvements to the visual design of the Projects and Timeline sections.

New Features:

ContactBar Component: Added a new ContactBar component with animated social media links using framer-motion. This component is integrated into both the HomePage and HeroSection for improved user engagement. ([[1]](https://github.com/pphatdev/v4/pull/13/files#diff-8756cbeb171ec70247450e2042f78bd85630b08c85dca65bd3048ec23b55f258R1-R34), [[2]](https://github.com/pphatdev/v4/pull/13/files#diff-f278d2f21412bba29fcf364c46a0267e7d51600623310da46ccbb0032771b71bR8), [[3]](https://github.com/pphatdev/v4/pull/13/files#diff-9d4e09311e0b760dec26b03d1a9ec565427f8eb6b6afc543840cb839ac99b1adL3-R8), [[4]](https://github.com/pphatdev/v4/pull/13/files#diff-9d4e09311e0b760dec26b03d1a9ec565427f8eb6b6afc543840cb839ac99b1adR446))

UI Enhancements:

Profile Component: Replaced the canvas-based profile image rendering with a next/image implementation for better performance and maintainability. Removed unused code related to image processing. ([[1]](https://github.com/pphatdev/v4/pull/13/files#diff-42a6dad92380de6d543f6d077f04608c70e282e86c115b256c49591c7c845dadL3-R39), [[2]](https://github.com/pphatdev/v4/pull/13/files#diff-42a6dad92380de6d543f6d077f04608c70e282e86c115b256c49591c7c845dadL51-R54))
HeroSection Updates: Removed the MagneticArea wrapper around the Profile component and replaced it with a simpler div structure. ([src/app/(web)/(home)/sections/hero-section.tsxL539-R540](https://github.com/pphatdev/v4/pull/13/files#diff-9d4e09311e0b760dec26b03d1a9ec565427f8eb6b6afc543840cb839ac99b1adL539-R540))

Visual Design Improvements:

Projects Section: Introduced a new Badge component to highlight the "Projects" header. Adjusted the background styling for better contrast. ([[1]](https://github.com/pphatdev/v4/pull/13/files#diff-ecb292bec73f0ba93c1510eaa9ad6e41bb0a4d99b9141a7b6b230433c31bb21dR7-R13), [[2]](https://github.com/pphatdev/v4/pull/13/files#diff-ecb292bec73f0ba93c1510eaa9ad6e41bb0a4d99b9141a7b6b230433c31bb21dL39-R40), [[3]](https://github.com/pphatdev/v4/pull/13/files#diff-ecb292bec73f0ba93c1510eaa9ad6e41bb0a4d99b9141a7b6b230433c31bb21dR50))
Timeline Section: Added a Badge component to emphasize the "Experience" header. ([[1]](https://github.com/pphatdev/v4/pull/13/files#diff-dd1a7a90aa9ea4ffb1cc1b752caa48b6c26c5105526b3d1d29b69ece0537dd26R10), [[2]](https://github.com/pphatdev/v4/pull/13/files#diff-dd1a7a90aa9ea4ffb1cc1b752caa48b6c26c5105526b3d1d29b69ece0537dd26R120-R121))
Global Styling: Updated CSS variables for background and card colors to refine the dark mode appearance. ([src/app/globals.cssL159-R162](https://github.com/pphatdev/v4/pull/13/files#diff-4f206759c961f544a48464ad2ee231adc87e72593d03a0004b68c17771f7a412L159-R162))

Minor Updates:

AvatarCircles Component: Added the sizes attribute to optimize image loading for avatars. ([src/components/ui/avatar-circles.tsxR39](https://github.com/pphatdev/v4/pull/13/files#diff-e55d746d7d147bf3cb66353cdd4103a2f36e26ee8bf5fd69cc384085174dbe59R39))
ProjectCard Component: Changed the background styling from background to card for consistency across components. ([src/components/ui/project-card.tsxL22-R22](https://github.com/pphatdev/v4/pull/13/files#diff-fa754b3293b55eb0ed415990920199aa5e9e503159185245e07fd0a4ab676243L22-R22))

… enhance layout with badges in Projects and AboutTimeline sections

… sizes attribute to Avatar image in AvatarCircles component, and change background class in ProjectCard component

… for improved navigation

vercel · 2025-07-06T05:32:04Z

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

Name	Status	Preview	Comments	Updated (UTC)
v4	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 6, 2025 5:32am

Copilot

Pull Request Overview

This PR adds a new social ContactBar, refactors image rendering, and enhances UI consistency with badge components and updated styling variables.

Introduce ContactBar component with animated social links and integrate into hero section
Replace canvas-based profile rendering with next/image and clean up related code
Add Badge elements to Projects and Experience headers; update background/card styles and fix minor typos

Reviewed Changes

Copilot reviewed 10 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/ui/project-card.tsx	Updated card background class from `bg-background` to `bg-card`
src/components/ui/avatar-circles.tsx	Added `sizes` attribute to optimize avatar image loading
src/app/globals.css	Adjusted dark mode `--background` and `--card` CSS variables
src/app/(web)/(home)/sections/timeline.tsx	Inserted `Badge` component for Experience header
src/app/(web)/(home)/sections/projects.tsx	Fixed `stick` → `sticky` typo and added `Badge` for Projects header
src/app/(web)/(home)/sections/profile.tsx	Replaced custom canvas code with `next/image` for profile images
src/app/(web)/(home)/sections/hero-section.tsx	Integrated `ContactBar` and simplified `Profile` wrapper
src/app/(web)/(home)/sections/contact-bar.tsx	Added new `ContactBar` component with animated social links
src/app/(web)/(home)/page.tsx	Imported `ContactBar` into HomePage (unused import)
next.config.ts	Extended image `remotePatterns` to include `localhost:3001`

Comments suppressed due to low confidence (1)

src/app/(web)/(home)/page.tsx:8

The ContactBar import is unused in this file; remove it to clean up unused dependencies.

import { ContactBar } from './sections/contact-bar';

Copilot · 2025-07-06T05:33:22Z

src/app/(web)/(home)/sections/contact-bar.tsx

+                    <Link href="https://github.com/pphatdev" target='_blank'> <GitHubIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>
+                </li>
+                <li>
+                    <Link href="https://t.me/SophatLEAT" target='_blank'> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>


The Telegram link is using the FigmaIcon; import and use a TelegramIcon component instead to correctly represent the platform.

Suggested change

<Link href="https://t.me/SophatLEAT" target='_blank'> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>

<Link href="https://t.me/SophatLEAT" target='_blank'> <TelegramIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>

Copilot · 2025-07-06T05:33:22Z

src/app/(web)/(home)/sections/contact-bar.tsx

+                    <Link href="https://fb.me/chat.leatsophat" target='_blank'> <FacebookIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>
+                </li>
+                <li>
+                    <Link href="https://github.com/pphatdev" target='_blank'> <GitHubIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>
+                </li>
+                <li>
+                    <Link href="https://t.me/SophatLEAT" target='_blank'> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>


External links opened with target="_blank" should include rel="noopener noreferrer" to prevent reverse tabnabbing vulnerabilities.

Suggested change

<Link href="https://fb.me/chat.leatsophat" target='_blank'> <FacebookIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>

</li>

<li>

<Link href="https://github.com/pphatdev" target='_blank'> <GitHubIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>

</li>

<li>

<Link href="https://t.me/SophatLEAT" target='_blank'> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>

<Link href="https://fb.me/chat.leatsophat" target='_blank' rel="noopener noreferrer"> <FacebookIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>

</li>

<li>

<Link href="https://github.com/pphatdev" target='_blank' rel="noopener noreferrer"> <GitHubIcon className='size-6 text-foreground/50 hover:text-foreground' /> </Link>

</li>

<li>

<Link href="https://t.me/SophatLEAT" target='_blank' rel="noopener noreferrer"> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>

Copilot · 2025-07-06T05:33:22Z

src/app/(web)/(home)/sections/profile.tsx

+    // const loadImage = (src: string): Promise<HTMLImageElement> => new Promise<HTMLImageElement>(resolve => {
+    //     const img = new Image();
+    //     img.onload = () => resolve(img);
+    //     img.src = src;
+    // });

-    const renderCanvas = useCallback((canvas: HTMLCanvasElement | null): void => {
-        if (!canvas) return;
+    // const renderCanvas = useCallback((canvas: HTMLCanvasElement | null): void => {
+    //     if (!canvas) return;

-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+    //     const ctx = canvas.getContext('2d');
+    //     if (!ctx) return;

-        canvas.width = 500;
-        canvas.height = 500;
+    //     canvas.width = 500;
+    //     canvas.height = 500;

-        Promise.all([
-            loadImage('/assets/gallery/WEBP/IMG_1915.webp'),
-            loadImage('/assets/masks/mask.webp')
-        ]).then(([img, mask]) => {
-            const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
-            const x = (canvas.width - img.width * scale) / 2;
-            const y = (canvas.height - img.height * scale) / 2;
+    //     Promise.all([
+    //         loadImage('/assets/avatars/profile.JPG'),
+    //         // loadImage('/assets/gallery/WEBP/IMG_1915.webp'),
+    //         loadImage('/assets/masks/mask.webp')
+    //     ]).then(([img, mask]) => {
+    //         const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
+    //         const x = (canvas.width - img.width * scale) / 2;
+    //         const y = (canvas.height - img.height * scale) / 2;

-            // Draw image with object-cover behavior
-            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
+    //         // Draw image with object-cover behavior
+    //         ctx.drawImage(img, x, y, img.width * scale, img.height * scale);

-            // Apply mask
-            ctx.globalCompositeOperation = 'destination-in';
-            ctx.drawImage(mask, 0, 0, 500, 500);
-        });
-    }, []);
+    //         // Apply mask
+    //         ctx.globalCompositeOperation = 'destination-in';
+    //         ctx.drawImage(mask, 0, 0, 500, 500);
+    //     });
+    // }, []);



[nitpick] Consider removing the large block of commented-out canvas rendering code to improve readability and maintainability.

pphatdev added 5 commits July 6, 2025 12:20

✨ feat: add profile avatar images in JPG and WEBP formats

5dcdc20

✨ feat: add ContactBar component with social media icons and animations

6d1bd99

✨ feat: integrate ContactBar component into HomePage and HeroSection,…

ad10111

… enhance layout with badges in Projects and AboutTimeline sections

✨ feat: update next.config.ts to include localhost configuration, add…

f7fe70b

… sizes attribute to Avatar image in AvatarCircles component, and change background class in ProjectCard component

✨ feat: replace anchor tags with Next.js Link component in ContactBar…

1d82081

… for improved navigation

pphatdev requested a review from Copilot July 6, 2025 05:31

pphatdev self-assigned this Jul 6, 2025

pphatdev added the enhancement New feature or request label Jul 6, 2025

pphatdev merged commit 2a3837a into master Jul 6, 2025
3 checks passed

Copilot AI reviewed Jul 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Update Contacting Bar #13

Update Contacting Bar #13

Uh oh!

pphatdev commented Jul 6, 2025

Uh oh!

vercel bot commented Jul 6, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 6, 2025

Uh oh!

Copilot AI Jul 6, 2025

Uh oh!

Copilot AI Jul 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<Link href="https://t.me/SophatLEAT" target='_blank'> <FigmaIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>
	<Link href="https://t.me/SophatLEAT" target='_blank'> <TelegramIcon className='stroke-1 size-6 text-foreground/50 hover:text-foreground' /> </Link>

Uh oh!

Update Contacting Bar #13

Update Contacting Bar #13

Uh oh!

Conversation

pphatdev commented Jul 6, 2025

New Features:

UI Enhancements:

Visual Design Improvements:

Minor Updates:

Uh oh!

vercel bot commented Jul 6, 2025

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 Jul 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 6, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant