first commit
This commit is contained in:
480
app/page.js
Normal file
480
app/page.js
Normal file
@@ -0,0 +1,480 @@
|
||||
'use client';
|
||||
|
||||
import { Mail, MapPin, Github, Linkedin, ExternalLink, Award, Briefcase, GraduationCap, Code, Database, Cloud, Terminal, Send } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
const personalInfo = {
|
||||
name: "Dheeraj Gajula",
|
||||
title: "Software & Network Engineer",
|
||||
email: "dheeraj.gajula@colorado.edu",
|
||||
location: "Boulder, CO",
|
||||
portfolio: "portfolio",
|
||||
linkedin: "www.linkedin.com/in/dheeraj-gajula-8776381ba",
|
||||
github: "github.com/dheerajgajula02"
|
||||
};
|
||||
|
||||
const experience = [
|
||||
{
|
||||
title: "Software Engineer – 1",
|
||||
company: "Versa Networks",
|
||||
location: "Bangalore, India",
|
||||
period: "June 2024 – Aug 2025",
|
||||
highlights: [
|
||||
"Developed REST APIs in GoLang and Cassandra serving 3000+ reqs/s with metrics through Prometheus and Grafana dashboards",
|
||||
"Performed Quantitative and Qualitative analysis of virus total malicious feed data building data pipelines using Python and BigQuery with Mathematical Reinforcement model",
|
||||
"Containerized multiple services using Docker and Kubernetes and deployed them in GCP"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Software Engineer – Intern",
|
||||
company: "Versa Networks",
|
||||
location: "Bangalore, India",
|
||||
period: "Feb 2024 – June 2024",
|
||||
highlights: [
|
||||
"Automated device usage tracking, reduced billing time from 7 days to under an hour",
|
||||
"Analyzed inconsistent logs, built anomaly detection systems and StateMachines to track device states",
|
||||
"Used MongoDB and Python Data modelling to process hierarchical data with insights on Prometheus and Grafana",
|
||||
"Used Flask and FastAPI for services, Docker and Docker compose for deployment"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const education = [
|
||||
{
|
||||
degree: "Master's in Computer Science",
|
||||
school: "University of Colorado – Boulder",
|
||||
location: "Boulder, CO",
|
||||
period: "Aug 2025 – May 2027",
|
||||
coursework: ["Enterprise Networks", "Network Systems", "Machine Learning"]
|
||||
},
|
||||
{
|
||||
degree: "Bachelor's in Computer Science and Engineering",
|
||||
school: "Dayanada Sagar College of Engineering",
|
||||
location: "Bangalore, India",
|
||||
period: "Nov 2020 – May 2024",
|
||||
gpa: "3.76/4.0",
|
||||
coursework: ["Data Structures & Algorithms", "Database Systems", "Operating Systems", "Computer Networks", "Cloud Computing", "Machine Learning", "Deep Learning", "NLP", "Computer Vision"]
|
||||
}
|
||||
];
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: "Network Applications",
|
||||
tech: "C++, Network Programming",
|
||||
period: "Sept 2025 – Present",
|
||||
description: [
|
||||
"Developed multi-threaded TCP/UDP-based HTTP Web Server in C++ with GET/HEAD/POST request parsing and UDP client/server file transfer system with FTP-like commands",
|
||||
"Implemented persistent connections with pipelining and timeout handling, serving multiple file types with correct Content-Type headers",
|
||||
"Built concurrent request processing using threading/forking for HTTP with reliable transfer mechanisms (Stop-and-Wait, Go-Back-N) for UDP"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Enterprise Network Lab",
|
||||
tech: "STP, DHCP Server, EIGRP, RIP, Wireshark, Wireless, VLANs",
|
||||
period: "Sept 2025 – Present",
|
||||
description: [
|
||||
"Configured Cisco enterprise networks with VLANs, trunking (802.1Q/ISL), VTP, STP/RSTP, and HSRP-based gateway redundancy",
|
||||
"Deployed wireless LANs with DHCP, multi-SSID VLAN segmentation; implemented NAT/PAT for Internet, DMZ, and VLAN address translation",
|
||||
"Implemented routing protocols (RIP v1/v2, EIGRP, OSPF multi-area) with redistribution, VRF isolation, DR/BDR elections, and summarization"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Schizo AI",
|
||||
tech: "Python, TensorFlow, Explainable AI",
|
||||
period: "2024",
|
||||
description: [
|
||||
"Presented undergrad thesis at International Conference for Advanced Data Driven Intelligence",
|
||||
"Explored explainable AI models like Lime, SHAP, CAM in the context of Schizophrenia diagnosis"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const skills = {
|
||||
"Languages": ["GoLang", "Python", "C/C++", "SQL", "Bash"],
|
||||
"Frameworks & Database": ["Flask", "FastAPI", "Postgres", "BigQuery", "Cassandra", "MongoDB", "Prometheus", "FireBase"],
|
||||
"Developer Tools": ["Git", "Docker", "Kubernetes", "GCP", "Grafana", "AWS", "NGINX", "Hugging Face", "wireshark"],
|
||||
"Libraries": ["pandas", "NumPy", "Matplotlib", "TensorFlow", "OpenCV", "scikit-learn", "Seaborn", "NLTK"],
|
||||
"Networking": ["TCP/IP", "UDP", "HTTP/HTTPS", "DNS", "DHCP", "BGP", "OSPF", "EIGRP", "RIP", "VLANs", "NAT/PAT", "Sockets", "protocol design"]
|
||||
};
|
||||
|
||||
const achievements = [
|
||||
{
|
||||
title: "Explainable AI in the context of Schizophrenia",
|
||||
year: "2024",
|
||||
description: "Presented undergrad thesis at International Conference for Advanced Data Driven Intelligence. Built Schizo AI project exploring explainable AI models."
|
||||
},
|
||||
{
|
||||
title: "Smart India Hackathon Winner",
|
||||
year: "2022",
|
||||
description: "Innovative solutions to save Court's time during hearings. Built project Tenali as backend engineer."
|
||||
},
|
||||
{
|
||||
title: "UNESCO India Africa Hackathon Finalist",
|
||||
year: "2023",
|
||||
description: "Energy flow optimization. Selected from 200 students from India. Received Best Contributors award."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-[#4B0082] border-b-[4px] border-[#7B3FF2] overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-10 left-10 w-40 h-40 bg-[#7B3FF2] rotate-12"></div>
|
||||
<div className="absolute bottom-20 right-20 w-32 h-32 bg-[#7B3FF2] -rotate-6"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
|
||||
<div className="transform -rotate-1">
|
||||
<h1 className="text-5xl md:text-7xl font-black text-white mb-4 tracking-tight drop-shadow-[8px_8px_0px_rgba(123,63,242,1)]">
|
||||
{personalInfo.name}
|
||||
</h1>
|
||||
<div className="inline-block bg-black border-4 border-[#7B3FF2] px-6 py-3 transform rotate-1 shadow-[8px_8px_0px_rgba(123,63,242,0.3)]">
|
||||
<p className="text-xl md:text-2xl font-bold text-white">
|
||||
{personalInfo.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ icon: Mail, text: personalInfo.email, href: `mailto:${personalInfo.email}` },
|
||||
{ icon: Github, text: personalInfo.github, href: `https://${personalInfo.github}` },
|
||||
{ icon: Linkedin, text: "LinkedIn", href: `https://${personalInfo.linkedin}` }
|
||||
].map((contact, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={contact.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group bg-black border-4 border-[#7B3FF2] p-4 transform hover:-translate-y-2 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<contact.icon className="w-6 h-6 text-[#4B0082] group-hover:scale-110 transition-transform" />
|
||||
<span className="font-bold text-sm text-white truncate">{contact.text}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Experience Section */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<Briefcase className="w-10 h-10 text-[#7B3FF2]" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
|
||||
EXPERIENCE
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{experience.map((job, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:translate-x-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
style={{ transform: idx % 2 === 0 ? 'rotate(-0.5deg)' : 'rotate(0.5deg)' }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h3 className="text-2xl md:text-3xl font-black text-white mb-2">{job.title}</h3>
|
||||
<p className="text-xl font-bold text-[#7B3FF2]">{job.company}</p>
|
||||
<p className="text-sm font-bold text-gray-400">{job.location}</p>
|
||||
</div>
|
||||
<div className="inline-block bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 self-start">
|
||||
<span className="font-black text-white text-sm">{job.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-3 mt-6">
|
||||
{job.highlights.map((highlight, hIdx) => (
|
||||
<li key={hIdx} className="flex gap-3">
|
||||
<span className="text-[#7B3FF2] font-black text-xl flex-shrink-0">▸</span>
|
||||
<span className="text-base font-semibold text-gray-300">{highlight}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects Section */}
|
||||
<section className="bg-[#4B0082] border-y-4 border-[#7B3FF2] py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<Code className="w-10 h-10 text-white" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,1)]">
|
||||
PROJECTS
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-black border-4 border-[#7B3FF2] p-6 transform hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
style={{ transform: `rotate(${(idx % 3 - 1) * 0.8}deg)` }}
|
||||
>
|
||||
<div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-3 py-1 inline-block mb-4 transform -rotate-1">
|
||||
<span className="text-xs font-black text-white">{project.period}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-white mb-2">{project.name}</h3>
|
||||
<p className="text-sm font-bold text-[#7B3FF2] mb-4">{project.tech}</p>
|
||||
<ul className="space-y-2">
|
||||
{project.description.map((desc, dIdx) => (
|
||||
<li key={dIdx} className="flex gap-2">
|
||||
<span className="text-[#7B3FF2] font-black flex-shrink-0">•</span>
|
||||
<span className="text-sm font-semibold text-gray-300">{desc}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Skills Section */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<Terminal className="w-10 h-10 text-[#7B3FF2]" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
|
||||
TECHNICAL SKILLS
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{Object.entries(skills).map(([category, items], idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-black border-4 border-[#7B3FF2] p-6 transform hover:translate-x-2 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
style={{ transform: `rotate(${(idx % 2 === 0 ? -0.5 : 0.5)}deg)` }}
|
||||
>
|
||||
<div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 inline-block mb-4 transform rotate-1">
|
||||
<h3 className="text-xl font-black text-white">{category}</h3>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{items.map((skill, sIdx) => (
|
||||
<span
|
||||
key={sIdx}
|
||||
className="bg-black border-3 border-[#7B3FF2] px-3 py-1 font-bold text-sm text-white hover:bg-[#4B0082] hover:text-white transition-colors duration-200 cursor-default"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Education Section */}
|
||||
<section className="bg-[#1a0033] border-y-4 border-[#7B3FF2] py-16 md:py-24">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<GraduationCap className="w-10 h-10 text-white" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,1)]">
|
||||
EDUCATION
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{education.map((edu, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
style={{ transform: `rotate(${(idx % 2 === 0 ? -0.8 : 0.8)}deg)` }}
|
||||
>
|
||||
<div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-3 py-1 inline-block mb-4">
|
||||
<span className="text-sm font-black text-white">{edu.period}</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-white mb-2">{edu.degree}</h3>
|
||||
{edu.gpa && (
|
||||
<div className="inline-block bg-[#4B0082] border-3 border-[#7B3FF2] px-3 py-1 mb-2">
|
||||
<span className="text-sm font-black text-white">GPA: {edu.gpa}</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-lg font-bold text-[#7B3FF2] mb-1">{edu.school}</p>
|
||||
<p className="text-sm font-bold text-gray-400 mb-4">{edu.location}</p>
|
||||
<div className="mt-4">
|
||||
<p className="text-xs font-black text-gray-500 mb-2">KEY COURSEWORK:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{edu.coursework.slice(0, 6).map((course, cIdx) => (
|
||||
<span
|
||||
key={cIdx}
|
||||
className="bg-black border-2 border-[#7B3FF2] px-2 py-1 text-xs font-bold text-white"
|
||||
>
|
||||
{course}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Achievements Section */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-16 md:py-24">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<Award className="w-10 h-10 text-[#7B3FF2]" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
|
||||
ACHIEVEMENTS
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{achievements.map((achievement, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform hover:translate-x-2 hover:shadow-[12px_12px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
style={{ transform: `rotate(${((idx % 3) - 1) * 0.5}deg)` }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl md:text-3xl font-black text-white mb-2">{achievement.title}</h3>
|
||||
<p className="text-base font-semibold text-gray-300">{achievement.description}</p>
|
||||
</div>
|
||||
<div className="bg-[#4B0082] border-4 border-[#7B3FF2] px-4 py-2 self-start">
|
||||
<span className="font-black text-white text-xl">{achievement.year}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section id="contact" className="max-w-7xl mx-auto px-6 py-16 md:py-24">
|
||||
<div className="flex items-center gap-4 mb-12">
|
||||
<Send className="w-10 h-10 text-[#7B3FF2]" />
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white transform -rotate-1 drop-shadow-[4px_4px_0px_rgba(123,63,242,0.3)]">
|
||||
CONTACT ME
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-black border-4 border-[#7B3FF2] p-6 transform -rotate-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200">
|
||||
<h3 className="text-2xl font-black text-white mb-4">GET IN TOUCH</h3>
|
||||
<p className="text-base font-semibold text-gray-300 mb-6">
|
||||
I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<a href={`mailto:${personalInfo.email}`} className="flex items-center gap-3 group">
|
||||
<div className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 group-hover:scale-110 transition-transform">
|
||||
<Mail className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-white">{personalInfo.email}</span>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3">
|
||||
<MapPin className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-white">{personalInfo.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex gap-4">
|
||||
<a
|
||||
href={`https://${personalInfo.github}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 hover:bg-[#7B3FF2] hover:border-[#4B0082] transition-colors"
|
||||
>
|
||||
<Github className="w-6 h-6 text-white" />
|
||||
</a>
|
||||
<a
|
||||
href={`https://${personalInfo.linkedin}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[#4B0082] border-3 border-[#7B3FF2] p-3 hover:bg-[#7B3FF2] hover:border-[#4B0082] transition-colors"
|
||||
>
|
||||
<Linkedin className="w-6 h-6 text-white" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="bg-black border-4 border-[#7B3FF2] p-6 md:p-8 transform rotate-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200">
|
||||
<form className="space-y-6" onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target);
|
||||
const subject = formData.get('subject');
|
||||
const message = formData.get('message');
|
||||
window.location.href = `mailto:${personalInfo.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
|
||||
}}>
|
||||
<div>
|
||||
<label className="block text-sm font-black text-white mb-2">YOUR NAME</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-black text-white mb-2">YOUR EMAIL</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-black text-white mb-2">SUBJECT</label>
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
required
|
||||
className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors"
|
||||
placeholder="Let's work together!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-black text-white mb-2">MESSAGE</label>
|
||||
<textarea
|
||||
name="message"
|
||||
required
|
||||
rows="5"
|
||||
className="w-full border-4 border-[#7B3FF2] bg-black text-white p-3 font-bold focus:outline-none focus:border-[#4B0082] transition-colors resize-none"
|
||||
placeholder="Your message here..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#4B0082] border-4 border-[#7B3FF2] px-6 py-4 font-black text-white text-lg hover:bg-[#7B3FF2] hover:border-[#4B0082] transform hover:-translate-y-1 hover:shadow-[8px_8px_0px_rgba(123,63,242,1)] transition-all duration-200"
|
||||
>
|
||||
SEND MESSAGE
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-[#1a0033] border-t-4 border-[#7B3FF2] py-12">
|
||||
<div className="max-w-7xl mx-auto px-6 text-center">
|
||||
<div className="inline-block bg-black border-4 border-[#7B3FF2] px-8 py-4 transform -rotate-1 shadow-[8px_8px_0px_rgba(123,63,242,1)]">
|
||||
<p className="text-2xl font-black text-white">LET'S BUILD SOMETHING AMAZING</p>
|
||||
</div>
|
||||
<p className="mt-8 text-white font-bold">
|
||||
© 2025 {personalInfo.name}. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user