Skip to content

Implement mobile responsiveness for Hero, Experience, and Service sections #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Coderx85 wants to merge 3 commits into
base: v3/migrate
Choose a base branch
from
Open

Implement mobile responsiveness for Hero, Experience, and Service sections #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b64720d
Implement mobile responsiveness for Hero, Experience, and Service sec…
google-labs-jules[bot] Feb 26, 2026
f11a1f2
Delete .last-run.json
Coderx85 Feb 26, 2026
35385f1
Delete npm_output.log
Coderx85 Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,614 changes: 11,614 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"motion": "^12.33.0",
"next": "16.1.6",
"next-themes": "^0.4.6",
"playwright": "^1.58.2",
Copy link

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Playwright is a testing framework and should be listed in devDependencies rather than dependencies. Testing tools should not be bundled with production code. Move this entry to the devDependencies section of package.json.

Copilot uses AI. Check for mistakes.
"postcss": "^8.5.6",
"prettier": "^3.8.1",
"react": "^19.2.4",
Expand Down
1 change: 1 addition & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@theme {
--breakpoint-*: initial;
--breakpoint-xs: 475px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 960px;
Expand Down
10 changes: 5 additions & 5 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const HeroSection = () => {
<>
<motion.section
initial={{ opacity: 0 }}
className="xs:px-7 px-20"
className="px-6 sm:px-12 md:px-16 lg:px-20"
animate={{
opacity: 1,
transition: { delay: 2.4, duration: 0.5, ease: "easeIn" },
Expand All @@ -44,7 +44,7 @@ const HeroSection = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
className="mx-auto mt-32 pb-12 text-left order-2 xl:order-0 py-0 h-full min-h-[400px] flex flex-col gap-3"
className="mx-auto mt-20 sm:mt-24 md:mt-32 pb-12 text-left order-2 xl:order-0 py-0 h-full min-h-[400px] flex flex-col gap-3"
>
<motion.div
initial={{ opacity: 0, y: 20 }}
Expand All @@ -61,7 +61,7 @@ const HeroSection = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 2.7, duration: 0.6 }}
className="text-white text-4xl xl:text-5xl py-2 font-bold leading-[1.4]"
className="text-white text-3xl sm:text-4xl xl:text-5xl py-2 font-bold leading-[1.4]"
>
<p className="py-1 ">{"I'm a "}</p>
<ScrambleText
Expand All @@ -78,7 +78,7 @@ const HeroSection = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 2.9, duration: 0.5 }}
className="max-w-[520px] md:mx-0 mx-auto text-white/60 text-base leading-relaxed"
className="max-w-[520px] md:mx-0 mx-auto xl:mx-0 text-white/60 text-sm sm:text-base leading-relaxed"
>
{description}
</motion.p>
Expand All @@ -87,7 +87,7 @@ const HeroSection = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 3.1, duration: 0.5 }}
className="flex w-full mt-5 xl:w-fit gap-4 justify-between items-center"
className="flex flex-col sm:flex-row w-full mt-5 xl:w-fit gap-4 justify-between items-center"
>
<Link
href="/Resume.pdf"
Expand Down
2 changes: 1 addition & 1 deletion src/app/service/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ServicePage = () => {
>
<div className='w-full justify-between items-center flex'>
<div className='text-5xl font-extrabold text-outline text-transparent group-hover:text-outline-hover transition-all duration-500'>
{service.num}
{index + 1 < 10 ? `0${index + 1}` : index + 1}
</div>
<Link
href={service.title}
Expand Down
16 changes: 8 additions & 8 deletions src/components/ExperienceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ const calcDuration = (start: Date, end: Date) => {

const ExperienceSection = () => {
return (
<div className="mx-auto h-full mt-40 flex flex-col gap-7">
<div className="mx-auto h-full mt-20 sm:mt-24 md:mt-32 lg:mt-40 flex flex-col gap-7">
{/* Section Header */}
<div className="flex gap-3 flex-col text-accent">
<motion.h3
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="flex gap-3 text-accent text-3xl"
className="flex gap-3 text-accent text-2xl sm:text-3xl"
>
<HiBriefcase className="fill-accent" />
Work Experience
Expand All @@ -75,7 +75,7 @@ const ExperienceSection = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
className="text-white"
className="text-white text-3xl sm:text-4xl"
>
Where I&apos;ve Worked
</motion.h2>
Expand Down Expand Up @@ -109,7 +109,7 @@ const ExperienceSection = () => {
delay: index * 0.15,
ease: "easeOut",
}}
className="relative pl-10"
className="relative pl-8 sm:pl-10"
>
{/* Timeline Dot */}
<div className="absolute left-0 top-5 z-10">
Expand All @@ -123,13 +123,13 @@ const ExperienceSection = () => {
</div>

{/* Card */}
<div className="glass-card glass-card-hover px-6 py-5 sm:px-8 sm:py-6 group cursor-default bg-zinc-600/10 hover:bg-zinc-600/20">
<div className="glass-card glass-card-hover px-5 py-4 sm:px-8 sm:py-6 group cursor-default bg-zinc-600/10 hover:bg-zinc-600/20">
{/* Top Row: Title + Badge + Date */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-4">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-1 lg:gap-4">
<h3 className="text-white font-semibold text-lg sm:text-xl">
{exp.title}
</h3>
<div className="flex items-center gap-2.5 shrink-0">
<div className="flex flex-wrap items-center gap-2.5 shrink-0 mt-1 lg:mt-0">
{/* Timeline Badge + date range */}

{exp.isCurrent && (
Expand All @@ -144,7 +144,7 @@ const ExperienceSection = () => {
</div>

{/* Company + Duration pill */}
<div className="flex items-center gap-3 mt-1">
<div className="flex flex-wrap items-center gap-3 mt-2">
{exp.linkedin ? (
<Link
href={exp.linkedin}
Expand Down
12 changes: 6 additions & 6 deletions src/components/ServiceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { services } from "@/constants";
export default function ServiceSection() {
return (
<motion.div
className="mx-auto h-full mt-40 flex flex-col gap-7"
className="mx-auto h-full mt-20 sm:mt-24 md:mt-32 lg:mt-40 flex flex-col gap-7"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
>
<div className="flex gap-3 flex-col text-accent">
<motion.h3
className="flex gap-3 text-accent text-3xl"
className="flex gap-3 text-accent text-2xl sm:text-3xl"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
Expand All @@ -21,18 +21,18 @@ export default function ServiceSection() {
Services
</motion.h3>
<motion.h2
className="text-white"
className="text-white text-3xl sm:text-4xl"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 2.4, duration: 0.5, ease: "easeIn" }}
>
Whats I Offer
</motion.h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-10 gap-7">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 sm:pt-10 gap-5 sm:gap-7">
{services.map((service, index) => (
<div key={index + service.title} className="flex flex-col gap-3 py-5">
<motion.h3 className="flex gap-4 text-white">
<div key={index + service.title} className="flex flex-col gap-3 py-3 sm:py-5">
<motion.h3 className="flex gap-4 text-white font-semibold">
<service.icon className="fill-accent" />
{service.title}
</motion.h3>
Expand Down
51 changes: 33 additions & 18 deletions src/constants/resume.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,22 @@ import {
SiVercel,
SiVite,
SiVitest,
SiRedis,
SiRabbitmq,
SiApache,
SiNginx,
SiUbuntu,
SiJest,
SiHtml5,
SiReact,
SiTailwindcss,
SiVuedotjs,
SiNodedotjs,
SiGo,
SiJavascript,
SiPython,
SiGnubash,
SiJenkins,
} from "react-icons/si";
import {
FaCss3,
Expand Down Expand Up @@ -379,53 +395,62 @@ export const skillsData: SkillProps = {
// ─── Color scheme for tech category cards ───
export const categoryColors: Record<
TCategory,
{ text: string; border: string; bg: string }
{ text: string; border: string; bg: string; fill: string }
> = {
Frontend: {
text: "text-cyan-400",
border: "border-cyan-400/30",
bg: "bg-cyan-400/5",
fill: "fill-cyan-400",
},
Backend: {
text: "text-emerald-400",
border: "border-emerald-400/30",
bg: "bg-emerald-400/5",
fill: "fill-emerald-400",
},
Languages: {
text: "text-amber-400",
border: "border-amber-400/30",
bg: "bg-amber-400/5",
fill: "fill-amber-400",
},
Database: {
text: "text-violet-400",
border: "border-violet-400/30",
bg: "bg-violet-400/5",
fill: "fill-violet-400",
},
"DevOps & Cloud": {
text: "text-sky-400",
border: "border-sky-400/30",
bg: "bg-sky-400/5",
fill: "fill-sky-400",
},
Monitoring: {
text: "text-orange-400",
border: "border-orange-400/30",
bg: "bg-orange-400/5",
fill: "fill-orange-400",
},
Infrastructure: {
text: "text-rose-400",
border: "border-rose-400/30",
bg: "bg-rose-400/5",
fill: "fill-rose-400",
},
Frameworks: {
text: "text-fuchsia-400",
border: "border-fuchsia-400/30",
bg: "bg-fuchsia-400/5",
fill: "fill-fuchsia-400",
},
};

export const tech: readonly TTechStack[] = [
{
title: "Frontend",
icon: SiReact,
techStack: [
{
title: "React",
Expand Down Expand Up @@ -455,6 +480,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Backend",
icon: SiNodedotjs,
techStack: [
{
title: "Node JS",
Expand Down Expand Up @@ -484,6 +510,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Languages",
icon: SiJavascript,
techStack: [
{
title: "Javascript",
Expand Down Expand Up @@ -513,6 +540,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Database",
icon: SiPostgresql,
techStack: [
{
title: "PostgreSQL",
Expand Down Expand Up @@ -542,6 +570,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "DevOps & Cloud",
icon: SiDocker,
techStack: [
{
title: "Docker",
Expand Down Expand Up @@ -571,6 +600,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Infrastructure",
icon: SiNginx,
techStack: [
{
title: "Nginx",
Expand All @@ -594,6 +624,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Monitoring",
icon: SiGrafana,
techStack: [
{
title: "Grafana",
Expand All @@ -617,6 +648,7 @@ export const tech: readonly TTechStack[] = [
},
{
title: "Frameworks",
icon: SiNextdotjs,
techStack: [
{
title: "Fastify",
Expand Down Expand Up @@ -669,20 +701,3 @@ export const tech: readonly TTechStack[] = [
],
},
];

/**
*
* techStack: {
title: string;
icon: IconType;
level: LEVEL;
}[];
*

const tech[] = [
{
title:
}
]

*/
1 change: 1 addition & 0 deletions src/types/resume.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export type TCategory =

export type TTechStack = {
title: TCategory;
icon: IconType;
techStack: readonly TTech[];
};

Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const config = {
theme: {
// Container utility is now customized via @utility in CSS (see globals.css)
screens: {
xs: "475px",
sm: "640px",
md: "768px",
lg: "960px",
Expand Down