Skip to content

Create Portfolio Code #306

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
shaikrwaseemakram-AI wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Create Portfolio Code #306

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
221 changes: 221 additions & 0 deletions Portfolio Code
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/hooks/use-toast";
import { Send, Github, Linkedin, Twitter, Mail, MapPin } from "lucide-react";

const Contact = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
message: "",
});
const [isSubmitting, setIsSubmitting] = useState(false);
const { toast } = useToast();

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);

// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000));

toast({
title: "Message sent successfully!",
description: "Thanks for reaching out. I'll get back to you soon.",
});

setFormData({ name: "", email: "", message: "" });
setIsSubmitting(false);
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData(prev => ({
...prev,
[e.target.name]: e.target.value,
}));
};

const socialLinks = [
{
icon: Github,
href: "https://github.com",
label: "GitHub",
username: "@shaikrwaseemakram",
},
{
icon: Linkedin,
href: "https://linkedin.com",
label: "LinkedIn",
username: "Shaik Waseem Akram",
},
{
icon: Twitter,
href: "https://twitter.com",
label: "Twitter",
username: "@shaikwaseemakram",
},
];

return (
<section className="py-20 px-6 relative">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6">
<span className="gradient-text">Get In Touch</span>
</h2>
<p className="text-lg text-foreground-muted max-w-2xl mx-auto">
Ready to collaborate on your next project? Let's discuss how we can bring your ideas to life.
</p>
</div>

<div className="grid lg:grid-cols-3 gap-12">
{/* Contact Form */}
<div className="lg:col-span-2">
<div className="glass-intense rounded-xl p-8">
<h3 className="text-2xl font-semibold mb-6 text-foreground">
Send Message
</h3>

<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
Name
</label>
<Input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required
className="glass border-glass-border/50 focus:border-neon-cyan/50"
placeholder="Your full name"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
Email
</label>
<Input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required
className="glass border-glass-border/50 focus:border-neon-cyan/50"
placeholder="your.email@example.com"
/>
</div>
</div>

<div>
<label className="block text-sm font-medium text-foreground mb-2">
Message
</label>
<Textarea
name="message"
value={formData.message}
onChange={handleChange}
required
rows={6}
className="glass border-glass-border/50 focus:border-neon-cyan/50 resize-none"
placeholder="Tell me about your project or just say hello..."
/>
</div>

<Button
type="submit"
variant="cta"
size="lg"
disabled={isSubmitting}
className="w-full sm:w-auto"
>
{isSubmitting ? (
<>
<div className="w-4 h-4 border-2 border-background border-t-transparent rounded-full animate-spin mr-2" />
Sending...
</>
) : (
<>
<Send className="mr-2 h-4 w-4" />
Send Message
</>
)}
</Button>
</form>
</div>
</div>

{/* Contact Info */}
<div className="space-y-8">
{/* Direct Contact */}
<div className="glass-intense rounded-xl p-6">
<h3 className="text-xl font-semibold mb-4 text-foreground">
Direct Contact
</h3>
<div className="space-y-3">
<a
href="mailto:shaikrwaseemakram@gmail.com"
className="flex items-center text-foreground-muted hover:text-neon-cyan transition-colors"
>
<Mail className="mr-3 h-4 w-4" />
shaikrwaseemakram@gmail.com
</a>
<div className="flex items-center text-foreground-muted">
<MapPin className="mr-3 h-4 w-4" />
Kakinada, Andhra Pradesh, India
</div>
</div>
</div>

{/* Social Links */}
<div className="glass-intense rounded-xl p-6">
<h3 className="text-xl font-semibold mb-4 text-foreground">
Connect With Me
</h3>
<div className="space-y-3">
{socialLinks.map(({ icon: Icon, href, label, username }) => (
<a
key={label}
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-foreground-muted hover:text-neon-cyan transition-colors group"
>
<Icon className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" />
<div>
<div className="font-medium">{label}</div>
<div className="text-xs text-foreground-subtle">
{username}
</div>
</div>
</a>
))}
</div>
</div>

{/* Availability */}
<div className="glass-intense rounded-xl p-6">
<h3 className="text-xl font-semibold mb-4 text-foreground">
Availability
</h3>
<div className="space-y-2">
<div className="flex items-center">
<div className="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"></div>
<span className="text-foreground-muted">Available for freelance</span>
</div>
<div className="text-sm text-foreground-subtle">
Typically responds within 24 hours
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};

export default Contact;