feat: add hero section and navigation components
Deploy Portfolio Selfmade / deploy (push) Successful in 31s
Deploy Portfolio Selfmade / deploy (push) Successful in 31s
- Created HeroSection component for the landing page. - Implemented Navigation component with smooth scrolling to sections. - Added useNavigation hook to manage active section and scroll state. - Introduced useScrollToSection hook for smooth scrolling functionality. feat: add projects section with project cards - Developed ProjectCard component to display individual project details. - Created ProjectsSection component to showcase featured projects with filtering options. - Added sample project data for demonstration. feat: add skills section with skill cards - Implemented SkillCard component to display individual skills. - Created SkillsSection component to showcase skills with category filtering. - Added sample skills data for demonstration. style: update global styles and add custom scrollbar - Imported Urbanist font and set it as the default font. - Updated body background and text colors. - Customized scrollbar styles for better aesthetics. feat: add shared components and constants - Created AnimatedSection, Button, and Footer components for reusability. - Added COLORS and GRADIENT constants for consistent theming. - Updated index files for shared components and hooks. chore: update dependencies and configuration - Added framer-motion for animations. - Updated Tailwind CSS configuration for custom animations and colors. - Adjusted TypeScript configuration for better path resolution.
This commit is contained in:
@@ -0,0 +1,172 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Mail, MapPin } from 'lucide-react';
|
||||
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
|
||||
import Button from '../../../shared/components/Button';
|
||||
import AnimatedSection from '../../../shared/components/AnimatedSection';
|
||||
|
||||
export const ContactSection: React.FC = () => {
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.6 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatedSection id="contact" className="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
|
||||
>
|
||||
<span className="text-green-400 text-sm font-medium">GET IN TOUCH</span>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
|
||||
Let's Work Together
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||||
Have a project in mind? Let's discuss how we can bring your ideas to life
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<label className="block text-white font-medium mb-3">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<label className="block text-white font-medium mb-3">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your.email@example.com"
|
||||
className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<label className="block text-white font-medium mb-3">Message</label>
|
||||
<textarea
|
||||
placeholder="Tell me about your project"
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors resize-none"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<Button variant="primary" size="lg" className="w-full">
|
||||
Send Message
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Let's Connect</h3>
|
||||
<p className="text-gray-400">
|
||||
I'm always open to discussing new projects, creative ideas, or opportunities
|
||||
to be part of your vision. Feel free to reach out!
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Items */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 p-4 rounded-lg border border-green-500/30 bg-green-500/5">
|
||||
<div className="p-3 rounded-lg bg-green-500/20">
|
||||
<Mail className="text-green-500" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm">Email</p>
|
||||
<p className="text-white font-medium">alex@himetoprogram.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 p-4 rounded-lg border border-green-500/30 bg-green-500/5">
|
||||
<div className="p-3 rounded-lg bg-green-500/20">
|
||||
<MapPin className="text-green-500" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm">Location</p>
|
||||
<p className="text-white font-medium">San Francisco, CA</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Social Links */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<p className="text-white font-medium mb-4">Connect with me</p>
|
||||
<div className="flex gap-4">
|
||||
<motion.a
|
||||
href="#"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
|
||||
>
|
||||
<FaGithub size={24} />
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
|
||||
>
|
||||
<FaLinkedin size={24} />
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
|
||||
>
|
||||
<FaTwitter size={24} />
|
||||
</motion.a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user