feat: add activity feed and background effects
- Implemented ActivityFeed component to display real-time user activity including coding, music, and chat interactions. - Added GooFilter and BackgroundBlobs components for enhanced visual effects. - Updated layout to include new components and ensure proper stacking context. - Enhanced Tailwind CSS configuration with new color and font settings. - Created API route to mock activity data from n8n. - Refactored main page structure to streamline component rendering.
This commit is contained in:
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Mail, MapPin, Send } from 'lucide-react';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { LiquidHeading } from '@/components/LiquidHeading';
|
||||
|
||||
const Contact = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
@@ -139,23 +140,19 @@ const Contact = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-20 px-4 relative">
|
||||
<section id="contact" className="py-24 px-4 relative bg-cream">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
|
||||
Contact Me
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<LiquidHeading
|
||||
text="Contact Me"
|
||||
level={2}
|
||||
className="text-4xl md:text-5xl font-bold mb-6 text-stone-800"
|
||||
/>
|
||||
<p className="text-xl text-stone-500 max-w-2xl mx-auto mt-4">
|
||||
Interested in working together or have questions about my projects? Feel free to reach out!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
@@ -167,10 +164,10 @@ const Contact = () => {
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white mb-6">
|
||||
<h3 className="text-2xl font-bold text-stone-800 mb-6">
|
||||
Get In Touch
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
I'm always available to discuss new opportunities, interesting projects,
|
||||
or simply chat about technology and innovation.
|
||||
</p>
|
||||
@@ -187,14 +184,14 @@ const Contact = () => {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
whileHover={{ x: 5 }}
|
||||
className="flex items-center space-x-4 p-4 rounded-lg glass-card hover:bg-gray-800/30 transition-colors group"
|
||||
className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/60 transition-colors group border-transparent hover:border-white/60"
|
||||
>
|
||||
<div className="p-3 bg-blue-500/20 rounded-lg group-hover:bg-blue-500/30 transition-colors">
|
||||
<info.icon className="w-6 h-6 text-blue-400" />
|
||||
<div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all">
|
||||
<info.icon className="w-6 h-6 text-stone-700" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-white">{info.title}</h4>
|
||||
<p className="text-gray-400">{info.value}</p>
|
||||
<h4 className="font-semibold text-stone-800">{info.title}</h4>
|
||||
<p className="text-stone-500">{info.value}</p>
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
@@ -208,15 +205,15 @@ const Contact = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="glass-card p-8 rounded-2xl"
|
||||
className="glass-card p-8 rounded-3xl bg-white/40 border border-white/60"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-white mb-6">Send Message</h3>
|
||||
<h3 className="text-2xl font-bold text-stone-800 mb-6">Send Message</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Name <span className="text-red-400">*</span>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-stone-600 mb-2">
|
||||
Name <span className="text-liquid-rose">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -226,23 +223,23 @@ const Contact = () => {
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
required
|
||||
className={`w-full px-4 py-3 bg-gray-800/50 backdrop-blur-sm border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-all ${
|
||||
className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.name && touched.name
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-700 focus:ring-blue-500 focus:border-transparent'
|
||||
? 'border-red-400 focus:ring-red-400'
|
||||
: 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
|
||||
}`}
|
||||
placeholder="Your name"
|
||||
aria-invalid={errors.name && touched.name ? 'true' : 'false'}
|
||||
aria-describedby={errors.name && touched.name ? 'name-error' : undefined}
|
||||
/>
|
||||
{errors.name && touched.name && (
|
||||
<p id="name-error" className="mt-1 text-sm text-red-400">{errors.name}</p>
|
||||
<p id="name-error" className="mt-1 text-sm text-red-500">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email <span className="text-red-400">*</span>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-stone-600 mb-2">
|
||||
Email <span className="text-liquid-rose">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
@@ -252,24 +249,24 @@ const Contact = () => {
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
required
|
||||
className={`w-full px-4 py-3 bg-gray-800/50 backdrop-blur-sm border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-all ${
|
||||
className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.email && touched.email
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-700 focus:ring-blue-500 focus:border-transparent'
|
||||
? 'border-red-400 focus:ring-red-400'
|
||||
: 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
|
||||
}`}
|
||||
placeholder="your@email.com"
|
||||
aria-invalid={errors.email && touched.email ? 'true' : 'false'}
|
||||
aria-describedby={errors.email && touched.email ? 'email-error' : undefined}
|
||||
/>
|
||||
{errors.email && touched.email && (
|
||||
<p id="email-error" className="mt-1 text-sm text-red-400">{errors.email}</p>
|
||||
<p id="email-error" className="mt-1 text-sm text-red-500">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Subject <span className="text-red-400">*</span>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-stone-600 mb-2">
|
||||
Subject <span className="text-liquid-rose">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -279,23 +276,23 @@ const Contact = () => {
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
required
|
||||
className={`w-full px-4 py-3 bg-gray-800/50 backdrop-blur-sm border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-all ${
|
||||
className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.subject && touched.subject
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-700 focus:ring-blue-500 focus:border-transparent'
|
||||
? 'border-red-400 focus:ring-red-400'
|
||||
: 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
|
||||
}`}
|
||||
placeholder="What's this about?"
|
||||
aria-invalid={errors.subject && touched.subject ? 'true' : 'false'}
|
||||
aria-describedby={errors.subject && touched.subject ? 'subject-error' : undefined}
|
||||
/>
|
||||
{errors.subject && touched.subject && (
|
||||
<p id="subject-error" className="mt-1 text-sm text-red-400">{errors.subject}</p>
|
||||
<p id="subject-error" className="mt-1 text-sm text-red-500">{errors.subject}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Message <span className="text-red-400">*</span>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-stone-600 mb-2">
|
||||
Message <span className="text-liquid-rose">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
@@ -305,10 +302,10 @@ const Contact = () => {
|
||||
onBlur={handleBlur}
|
||||
required
|
||||
rows={6}
|
||||
className={`w-full px-4 py-3 bg-gray-800/50 backdrop-blur-sm border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-all resize-none ${
|
||||
className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all resize-none ${
|
||||
errors.message && touched.message
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-700 focus:ring-blue-500 focus:border-transparent'
|
||||
? 'border-red-400 focus:ring-red-400'
|
||||
: 'border-white/60 focus:ring-liquid-blue focus:border-transparent'
|
||||
}`}
|
||||
placeholder="Tell me more about your project or question..."
|
||||
aria-invalid={errors.message && touched.message ? 'true' : 'false'}
|
||||
@@ -316,11 +313,11 @@ const Contact = () => {
|
||||
/>
|
||||
<div className="flex justify-between items-center mt-1">
|
||||
{errors.message && touched.message ? (
|
||||
<p id="message-error" className="text-sm text-red-400">{errors.message}</p>
|
||||
<p id="message-error" className="text-sm text-red-500">{errors.message}</p>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="text-xs text-stone-400">
|
||||
{formData.message.length} characters
|
||||
</span>
|
||||
</div>
|
||||
@@ -331,7 +328,7 @@ const Contact = () => {
|
||||
disabled={isSubmitting}
|
||||
whileHover={!isSubmitting ? { scale: 1.02, y: -2 } : {}}
|
||||
whileTap={!isSubmitting ? { scale: 0.98 } : {}}
|
||||
className="w-full btn-primary py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 disabled:hover:scale-100 disabled:hover:translate-y-0"
|
||||
className="w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 disabled:hover:scale-100 disabled:hover:translate-y-0 bg-stone-900 text-white rounded-xl hover:bg-black transition-all shadow-lg"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user