diff --git a/src/components/icons/TechIcons.tsx b/src/components/icons/TechIcons.tsx index 8ea90c5..0652df9 100644 --- a/src/components/icons/TechIcons.tsx +++ b/src/components/icons/TechIcons.tsx @@ -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 ( -
- {icons.map(({ icon: Icon, name }) => ( + + {icons.map(({ icon: Icon, name, color }, index) => ( -
- +
+ {/* Background glow */} +
+ + {/* Main container */} +
+ +
+ + {/* Floating particles effect */} + + {[...Array(6)].map((_, i) => ( + + ))} +
+ {!compact && ( - {name} + + {name} + )} ))} -
+ ) } diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx index 7cf2c31..3d6afc1 100644 --- a/src/components/sections/AboutSection.tsx +++ b/src/components/sections/AboutSection.tsx @@ -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(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 ( -
-
+
+ {/* Background Elements */} +
+
+
+
+ +
- {/* Left Column */} -
-

About Me

-

- 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. -

-
- - {/* Right Column - Skills Grid */} -
- {skills.map((skill) => ( + {/* Left Column - Content */} + +
+ + 🚀 About Me + + +

+ Passionate Developer +

+ +
+

+ I'm a full-stack developer with a passion for creating innovative solutions that bridge traditional development with cutting-edge Web3 technologies. +

+ +

+ My expertise spans across modern web frameworks, mobile development, and blockchain technologies, allowing me to build comprehensive solutions for complex challenges. +

+ +

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

+
+
+ + {/* Stats */} +
+ +
5+
+
Projects
+ + + +
3+
+
Years
+ + + +
12+
+
Technologies
+ +
+ + + {/* Right Column - Enhanced Skills Grid */} + + {skills.map((skill, index) => ( { + setTimeout(() => { + setVisibleSkills(prev => { + const newSkills = [...prev]; + newSkills[index] = true; + return newSkills; + }); + }, index * 100); + }} > -
- - {skill.name} -
-
-
+
+ {/* Skill Icon and Name */} +
+
+ +
+ {skill.name} +
+ + {/* Progress Bar */} +
+
+ Proficiency + {skill.level}% +
+ +
+ +
+
+ + {/* Hover Effect Overlay */} +
))} -
+
diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx index 6919cfd..ed9299e 100644 --- a/src/components/sections/ContactSection.tsx +++ b/src/components/sections/ContactSection.tsx @@ -1,79 +1,259 @@ 'use client'; import { useState } from "react"; - import { motion } from 'framer-motion'; import { Button } from '@/components/ui/Button'; -import { FiGithub, FiSend, FiMail } from 'react-icons/fi'; +import { FiGithub, FiSend, FiMail, FiTwitter, FiLinkedin, FiMapPin, FiPhone } from 'react-icons/fi'; export default function ContactSection() { - {/** @typescript-eslint/no-unused-vars*/} - const [loading] = useState(false); + const [loading] = useState(false); + const [formData, setFormData] = useState({ + name: '', + email: '', + message: '' + }); + + const handleInputChange = (e: React.ChangeEvent) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value + }); + }; + + const contactInfo = [ + { + icon: FiMail, + label: 'Email', + value: 'doyextech@gmail.com', + href: 'mailto:doyextech@gmail.com', + color: 'from-blue-500 to-cyan-500' + }, + { + icon: FiGithub, + label: 'GitHub', + value: '@mbdulrohim', + href: 'https://github.com/mbdulrohim', + color: 'from-gray-700 to-gray-900' + }, + { + icon: FiTwitter, + label: 'Twitter', + value: '@Mbdulrohim', + href: 'https://twitter.com/Mbdulrohim', + color: 'from-blue-400 to-blue-600' + }, + { + icon: FiLinkedin, + label: 'LinkedIn', + value: 'Abdulrohim Mustapha', + href: 'https://linkedin.com/in/abdulrohim-mustapha', + color: 'from-blue-600 to-blue-800' + } + ]; return ( -
-
+
+ {/* Background Elements */} +
+
+
+
+ +
+ {/* Section Header */} -

Let's Connect

- -

+ + 💬 Get In Touch + + +

+ Let's Connect +

- Have a project in mind? Let's discuss how I can help bring it to life. +

+ Have an exciting project in mind? I'd love to hear about it! Let's discuss how we can bring your ideas to life with cutting-edge technology.

+ -
-
- - +
+ {/* Contact Form */} + +
+

+ Send Me a Message +

+

+ Fill out the form below and I'll get back to you as soon as possible. +

-