Skip to content

Complete Portfolio Redesign: Transform UI to Modern, Professional Design #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

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Complete Portfolio Redesign: Transform UI to Modern, Professional Design #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a4cb11
Initial plan
Copilot Jul 13, 2025
1fe776d
Complete portfolio redesign: Modern UI with enhanced visuals, animati…
Copilot Jul 13, 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
134 changes: 117 additions & 17 deletions src/components/icons/TechIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,137 @@ import {
SiNodedotjs,
SiFirebase,
SiDocker,
SiPostgresql
SiPostgresql,
SiTypescript,
SiTailwindcss,
SiGit,
SiMongodb
} from 'react-icons/si'

const icons = [
{ icon: SiNextdotjs, name: 'Next.js' },
{ icon: SiSolidity, name: 'Solidity' },
{ icon: SiKotlin, name: 'Kotlin' },
{ icon: SiReact, name: 'React' },
{ icon: SiNodedotjs, name: 'Node.js' },
{ icon: SiFirebase, name: 'Firebase' },
{ icon: SiDocker, name: 'Docker' },
{ icon: SiPostgresql, name: 'PostgreSQL' },
{ icon: SiNextdotjs, name: 'Next.js', color: '#000000' },
{ icon: SiReact, name: 'React', color: '#61DAFB' },
{ icon: SiTypescript, name: 'TypeScript', color: '#3178C6' },
{ icon: SiNodedotjs, name: 'Node.js', color: '#339933' },
{ icon: SiSolidity, name: 'Solidity', color: '#363636' },
{ icon: SiKotlin, name: 'Kotlin', color: '#7F52FF' },
{ icon: SiTailwindcss, name: 'Tailwind', color: '#06B6D4' },
{ icon: SiFirebase, name: 'Firebase', color: '#FFCA28' },
{ icon: SiDocker, name: 'Docker', color: '#2496ED' },
{ icon: SiPostgresql, name: 'PostgreSQL', color: '#336791' },
{ icon: SiMongodb, name: 'MongoDB', color: '#47A248' },
{ icon: SiGit, name: 'Git', color: '#F05032' },
]

export default function TechIcons({ compact = false }: { compact?: boolean }) {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
}
}
}

const itemVariants = {
hidden: {
opacity: 0,
y: 20,
scale: 0.8
},
visible: {
opacity: 1,
y: 0,
scale: 1,
transition: {
type: "spring",
stiffness: 200,
damping: 15
}
}
}

return (
<div className={`grid ${compact ? 'grid-cols-2' : 'grid-cols-4'} gap-4`}>
{icons.map(({ icon: Icon, name }) => (
<motion.div
className={`grid ${compact ? 'grid-cols-3 gap-3' : 'grid-cols-4 md:grid-cols-6 gap-6'} max-w-4xl mx-auto`}
variants={containerVariants}
initial="hidden"
animate="visible"
>
{icons.map(({ icon: Icon, name, color }, index) => (
<motion.div
key={name}
className="flex flex-col items-center text-secondary"
whileHover={{ scale: 1.1 }}
className="group flex flex-col items-center"
variants={itemVariants}
whileHover={{
scale: 1.15,
y: -8,
transition: { type: "spring", stiffness: 400, damping: 10 }
}}
whileTap={{ scale: 0.95 }}
>
<div className={`p-2 rounded-lg bg-secondary/10 ${compact ? 'w-10 h-10' : 'w-12 h-12'} flex items-center justify-center`}>
<Icon className={`${compact ? 'w-6 h-6' : 'w-8 h-8'} text-accent`} />
<div className={`relative ${compact ? 'w-12 h-12' : 'w-16 h-16'} flex items-center justify-center`}>
{/* Background glow */}
<div
className="absolute inset-0 rounded-2xl blur-xl opacity-0 group-hover:opacity-60 transition-opacity duration-300"
style={{ backgroundColor: `${color}40` }}
/>

{/* Main container */}
<div className="relative w-full h-full bg-white/10 dark:bg-white/5 backdrop-blur-lg border border-white/20 dark:border-white/10 rounded-2xl flex items-center justify-center transition-all duration-300 group-hover:bg-white/20 dark:group-hover:bg-white/10 group-hover:border-white/40 dark:group-hover:border-white/20">
<Icon
className={`${compact ? 'w-6 h-6' : 'w-8 h-8'} transition-all duration-300 group-hover:scale-110`}
style={{ color: color }}
/>
</div>

{/* Floating particles effect */}
<motion.div
className="absolute inset-0 pointer-events-none"
whileHover={{
scale: [1, 1.2, 1],
opacity: [0, 1, 0],
}}
transition={{ duration: 0.6 }}
>
{[...Array(6)].map((_, i) => (
<motion.div
key={i}
className="absolute w-1 h-1 rounded-full"
style={{
backgroundColor: color,
left: `${20 + (i * 12)}%`,
top: `${20 + (i * 8)}%`,
}}
animate={{
y: [-10, -20, -10],
opacity: [0, 1, 0],
}}
transition={{
duration: 1.5,
delay: i * 0.1,
repeat: Infinity,
repeatType: "reverse",
}}
/>
))}
</motion.div>
</div>

{!compact && (
<span className="text-xs text-background/80 mt-1">{name}</span>
<motion.span
className="text-xs font-medium text-gray-600 dark:text-gray-400 mt-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
initial={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: index * 0.05 }}
>
{name}
</motion.span>
)}
</motion.div>
))}
</div>
</motion.div>
)
}
193 changes: 163 additions & 30 deletions src/components/sections/AboutSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,183 @@
'use client';
import { motion } from 'framer-motion';
import { skills } from '@/data/skills';
import { useEffect, useState } from 'react';

export default function AboutSection() {
const [visibleSkills, setVisibleSkills] = useState<boolean[]>(new Array(skills.length).fill(false));

const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
}
}
};

const itemVariants = {
hidden: {
opacity: 0,
x: -30,
scale: 0.95
},
visible: {
opacity: 1,
x: 0,
scale: 1,
transition: {
type: "spring",
stiffness: 100,
damping: 15
}
}
};

return (
<section className="py-20 bg-primary/5">
<div className="container mx-auto px-4">
<section className="py-24 relative overflow-hidden">
{/* Background Elements */}
<div className="absolute inset-0 -z-10">
<div className="absolute top-0 right-1/4 w-96 h-96 bg-gradient-to-r from-purple-400/10 to-pink-400/10 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-400/10 to-cyan-400/10 rounded-full blur-3xl" />
</div>

<div className="container mx-auto px-4 max-w-7xl">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 gap-12 items-center"
transition={{ duration: 0.8 }}
className="grid lg:grid-cols-2 gap-16 items-center"
>
{/* Left Column */}
<div>
<h2 className="text-4xl font-bold mb-6">About Me</h2>
<p className="text-text/80 mb-8">
Full-stack developer with expertise in building cross-platform solutions
using modern web and blockchain technologies. Passionate about creating
efficient, scalable applications with great user experiences.
</p>
</div>

{/* Right Column - Skills Grid */}
<div className="grid grid-cols-2 gap-4">
{skills.map((skill) => (
{/* Left Column - Content */}
<motion.div
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.2 }}
className="space-y-8"
>
<div>
<motion.span
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
className="inline-block px-4 py-2 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-full text-purple-700 dark:text-purple-300 text-sm font-semibold mb-6"
>
🚀 About Me
</motion.span>

<h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-800 to-pink-800 dark:from-white dark:via-purple-200 dark:to-pink-200 bg-clip-text text-transparent">
Passionate Developer
</h2>

<div className="space-y-4 text-lg leading-relaxed text-gray-600 dark:text-gray-400">
<p>
I'm a <span className="font-semibold text-purple-600 dark:text-purple-400">full-stack developer</span> with a passion for creating innovative solutions that bridge traditional development with cutting-edge Web3 technologies.
</p>

<p>
My expertise spans across <span className="font-semibold text-blue-600 dark:text-blue-400">modern web frameworks</span>, <span className="font-semibold text-green-600 dark:text-green-400">mobile development</span>, and <span className="font-semibold text-orange-600 dark:text-orange-400">blockchain technologies</span>, allowing me to build comprehensive solutions for complex challenges.
</p>

<p>
I believe in writing clean, efficient code and creating user experiences that not only look great but also solve real-world problems.
</p>
</div>
</div>

{/* Stats */}
<div className="grid grid-cols-3 gap-6 pt-8">
<motion.div
whileHover={{ scale: 1.05 }}
className="text-center p-4 bg-white/5 dark:bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10"
>
<div className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">5+</div>
<div className="text-sm text-gray-600 dark:text-gray-400 font-medium">Projects</div>
</motion.div>

<motion.div
whileHover={{ scale: 1.05 }}
className="text-center p-4 bg-white/5 dark:bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10"
>
<div className="text-3xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">3+</div>
<div className="text-sm text-gray-600 dark:text-gray-400 font-medium">Years</div>
</motion.div>

<motion.div
whileHover={{ scale: 1.05 }}
className="text-center p-4 bg-white/5 dark:bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10"
>
<div className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">12+</div>
<div className="text-sm text-gray-600 dark:text-gray-400 font-medium">Technologies</div>
</motion.div>
</div>
</motion.div>

{/* Right Column - Enhanced Skills Grid */}
<motion.div
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="grid grid-cols-2 gap-4"
>
{skills.map((skill, index) => (
<motion.div
key={skill.name}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="p-4 bg-background dark:bg-primary/10 rounded-lg"
variants={itemVariants}
className="group relative"
onViewportEnter={() => {
setTimeout(() => {
setVisibleSkills(prev => {
const newSkills = [...prev];
newSkills[index] = true;
return newSkills;
});
}, index * 100);
}}
>
<div className="flex items-center gap-3 mb-2">
<skill.icon className="w-6 h-6 text-accent" />
<span className="font-medium">{skill.name}</span>
</div>
<div className="h-2 bg-gray-200 rounded-full">
<div
className="h-full bg-accent rounded-full transition-all duration-1000"
style={{ width: `${skill.level}%` }}
/>
<div className="relative p-6 bg-white/5 dark:bg-white/5 backdrop-blur-lg border border-white/10 dark:border-white/5 rounded-3xl group-hover:bg-white/10 dark:group-hover:bg-white/10 transition-all duration-300">
{/* Skill Icon and Name */}
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-xl">
<skill.icon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<span className="font-semibold text-gray-900 dark:text-white">{skill.name}</span>
</div>

{/* Progress Bar */}
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600 dark:text-gray-400">Proficiency</span>
<span className="text-sm font-medium text-purple-600 dark:text-purple-400">{skill.level}%</span>
</div>

<div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<motion.div
className="h-full bg-gradient-to-r from-purple-600 to-blue-600 rounded-full"
initial={{ width: 0 }}
animate={{
width: visibleSkills[index] ? `${skill.level}%` : 0
}}
transition={{
duration: 1.5,
ease: "easeOut",
delay: 0.2
}}
/>
</div>
</div>

{/* Hover Effect Overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-cyan-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
</div>
</motion.div>
))}
</div>
</motion.div>
</motion.div>
</div>
</section>
Expand Down
Loading