✨ Update UI for Mobile screen..........!

[pphatdev]

This pull request introduces multiple changes across the codebase, focusing on UI enhancements, code cleanup, and the addition of reusable components. The most significant updates include the restructuring of the homepage layout, improvements to the HomeHeroSection for better responsiveness, removal of the about page, and the addition of several new reusable icon components.

Homepage and Layout Enhancements:

• Updated HomePage layout to include a fixed gradient background and a new Footer component. The gradient now uses hsl(var(--background)) for better theme consistency (src/app/(web)/(home)/page.tsx).
• Improved HomeHeroSection by adjusting styles for better responsiveness, including adding borders, padding, and modifying the z-index of the canvas for better layering (src/app/(web)/(home)/sections/hero-section.tsx). [1] [2] [3] [4] [5]

Removal of about Page:

• Deleted the about page and its associated metadata, schema, and content, streamlining the project by removing unused or redundant code (src/app/(web)/about/page.tsx).

New Reusable Icon Components:

• Added reusable SVG components for CSS3Icon, FacebookIcon, FigmaIcon, GitHubIcon, and HTML5Icon. These components provide consistent styling and can be reused across the application (src/components/icons/css3.tsx, src/components/icons/facebook.tsx, src/components/icons/figma.tsx, src/components/icons/github.tsx, src/components/icons/html5.tsx). [1] [2] [3] [4] [5]

UI and Styling Improvements:

• Enhanced the ProjectsSection by updating error and loading states with new colors and improving the layout for better responsiveness (src/app/(web)/(home)/sections/projects.tsx). [1] [2]
• Updated AboutTimeline to adjust padding, borders, and positioning for a cleaner and more consistent design (src/app/(web)/(home)/sections/timeline.tsx). [1] [2]
• Added a new CSS class .scrollbar-0 to hide scrollbars, improving the visual appearance of certain elements (src/app/globals.css).

Code Cleanup:

• Simplified Profile component logic by refactoring the canvas scaling calculation and improving the layout with additional padding and borders (src/app/(web)/(home)/sections/profile.tsx). [1] [2]

[vercel]

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	Jun 27, 2025 7:52am

[Copilot]

Pull Request Overview

This PR enhances the UI across various screens, adds a new Footer component with social and resource links, introduces reusable SVG icon components, and removes the unused About page.

• Refactored multiple sections (Hero, Projects, Timeline, Profile) for improved responsiveness and styling consistency
• Added a Footer component and reusable icon components for SVG assets
• Cleaned up code by removing the About page and consolidating contact form constants

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/components/ui/project-card.tsx	Tweaked card padding, rounding, and sticky behavior
src/components/ui/message.tsx	Adjusted ripple button size and Mail icon sizing
src/components/ui/footer.tsx	New Footer component with social, resource, and open-source sections
src/components/ui/experience-card.tsx	Added conditional bottom border on small screens
src/components/ui/contact-form.tsx	Enhanced inputs (autofocus, spellCheck, autocomplete), replaced hardcoded email with constant
src/components/tech-stack.tsx	Refactored inline SVGs into dynamic TECH_STACK_DATA mapping
src/components/logo.tsx	Simplified Logo wrapper and commented out unused badge
src/components/icons/*.tsx	Introduced new SVG React components for various tech and social icons
src/app/globals.css	Added .scrollbar-0 utility class
src/app/(web)/about/page.tsx	Removed deprecated About page
src/app/(web)/(home)/sections/timeline.tsx	Updated sticky behavior and small-screen border styling
src/app/(web)/(home)/sections/projects.tsx	Updated loading/error styling, wrapped project cards in fragments
src/app/(web)/(home)/sections/profile.tsx	Refactored canvas scale logic and added padding to canvas
src/app/(web)/(home)/sections/hero-section.tsx	Adjusted canvas layering, added borders/padding on mobile
src/app/(web)/(home)/page.tsx	Integrated fixed background gradient and Footer component

Comments suppressed due to low confidence (2)

src/components/tech-stack.tsx:36

• The class no-visible-scrollbar is not defined and will have no effect. Ensure you reference the correct utility (e.g., scrollbar-0) or add a matching CSS rule.

                <div className="no-visible-scrollbar relative z-20 my-4 flex flex-wrap items-center justify-center gap-4" style={{ scrollbarWidth: "none" }}>

src/app/(web)/(home)/sections/projects.tsx:18

• [nitpick] The fragment wrapper around ProjectCard is unnecessary since ProjectCard can accept the key prop directly. Removing the extra <React.Fragment> simplifies the markup.

                <React.Fragment key={index}>