\n {portfolioData.personal.name}\n

\n {portfolioData.personal.title}\n

\n {portfolioData.personal.tagline}\n

\n {portfolioData.personal.bio}\n

\n \n View Projects\n \n \n Contact Me\n \n \n

\n);\n\nconst AboutSection: React.FC = () => (\n

\n About Me\n

\n 🧠\n

\n Passionate About AI & Deep Learning\n

\n As a 25-year-old BTech Computer Science Engineering student, I'm deeply passionate about the transformative potential of artificial intelligence and deep learning technologies.\n

\n Currently working on exciting projects including skin cancer detection using CNNs and comprehensive neural network implementations from scratch. My goal is to contribute to AI advancements that make a meaningful impact on society.\n

\n With family responsibilities driving my motivation for career growth, I'm committed to continuous learning and staying at the forefront of AI innovation. I believe technology should serve humanity, and I'm dedicated to building solutions that improve lives.\n

Career Goals

\n 🎯\n Enter the AI/ML workforce as a skilled professional\n
\n 🚀\n Contribute to cutting-edge AI research and development\n
\n 💡\n Build AI solutions that solve real-world problems\n
\n 📚\n Continuously learn and adapt to emerging technologies\n

\n);\n\nconst ProjectCard: React.FC<{ project: Project }> = ({ project }) => (\n

\n {project.title}\n

\n {project.featured && (\n \n Featured\n \n )}\n

\n \n

\n {project.description}\n

\n \n

Objective:

{project.objective}

\n \n

Key Challenges:

\n •\n {challenge}\n

\n \n

Tech Stack:

\n {project.techStack.map((tech) => (\n \n {tech}\n \n ))}\n

\n \n

\n {project.githubUrl && (\n \n 🔗 GitHub\n \n )}\n {project.liveUrl && (\n \n 🚀 Live Demo\n \n )}\n {project.colabUrl && (\n \n 📓 Colab\n \n )}\n

\n);\n\nconst ProjectsSection: React.FC = () => (\n

\n Featured Projects\n

\n {portfolioData.projects.map((project) => (\n \n ))}\n

\n);\n\nconst SkillsSection: React.FC = () => (\n

\n Skills & Expertise\n

\n {portfolioData.skills.map((skillCategory) => (\n

\n {skillCategory.category}\n

\n {skillCategory.skills.map((skill) => (\n \n {skill}\n \n ))}\n

\n ))}\n

\n);\n\nconst ExperienceSection: React.FC = () => (\n

\n Experience & Education\n

\n {portfolioData.experience.map((exp) => (\n

\n {exp.title}\n

\n \n {exp.period}\n \n

\n {exp.organization}\n

\n {exp.description}\n

\n \n {exp.type.charAt(0).toUpperCase() + exp.type.slice(1)}\n \n

\n ))}\n

\n);\n\nconst ContactForm: React.FC = () => {\n const [formData, setFormData] = useState({\n name: '',\n email: '',\n message: ''\n });\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');\n const [statusMessage, setStatusMessage] = useState('');\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsSubmitting(true);\n setSubmitStatus('idle');\n\n try {\n const response = await fetch('/api/contact', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(formData),\n });\n\n const result = await response.json();\n\n if (response.ok) {\n setSubmitStatus('success');\n setStatusMessage(result.message);\n setFormData({ name: '', email: '', message: '' });\n } else {\n setSubmitStatus('error');\n setStatusMessage(result.error || 'Failed to send message');\n }\n } catch (error) {\n setSubmitStatus('error');\n setStatusMessage('Network error. Please try again.');\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n setFormData({\n ...formData,\n [e.target.name]: e.target.value\n });\n };\n\n return (\n

\n \n Name *\n \n \n

\n \n

\n \n Email *\n \n \n

\n \n

\n \n Message *\n \n \n

\n \n \n {isSubmitting ? (\n <>\n

\n Sending...\n \n ) : (\n 'Send Message'\n )}\n \n \n {submitStatus !== 'idle' && (\n

\n {statusMessage}\n

\n )}\n \n );\n};\n\nconst ContactSection: React.FC = () => (\n

\n Get In Touch\n

\n Let's Connect!\n

\n I'm always excited to discuss AI projects, collaboration opportunities, or potential career prospects. \n Whether you're interested in my work, have a project idea, or just want to connect with a fellow AI enthusiast, \n I'd love to hear from you!\n

\n \n

\n 📧\n

\n \n {portfolioData.personal.email}\n \n

\n \n

\n 📱\n

Phone

\n \n {portfolioData.personal.phone}\n \n

\n \n

\n 📍\n

Location

{portfolioData.personal.location}

\n \n

Connect with me:

\n {portfolioData.socialLinks.map((link) => (\n \n {link.icon}\n {link.platform}\n \n ))}\n

\n \n

\n Send me a message\n

\n \n

\n);\n\nconst Footer: React.FC = () => (\n \n);\n\nconst App: React.FC = () => {\n const [darkMode, setDarkMode] = useState(false);\n\n useEffect(() => {\n // Check for saved theme preference or default to light mode\n const savedTheme = localStorage.getItem('theme');\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n \n if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n setDarkMode(true);\n document.documentElement.classList.add('dark');\n }\n }, []);\n\n const toggleDarkMode = () => {\n setDarkMode(!darkMode);\n if (!darkMode) {\n document.documentElement.classList.add('dark');\n localStorage.setItem('theme', 'dark');\n } else {\n document.documentElement.classList.remove('dark');\n localStorage.setItem('theme', 'light');\n }\n };\n\n return (\n

\n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default App;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/riyo/my_portfolio/code/frontend/components/App.tsx","extension","actionData","errors"]