Skip to content

Redesign portfolio with clean, minimal layout to reduce visual clutter #2

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
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Redesign portfolio with clean, minimal layout to reduce visual clutter #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ec172b3
Initial plan
Copilot Aug 21, 2025
a404e67
Initial analysis and setup for portfolio redesign
Copilot Aug 21, 2025
2df45ea
Complete portfolio redesign with clean, minimal layout
Copilot Aug 21, 2025
f1b260d
Fix component errors and finalize clean portfolio design
Copilot Aug 21, 2025
f5b6cbc
Fix Clerk authentication context by restoring ClerkProvider
Copilot Aug 21, 2025
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
181 changes: 90 additions & 91 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {

export default function Page() {
return (
<div className="container px-4 mb-12 mt-2 md:mt-4 space-y-4 min-h-screen">
<Breadcrumb>
<div className="container px-4 mb-16 mt-8 md:mt-12 max-w-4xl mx-auto">
<Breadcrumb className="mb-8">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
Expand All @@ -23,96 +23,95 @@ export default function Page() {
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="space-y-4">

<div className="space-y-12">
<section>
<h1 className="text-3xl md:text-4xl font-light text-gray-900 dark:text-gray-100 mb-8">
About Me
</h1>
<div className="prose prose-lg max-w-none text-gray-700 dark:text-gray-300 space-y-6">
<p className="text-xl leading-relaxed">
Hi there! I'm Ashish Agarwal, a 13-year-old self-taught web developer from Aligarh, India.
I've been passionate about coding since I was 8 years old and love building innovative web applications.
</p>
<p>
Over the years, my work has gained recognition across various media outlets.
I've been featured in magazines, articles, and news channels, earning the title
"Computer Boy of Aligarh" for my dedication and achievements in technology.
</p>
</div>
</section>

<Skills />
<p className="text-lg">
Hi there! 👋 I'm Ashish Agarwal, a 13-year-old self-taught and
accomplished web developer from Aligarh, India. Currently a class 8th
student, I’ve been passionate about coding since I was just 8 years
old. I love building innovative web applications and crafting
beautiful designs, bringing my ideas to life through code. 💻
</p>
<p className="text-lg">
Over the years, my work and skills have been recognized widely. I've
been interviewed and featured in various magazines, articles, and news
channels thanks to my dedication and the unwavering support of my
parents. The media has even dubbed me the "computer boy of Aligarh."
You can search for my interviews on Google to learn more about my
journey! 🚀{" "}
<ActionLink
className="inline-flex justify-start mt-0"
label="Interviews"
href="/interviews"
/>
</p>
<p className="text-lg">
I’ve explored and mastered a range of technologies, from JavaScript,
TypeScript, and Python to frameworks and tools like React, Next.js,
TailwindCSS, Framer Motion, Supabase, and Firebase. I’ve also earned 4
professional certifications on Coursera to further solidify my
expertise. I’m passionate about building pixel-perfect, responsive,
and dynamic web designs that deliver an exceptional user experience.
🎨
</p>
<p className="text-lg">
List of professional certificates I've completed by 2025:
</p>
<Certifications />
<p className="text-lg">
Even after that, I've done an internship at Safar as an Operations
Intern (3-months internship) and currently working as a MERN Developer Intern at The Entrepreneurship Network which is a 6-months internship. I've also
built websites for several projects and clients, including a website I
built for the Goverment College my sister studies in. 🌐{" "}
<ActionLink
className="inline-flex justify-start mt-0"
label="Work"
href="/work"
/>
</p>
<p className="text-lg">
I've also contributed to some large projects which involve a large
scale of community. Supercord, a verified discord bot with over 75+
guilds installed and 15k+ users. ClickCrystals, a minecraft mod with
over 150k+ downloads and 4k+ discord community. I've also contributed
to many more projects on contractual basis as well. ️‍🔥{" "}
<ActionLink
className="inline-flex justify-start mt-0"
label="Projects"
href="/work"
/>
</p>
<p className="text-lg">
Last but not least, I've also authored a total of 9 books related to
programming! All of them are available for purchase on Google Play
Books, go ahead and buy them now! 📚
</p>
<p className="text-lg">
So far, this is an incredible list of achievements for a 13-year old
kid like me. I'm proud of myself and my parents are proud of me too.
I'm looking forward to learning more and building more amazing
projects in the future. 🚀
</p>
<p className="text-lg">
If you appreciate my work and accomplishments, I just wish you to
write your review and sign on my guestbook about me or my website. I
would love to hear from you! ❤️{" "}
<ActionLink
className="inline-flex justify-start mt-0"
label="Sign on Guestbook"
href="/sign"
/>
</p>
<p className="text-lg">
This is still not the end. I'm still learning and actively applying
for new jobs, internships and contracts. If you have any opportunity
for me, please let me know. I'm always ready to learn and work. 🤝{" "}
<ActionLink
className="inline-flex justify-start mt-0"
label="Contact me"
href="/contact"
/>
</p>

<section>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-6">
Professional Experience
</h2>
<div className="space-y-4 text-gray-700 dark:text-gray-300">
<p>
I've completed an internship at Safar as an Operations Intern and am currently
working as a MERN Developer Intern at The Entrepreneurship Network.
</p>
<p>
I've contributed to large-scale community projects including Supercord
(a Discord bot with 75+ guilds and 15k+ users) and ClickCrystals
(a Minecraft mod with 150k+ downloads and 4k+ community members).
</p>
</div>
</section>

<section>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-6">
Certifications
</h2>
<p className="text-gray-700 dark:text-gray-300 mb-6">
I've earned professional certifications to solidify my expertise:
</p>
<Certifications />
</section>

<section>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-6">
Published Works
</h2>
<p className="text-gray-700 dark:text-gray-300">
I've authored 9 books on programming, all available on Google Play Books.
</p>
</section>

<section className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-8 border border-gray-200 dark:border-gray-800">
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-4">
Let's Connect
</h2>
<p className="text-gray-700 dark:text-gray-300 mb-6">
I'm always learning and looking for new opportunities.
Feel free to reach out if you'd like to collaborate or just say hello!
</p>
<div className="flex flex-wrap gap-3">
<ActionLink
href="/work"
label="View My Work"
className="text-theme hover:underline"
/>
<ActionLink
href="/highlights"
label="Media Features"
className="text-theme hover:underline"
/>
<ActionLink
href="/sign"
label="Sign Guestbook"
className="text-theme hover:underline"
/>
<ActionLink
href="/contact"
label="Contact Me"
className="text-theme hover:underline"
/>
</div>
</section>
</div>
</div>
);
}
}
117 changes: 64 additions & 53 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,79 +15,90 @@ const currentRole = experiences.slice(0, 1);

export default async function Page() {
return (
<div className="container px-4 mb-12 mt-2 md:mt-4 space-y-12 min-h-screen">
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="container px-4 mb-16 mt-8 md:mt-12 max-w-4xl mx-auto">
{/* Hero Section */}
<section className="space-y-8 mb-20">
<div className="flex items-start space-x-6">
<Image
src={avatarImage}
alt="Avatar"
priority
className="size-16 rounded-full ring ring-theme"
className="size-20 rounded-full ring-2 ring-gray-200 dark:ring-gray-700"
/>
<div className="font-serif">
<div className="text-2xl font-medium">Ashish Agarwal</div>
<div className="flex-1">
<h1 className="text-3xl md:text-4xl font-light text-gray-900 dark:text-gray-100 mb-2">
Ashish Agarwal
</h1>
<Link
href="https://github.com/devashish2024"
target="_blank"
className="text-xl text-gray-500 hover:text-theme"
className="text-lg text-gray-600 dark:text-gray-400 hover:text-theme transition-colors"
>
@devashish2024
</Link>
<p className="text-lg text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
Passionate software engineer building innovative web applications.
Known as the "Computer Boy of Aligarh" and featured across media outlets.
</p>
</div>
</div>
<p className="text-lg">
Welcome to my brand-new portfolio! 🌟 Here, you can discover details
about my projects, interests, and achievements. Feel free to explore
and connect with me on social media to stay updated! 🌐✨
</p>
<p className="text-lg">
I'm a young and passionate software engineer with a knack for building
innovative web applications. Over the years, I've been recognized for
my skills and dedication, earning features in magazines, articles, and
news channels. The media has even honored me with the title "computer
boy of Aligarh." Search me on Google by my title to find more about my
journey and interviews! 🚀
</p>

<WorkExperience experiences={currentRole} />

<div className="flex flex-col sm:flex-row gap-4">
{/* href: "/sign", label: "Sign my guestbook" */}
{[
{ href: "/about", label: "About me" },
{ href: "/work", label: "My projects" },
{ href: "/sign", label: "Sign My Guestbook" },
{ href: "/contact", label: "Contact me" },
].map((link, index) => {
return (
<ActionLink
className="justify-start mt-0"
key={index}
{...link}
/>
);
})}
{/* Current Role */}
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-6 border border-gray-200 dark:border-gray-800">
<WorkExperience experiences={currentRole} />
</div>
</div>

{/* Pinned Interviews Section */}
<div className="mt-8">
<h2 className="text-2xl font-medium text-theme mb-4 font-serif">
Pinned Interviews
</h2>
<InterviewList interviews={featuredInterviews} />
<ActionLink label="View all interviews" href="/interviews" />
</div>
{/* Primary Actions */}
<div className="flex flex-wrap gap-3">
<ActionLink
href="/work"
label="View Projects"
className="bg-theme text-white px-6 py-3 rounded-lg hover:bg-theme/90 transition-colors no-underline font-medium"
icon={false}
/>
<ActionLink
href="/about"
label="About Me"
className="border border-gray-300 dark:border-gray-600 px-6 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors no-underline"
icon={false}
/>
<ActionLink
href="/contact"
label="Get in Touch"
className="text-theme hover:underline"
/>
</div>
</section>

{/* Featured Projects Section */}
<div className="mt-8 space-y-2">
<h2 className="text-2xl font-medium text-theme mb-4 font-serif">
{/* Featured Projects */}
<section className="mb-20">
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-8">
Featured Projects
</h2>
<ProjectsList isHome />
{/* Projects have been moved to their seperate page. */}
<ActionLink label="View all projects" href="/work" className="!my-4" />
</div>
<div className="mt-8 text-center">
<ActionLink
label="View all projects"
href="/work"
className="text-gray-600 dark:text-gray-400 hover:text-theme transition-colors"
/>
</div>
</section>

{/* Media Features */}
<section>
<h2 className="text-2xl font-light text-gray-900 dark:text-gray-100 mb-8">
Featured Interviews
</h2>
<InterviewList interviews={featuredInterviews} />
<div className="mt-8 text-center">
<ActionLink
label="View all interviews"
href="/highlights"
className="text-gray-600 dark:text-gray-400 hover:text-theme transition-colors"
/>
</div>
</section>
</div>
);
}
42 changes: 21 additions & 21 deletions components/highlights/interviews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,29 @@ export default function InterviewList({
priority,
}: InterviewListProps) {
return (
<ul className="animated-list --mx-4 md:-mx-6 flex flex-col md:flex-row snap-x snap-mandatory scroll-pl-6 grid-cols-2 flex-nowrap gap-9 overflow-x-scroll px-6 md:grid md:overflow-auto">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{interviews.map((interview: string) => (
<li
key={interview}
className="col-span-1 min-w-60 snap-start transition-opacity"
<Link
key={interview}
href={interview}
target="_blank"
className="group block"
>
<Link href={interview} className="space-y-4" target="_blank">
<div className="aspect-video overflow-hidden rounded-md bg-secondary">
<Halo strength={10}>
<Image
draggable={false}
src={`https://img.youtube.com/vi/${interview.split("v=")[1]}/0.jpg`}
alt="Interview"
width={1280}
height={720}
className="w-full object-cover h-full"
priority={priority}
/>
</Halo>
</div>
</Link>
</li>
<div className="aspect-video overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-theme transition-colors">
<Halo strength={10}>
<Image
draggable={false}
src={`https://img.youtube.com/vi/${interview.split("v=")[1]}/0.jpg`}
alt="Interview"
width={1280}
height={720}
className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
priority={priority}
/>
</Halo>
</div>
</Link>
))}
</ul>
</div>
);
}
Loading