\n \n \n {uploading ? \"Uploading Photo...\" : \"Upload Profile Photo\"}\n \n

\n );\n}\n\nfunction ScrollToTop() {\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n const toggleVisibility = () => {\n if (window.pageYOffset > 300) setIsVisible(true);\n else setIsVisible(false);\n };\n\n window.addEventListener(\"scroll\", toggleVisibility);\n return () => window.removeEventListener(\"scroll\", toggleVisibility);\n }, []);\n\n return isVisible\n ? (\n window.scrollTo({ top: 0, behavior: \"smooth\" })}\n aria-label=\"Scroll to top\"\n >\n ⬆️\n \n )\n : null;\n}\n\nfunction Navigation({\n activeSection,\n isMenuOpen,\n setIsMenuOpen,\n}: {\n activeSection: string;\n isMenuOpen: boolean;\n setIsMenuOpen: (value: boolean) => void;\n}) {\n return (\n \n );\n}\n\nfunction ContactForm({\n loading,\n handleSubmit,\n formData,\n setFormData,\n}: {\n loading: boolean;\n handleSubmit: (e: React.FormEvent, deviceInfo: any) => Promise;\n formData: ContactFormData;\n setFormData: React.Dispatch>;\n}) {\n const [deviceInfo, setDeviceInfo] = useState({});\n\n useEffect(() => {\n const collectDeviceInfo = async () => {\n const info: any = {\n userAgent: navigator.userAgent || \"N/A\",\n platform: navigator.platform || \"N/A\",\n language: navigator.language || \"N/A\",\n screenResolution: (typeof window !== \"undefined\") ? `${window.screen.width}x${window.screen.height}` : \"N/A\",\n browserName: getBrowserName(),\n };\n\n if (navigator.geolocation) {\n try {\n const position = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 8000, enableHighAccuracy: false });\n });\n info.latitude = position.coords.latitude;\n info.longitude = position.coords.longitude;\n } catch (error) {\n console.log(\"Geolocation permission denied or timed out:\", error);\n }\n }\n\n if (typeof navigator !== \"undefined\" && \"getBattery\" in navigator) {\n try {\n const battery: any = await (navigator as any).getBattery();\n info.batteryLevel = `${Math.round(battery.level * 100)}%`;\n } catch (error) {\n console.log(\"Could not get battery info:\", error);\n }\n }\n\n if (typeof navigator !== \"undefined\" && \"connection\" in navigator) {\n const connection: any = (navigator as any).connection;\n info.networkType = connection.effectiveType || \"N/A\";\n }\n\n try {\n const ipResponse = await fetch(\"https://api.ipify.org?format=json\");\n if (!ipResponse.ok) throw new Error(`IPify API error: ${ipResponse.status}`);\n const ipData = await ipResponse.json();\n info.ip = ipData.ip || \"N/A\";\n } catch (error) {\n console.log(\"Could not fetch IP address from IPify:\", error);\n info.ip = \"N/A\";\n }\n\n setDeviceInfo(info);\n };\n\n if (typeof navigator !== \"undefined\") {\n collectDeviceInfo();\n }\n }, []);\n\n function getBrowserName() {\n if (typeof navigator === \"undefined\") return \"N/A (SSR)\";\n const userAgent = navigator.userAgent;\n if (userAgent.includes(\"Firefox\")) return \"Firefox\";\n if (userAgent.includes(\"Edg\")) return \"Edge\";\n if (userAgent.includes(\"Chrome\") && !userAgent.includes(\"Chromium\")) return \"Chrome\";\n if (userAgent.includes(\"Safari\") && !userAgent.includes(\"Chrome\")) return \"Safari\";\n if (userAgent.includes(\"OPR\") || userAgent.includes(\"Opera\")) return \"Opera\";\n return \"Unknown\";\n }\n\n const onSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n handleSubmit(e, deviceInfo);\n };\n\n return (\n

\n setFormData({ ...formData, name: e.target.value })}\n required\n aria-label=\"Name\"\n />\n setFormData({ ...formData, email: e.target.value })}\n required\n aria-label=\"Email\"\n />\n setFormData({ ...formData, phone: e.target.value })}\n required\n aria-label=\"Phone Number\"\n />\n setFormData({ ...formData, message: e.target.value })}\n required\n aria-label=\"Message\"\n />\n \n \n );\n}\n\nfunction ResumeUpload({ onUploadSuccess }: ResumeUploadProps) {\n const [uploading, setUploading] = useState(false);\n const handleUpload = async (e: React.ChangeEvent) => {\n if (!e.target.files?.[0]) return;\n setUploading(true);\n const file = e.target.files[0];\n const reader = new FileReader();\n reader.onloadend = async () => {\n try {\n const base64Data = reader.result as string;\n const response = await fetch(\"/upload-resume\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ resume: base64Data }),\n });\n if (response.ok) onUploadSuccess();\n else throw new Error(\"Resume upload failed on server\");\n } catch (error) {\n console.error(\"ResumeUpload error:\", error);\n alert(`Failed to upload resume: ${error instanceof Error ? error.message : String(error)}`);\n } finally {\n setUploading(false);\n }\n };\n reader.onerror = () => {\n console.error(\"FileReader error during resume upload.\");\n alert(\"Error reading file for resume upload.\");\n setUploading(false);\n };\n reader.readAsDataURL(file);\n };\n return (\n

\n \n \n {uploading ? \"Uploading Resume...\" : \"Upload Resume\"}\n \n

\n );\n}\n\nfunction App() {\n const [darkMode, setDarkMode] = useState(true);\n const [formData, setFormData] = useState({ name: \"\", email: \"\", phone: \"\", message: \"\" });\n const [loading, setLoading] = useState(false);\n const [activeSection, setActiveSection] = useState(\"about\");\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [profilePhoto, setProfilePhoto] = useState(null);\n const [showUpload, setShowUpload] = useState(true);\n const [resumeUrl, setResumeUrl] = useState(null);\n const [showResumeUpload, setShowResumeUpload] = useState(true);\n\n const placeholderImage =\n \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Crect width='220' height='220' fill='%2324243e'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Poppins, sans-serif' font-size='90' fill='%2300f2ea'%3ESH%3C/text%3E%3C/svg%3E\";\n\n useEffect(() => {\n fetch(\"/get-photo\").then(res => {\n if (!res.ok) throw new Error(`Failed to fetch photo: ${res.status}`);\n return res.json();\n })\n .then(data => {\n if (data.photo) {\n setProfilePhoto(data.photo);\n setShowUpload(false);\n } else { setShowUpload(true); }\n })\n .catch(err => {\n console.error(\"Error fetching profile photo:\", err);\n setShowUpload(true);\n });\n }, []);\n\n const handleUploadSuccess = async () => {\n try {\n const response = await fetch(\"/get-photo\");\n if (!response.ok) throw new Error(`Failed to get photo after upload: ${response.status}`);\n const data = await response.json();\n if (data.photo) {\n setProfilePhoto(data.photo);\n setShowUpload(false);\n alert(\"Profile photo updated successfully!\");\n }\n } catch (err) {\n console.error(\"Error refreshing profile photo:\", err);\n alert(\"Photo uploaded, but couldn't refresh the image. Please reload.\");\n }\n };\n\n useEffect(() => {\n fetch(\"/get-resume\").then(res => {\n if (!res.ok) throw new Error(`Failed to fetch resume: ${res.status}`);\n return res.json();\n })\n .then(data => {\n if (data.resumeUrl) {\n setResumeUrl(data.resumeUrl);\n setShowResumeUpload(false);\n } else { setShowResumeUpload(true); }\n })\n .catch(err => {\n console.error(\"Error fetching resume:\", err);\n setShowResumeUpload(true);\n });\n }, []);\n\n const handleResumeUploadSuccess = async () => {\n try {\n const response = await fetch(\"/get-resume\");\n if (!response.ok) throw new Error(`Failed to get resume after upload: ${response.status}`);\n const data = await response.json();\n if (data.resumeUrl) {\n setResumeUrl(data.resumeUrl);\n setShowResumeUpload(false);\n alert(\"Resume uploaded successfully!\");\n }\n } catch (err) {\n console.error(\"Error refreshing resume URL:\", err);\n alert(\"Resume uploaded, but couldn't update link. Please reload.\");\n }\n };\n\n useEffect(() => {\n const gridsToAnimate = [\n \".skills-grid\",\n \".education-grid\",\n \".certifications-grid\",\n \".projects-grid\",\n \".languages-grid\",\n \".activities-list\",\n \".hobbies-list\",\n ];\n gridsToAnimate.forEach(gridSelector => {\n const gridElement = document.querySelector(gridSelector);\n if (gridElement) {\n const cards = Array.from(gridElement.children);\n cards.forEach((card, index) => {\n if (card instanceof HTMLElement) card.style.setProperty(\"--card-index\", (index + 1).toString());\n });\n }\n });\n }, []);\n\n const experiences: Experience[] = [\n {\n title: \"Student Intern - Cybersecurity\",\n company: \"Corizo Virtual\",\n period: \"02/2023 - 04/2023\",\n description: [\n \"Conducted security assessments and vulnerability scanning.\",\n \"Participated in threat detection and incident response simulations.\",\n \"Researched emerging cybersecurity threats and mitigation techniques.\",\n \"Collaborated on developing security awareness materials.\",\n ],\n },\n {\n title: \"Python (AI/ML) Intern\",\n company: \"MSR EDUSOFT\",\n period: \"11/2022 - 03/2023\",\n description: [\n \"Developed and trained machine learning models for predictive analytics.\",\n \"Assisted in designing AI-driven solutions for security applications.\",\n \"Performed data preprocessing, analysis, and visualization tasks.\",\n \"Contributed to team-based AI projects and code reviews.\",\n ],\n },\n ];\n const skills: Skill[] = [\n {\n name: \"Python\",\n icon: \"🐍\",\n proficiency: 90,\n description: \"Advanced scripting, automation, security tools, AI/ML libraries (Scikit-learn, TensorFlow)\",\n },\n {\n name: \"Ethical Hacking\",\n icon: \"🔒\",\n proficiency: 85,\n description: \"Penetration testing (web, network), vulnerability assessment, Metasploit, Burp Suite\",\n },\n {\n name: \"Cybersecurity\",\n icon: \"🛡️\",\n proficiency: 88,\n description: \"Network security, threat analysis, SIEM, incident response, cryptography basics\",\n },\n {\n name: \"Oracle SQL\",\n icon: \"💾\",\n proficiency: 80,\n description: \"Database design, querying, PL/SQL, security best practices\",\n },\n {\n name: \"JavaScript\",\n icon: \"⚡\",\n proficiency: 80,\n description: \"Modern JS (ES6+), React basics, Node.js basics, DOM manipulation\",\n },\n {\n name: \"Java\",\n icon: \"☕\",\n proficiency: 80,\n description: \"Object-oriented programming, Spring Boot basics, Android development basics\",\n },\n {\n name: \"Linux\",\n icon: \"🐧\",\n proficiency: 85,\n description: \"Shell scripting (Bash), system administration, security hardening, Kali Linux\",\n },\n { name: \"HTML5\", icon: \"🌐\", proficiency: 95, description: \"Semantic HTML, accessibility, modern web structures\" },\n {\n name: \"CSS3\",\n icon: \"🎨\",\n proficiency: 90,\n description: \"Responsive design, Flexbox, Grid, animations, preprocessors (Sass basics)\",\n },\n {\n name: \"C/C++\",\n icon: \"⚙️\",\n proficiency: 75,\n description: \"Low-level programming, system programming concepts, data structures\",\n },\n { name: \"MySQL\", icon: \"🗄️\", proficiency: 85, description: \"Relational database management, query optimization\" },\n {\n name: \"Git & GitHub\",\n icon: \"🛠️\",\n proficiency: 90,\n description: \"Version control, branching, merging, collaborative development\",\n },\n {\n name: \"Docker\",\n icon: \"🐳\",\n proficiency: 70,\n description: \"Containerization basics, Docker Compose, image creation\",\n },\n {\n name: \"Cloud (AWS Basics)\",\n icon: \"☁️\",\n proficiency: 65,\n description: \"EC2, S3, IAM fundamentals, basic cloud security concepts\",\n },\n {\n name: \"Networking\",\n icon: \"🔗\",\n proficiency: 80,\n description: \"TCP/IP, DNS, DHCP, firewalls, VPNs, network protocols\",\n },\n ];\n const education: Education[] = [\n {\n degree: \"Master of Computer Applications (MCA)\",\n institution: \"Dayananda Sagar Academy of Technology and Management (DSATM)\",\n period: \"2023 - 2025\",\n description:\n \"Specializing in Advanced Cybersecurity, AI in Security, and Cloud Computing. Actively involved in research projects and technical fests.\",\n },\n {\n degree: \"B.Com (Computer Applications)\",\n institution: \"LRG Naidu Government Degree College\",\n period: \"2020 - 2023\",\n description:\n \"Focused on computer applications in business, database management, and web technologies. Graduated with 66.89%.\",\n },\n {\n degree: \"Intermediate (CEC)\",\n institution: \"LRG Naidu Junior College\",\n period: \"2018 - 2020\",\n description: \"Specialized in Civics, Economics, and Commerce. Achieved a CGPA of 7.40.\",\n },\n {\n degree: \"SSC (Secondary School Certificate)\",\n institution: \"Mother EM High School\",\n period: \"2017 - 2018\",\n description: \"Completed secondary education with a CGPA of 8.5.\",\n },\n ];\n const certifications: Certification[] = [\n { title: \"CompTIA Security+ (SY0-601)\", organization: \"Cybrary (In Progress)\", icon: \"🛡️\" },\n { title: \"IBM Cybersecurity Analyst Professional Certificate\", organization: \"IBM (Coursera)\", icon: \"🔐\" },\n { title: \"Full Stack Java Developer\", organization: \"Capgemini (TNSIF Program)\", icon: \"☕\" },\n { title: \"Microsoft Technology Associate (MTA): Security Fundamentals\", organization: \"Microsoft\", icon: \"🏆\" },\n { title: \"Ethical Hacking Essentials (EHE)\", organization: \"EC-Council (CodeRed)\", icon: \"🔑\" },\n { title: \"Python for AI/ML\", organization: \"MSR EDUSOFT PVT.LTD\", icon: \"🐍\" },\n { title: \"Cybersecurity Essentials\", organization: \"Cisco Networking Academy\", icon: \"🌐\" },\n { title: \"Cybersecurity Virtual Internship\", organization: \"Palo Alto Networks\", icon: \"🔒\" },\n { title: \"Introduction to SQL\", organization: \"Simplilearn\", icon: \"💾\" },\n {\n title: \"Oracle Database SQL Certified Associate\",\n organization: \"Oracle University (via Success Software Academy)\",\n icon: \"📊\",\n },\n ];\n const languagesData: Language[] = [\n { name: \"Telugu\", level: \"Native\", proficiency: 100 },\n { name: \"Kannada\", level: \"Native\", proficiency: 100 },\n { name: \"English\", level: \"Fluent\", proficiency: 95 },\n { name: \"Hindi\", level: \"Proficient\", proficiency: 85 },\n ];\n\n const handleSubmit = async (e: React.FormEvent, deviceInfo: any) => {\n e.preventDefault();\n setLoading(true);\n try {\n const response = await fetch(\"/submit\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ ...formData, deviceInfo }),\n });\n const data = await response.json();\n if (response.ok) {\n alert(\"Message sent successfully! I'll get back to you soon.\");\n setFormData({ name: \"\", email: \"\", phone: \"\", message: \"\" });\n }\n else { throw new Error(data.error || `Failed to send message. Status: ${response.status}`); }\n } catch (error) {\n alert(`Error: ${error instanceof Error ? error.message : String(error)}`);\n }\n finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) setActiveSection(entry.target.id);\n });\n },\n { threshold: 0.4, rootMargin: \"-50px 0px -50px 0px\" },\n );\n document.querySelectorAll(\"section[id]\").forEach((section) => observer.observe(section));\n return () => {\n document.querySelectorAll(\"section[id]\").forEach((section) => observer.unobserve(section));\n observer.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (darkMode) document.documentElement.classList.add(\"dark-mode-active\");\n else document.documentElement.classList.remove(\"dark-mode-active\");\n }, [darkMode]);\n\n return (\n

\n \n setIsMenuOpen(!isMenuOpen)}\n aria-label=\"Toggle menu\"\n aria-expanded={isMenuOpen}\n >\n {isMenuOpen ? \"✕\" : \"☰\"}\n \n \n

K S Sreehari Sharma

\n \n

\n \n {showUpload && }\n

About Me

\n Hello! I'm K S Sreehari Sharma, a dedicated Master of Computer Applications student with a fervent\n passion for cybersecurity and ethical hacking. My journey is fueled by a relentless curiosity for\n emerging technologies and a drive to tackle complex challenges in the digital security landscape. I'm\n committed to continuous learning and aspire to contribute innovative solutions to safeguard\n information systems.\n

\n Bangalore, India\n

\n Open to Internships & Opportunities\n

\n MCA (Cybersecurity Focus)\n

\n Multilingual Professional\n

\n sreeharisharma087@gmail.com\n

\n +91 6361619336\n

\n {showResumeUpload && }\n {resumeUrl && (\n \n Download Resume\n \n )}\n

Professional Experience

\n {experiences.map((exp, index) => (\n

{exp.period}

{exp.title}

\n {exp.company}\n

{desc}

\n ))}\n

Skills & Expertise

\n {skills.map((skill, index) => (\n

\n {skill.icon}\n

{skill.name}

{skill.description}

\n \n

\n ))}\n

\n \n

Education

\n {education.map((edu, index) => (\n \n

{edu.degree}

\n {edu.institution}\n

\n {edu.period}\n

\n {edu.description &&

{edu.description}

}\n

\n ))}\n

\n \n

Certifications

\n {certifications.map((cert, index) => (\n \n {cert.icon}\n

{cert.title}

\n {cert.organization}\n

\n ))}\n

\n \n

Languages

\n {languagesData.map((language, index) => (\n

{language.name}

{language.level}

\n \n

\n ))}\n

\n \n

Projects

\n {[{\n name: \"PersonalVault\",\n desc:\n \"A secure desktop application using AES-256 encryption to store personal and sensitive information locally.\",\n icon: \"🛡️\",\n }, {\n name: \"MAYA AI Assistant\",\n desc:\n \"A Python-based AI assistant leveraging NLP for task automation, information retrieval, and voice commands.\",\n icon: \"🤖\",\n }, {\n name: \"Portfolio Website (This one!)\",\n desc:\n \"Dynamic personal portfolio built with React, TypeScript, and Val Town backend, featuring Telegram integration.\",\n icon: \"🌐\",\n }, {\n name: \"AiCyberScan Tool\",\n desc:\n \"An innovative cybersecurity tool for vulnerability scanning & threat detection. Won 1st place in RMDT (Research) competition.\",\n icon: \"🔍\",\n }, {\n name: \"Gemini API Telegram Chatbot\",\n desc:\n \"A Telegram chatbot integrated with Google's Gemini API for interactive Q&A and task explanations.\",\n icon: \"💬\",\n }, {\n name: \"Network Intrusion Detection System\",\n desc:\n \"A Python-based NIDS using machine learning (Scikit-learn) to identify anomalous network traffic patterns.\",\n icon: \"🚦\",\n }].map((project, index) => (\n

{project.icon} {project.name}

{project.desc}

\n ))}\n

Extra-Curricular & Leadership

\n {\" \"}\n Main Coordinator, Inter-College Technical Fest \"Supratek\" at DSATM. Led a team to organize multiple\n events.\n
\n {\" \"}\n Freelance Web Developer: Designed and developed responsive websites for small businesses.\n
\n {\" \"}\n Founder of SkillSculptor: An initiative for an online course platform.\n Visit Site\n \n
\n {\" \"}\n Active Member, College Cybersecurity Club: Participate in CTFs, workshops, and security discussions.\n

Hobbies & Interests

{hobby}

Contact Me

\n I'm always open to discussing new projects, creative ideas, or opportunities to be part of something\n great. Feel free to reach out!\n

\n \n

\n \n \n \n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render(\n \n \n ,\n );\n } else {\n console.error(\"Root element not found for React application.\");\n }\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n console.log(`[SERVER START] Request: ${req.method} ${req.url}`);\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n console.log(\"[SERVER LOG] SQLite module imported successfully.\");\n\n const KEY = \"sreehari_portfolio_v4\";\n const SCHEMA_VERSION = 1;\n\n console.log(`[SERVER LOG] Using SQLite KEY: ${KEY}, SCHEMA_VERSION: ${SCHEMA_VERSION}`);\n\n try {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_photos_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n photo TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n // console.log(`[SERVER DB] Table ${KEY}_photos_${SCHEMA_VERSION} checked/created.`);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_resume_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n resume TEXT NOT NULL, \n filename TEXT,\n mimetype TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n // console.log(`[SERVER DB] Table ${KEY}_resume_${SCHEMA_VERSION} checked/created.`);\n } catch (dbError: any) {\n console.error(\"[SERVER CRITICAL DB] Error during table creation:\", dbError);\n throw new Error(`Database table initialization failed: ${dbError.message}`);\n }\n\n const requestUrl = new URL(req.url);\n const pathname = requestUrl.pathname;\n\n const commonResponseHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n \"X-Content-Type-Options\": \"nosniff\",\n \"X-Frame-Options\": \"SAMEORIGIN\",\n \"X-XSS-Protection\": \"1; mode=block\",\n \"Referrer-Policy\": \"strict-origin-when-cross-origin\",\n };\n const jsonContentType = { \"Content-Type\": \"application/json\" };\n\n if (req.method === \"OPTIONS\") {\n // console.log(\"[SERVER CORS] Handling OPTIONS preflight request.\");\n return new Response(null, {\n status: 204,\n headers: commonResponseHeaders,\n });\n }\n\n if (req.method === \"POST\" && pathname === \"/upload-photo\") {\n const { photo } = await req.json();\n await sqlite.execute(`INSERT INTO ${KEY}_photos_${SCHEMA_VERSION} (photo) VALUES (?)`, [photo]);\n return new Response(JSON.stringify({ success: true }), {\n headers: { ...commonResponseHeaders, ...jsonContentType },\n });\n }\n if (req.method === \"GET\" && pathname === \"/get-photo\") {\n const result = await sqlite.execute(\n `SELECT photo FROM ${KEY}_photos_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 1`,\n );\n return new Response(JSON.stringify({ photo: result.rows[0]?.photo || null }), {\n headers: { ...commonResponseHeaders, ...jsonContentType },\n });\n }\n if (req.method === \"POST\" && pathname === \"/upload-resume\") {\n const { resume } = await req.json();\n const filename = \"resume.pdf\";\n const mimetype = resume.substring(resume.indexOf(\":\") + 1, resume.indexOf(\";\")) || \"application/octet-stream\";\n await sqlite.execute(\n `INSERT INTO ${KEY}_resume_${SCHEMA_VERSION} (resume, filename, mimetype) VALUES (?, ?, ?)`,\n [resume, filename, mimetype],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { ...commonResponseHeaders, ...jsonContentType },\n });\n }\n if (req.method === \"GET\" && pathname === \"/get-resume\") {\n const result = await sqlite.execute(\n `SELECT resume FROM ${KEY}_resume_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 1`,\n );\n return new Response(JSON.stringify({ resumeUrl: result.rows[0]?.resume || null }), {\n headers: { ...commonResponseHeaders, ...jsonContentType },\n });\n }\n if (req.method === \"POST\" && pathname === \"/submit\") {\n const data = await req.json();\n if (!data.name || !data.email || !data.phone || !data.message || !data.deviceInfo) {\n console.warn(\"[SERVER API] /submit - Missing required fields in request body:\", data);\n return new Response(\n JSON.stringify({ error: \"Missing required fields\" }),\n { status: 400, headers: { ...commonResponseHeaders, ...jsonContentType } },\n );\n }\n\n let locationInfo: any = { status: \"N/A\" };\n if (data.deviceInfo.ip && data.deviceInfo.ip !== \"N/A\") {\n try {\n const locationResponse = await fetch(`https://ip-api.com/json/${data.deviceInfo.ip}`);\n if (locationResponse.ok) locationInfo = await locationResponse.json();\n else locationInfo.error = `ip-api.com status: ${locationResponse.status}`;\n } catch (locError: any) {\n locationInfo.error = locError.message;\n }\n }\n\n const securityInfo = await getSecurityInfo(data.deviceInfo.ip);\n const timestamp = new Intl.DateTimeFormat(\"en-GB\", {\n dateStyle: \"medium\",\n timeStyle: \"long\",\n timeZone: locationInfo.timezone || \"UTC\",\n hour12: false,\n }).format(new Date());\n\n function escapeHtml(text: string | number | undefined | null): string {\n if (text === undefined || text === null) return \"N/A\";\n const htmlEntities: { [key: string]: string } = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n \"\\\"\": \""\",\n \"'\": \"'\",\n };\n return String(text).replace(/[&<>\"']/g, (char: string) => htmlEntities[char as keyof typeof htmlEntities]);\n }\n\n const message = `\n🚨 New Contact Form Submission 🚨\n👤 Contact Information:\n • Name: ${escapeHtml(data.name)}\n • Email: ${escapeHtml(data.email)}\n • Phone: ${escapeHtml(data.phone)}\n📝 Message:\n

${escapeHtml(data.message)}

\n📱 Device & Browser Details:\n • Browser: ${escapeHtml(data.deviceInfo.browserName)} (${\n escapeHtml(data.deviceInfo.userAgent?.substring(0, 100))\n }...)\n • Platform: ${escapeHtml(data.deviceInfo.platform)}\n • Screen: ${escapeHtml(data.deviceInfo.screenResolution)}\n • Language: ${escapeHtml(data.deviceInfo.language)}\n • Battery: ${escapeHtml(data.deviceInfo.batteryLevel)}\n • Network: ${escapeHtml(data.deviceInfo.networkType)}\n🌍 Location (Approximate):\n • IP Address: ${escapeHtml(data.deviceInfo.ip)}\n • City: ${escapeHtml(locationInfo.city)}\n • Region: ${escapeHtml(locationInfo.regionName)}\n • Country: ${escapeHtml(locationInfo.country)} (${escapeHtml(locationInfo.countryCode)})\n • ISP: ${escapeHtml(locationInfo.isp)}\n • Org: ${escapeHtml(locationInfo.org)}\n • Coordinates: Lat: ${escapeHtml(data.deviceInfo.latitude)}, Lon: ${\n escapeHtml(data.deviceInfo.longitude)\n } (If provided)\n🔒 Security Intel (IP API):\n • VPN/Proxy/Hosting: ${securityInfo.vpn ? \"⚠️ Detected\" : \"✅ Not Detected\"}\n • Threat Score (Heuristic): ${securityInfo.threatScore}/100\n • Country (IP Source): ${escapeHtml(securityInfo.country)}\n • Region (IP Source): ${escapeHtml(securityInfo.region)}\n • City (IP Source): ${escapeHtml(securityInfo.city)}\n • ISP (IP Source): ${escapeHtml(securityInfo.isp)}\n🕒 Submission Time:\n • Timestamp: ${escapeHtml(timestamp)}\n • Timezone: ${escapeHtml(locationInfo.timezone || \"UTC\")}\n`;\n const telegramBotToken = \"6371517928:AAHdut4c9BMJG7ovw8T6RWWRSP9oCDphcG0\";\n const telegramChatId = \"5269480673\";\n const telegramResponse = await fetch(`https://api.telegram.org/bot${telegramBotToken}/sendMessage`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ chat_id: telegramChatId, text: message, parse_mode: \"HTML\" }),\n });\n if (!telegramResponse.ok) {\n const errorData = await telegramResponse.json();\n throw new Error(`Telegram API error: ${errorData.description || \"Unknown error\"}`);\n }\n\n return new Response(JSON.stringify({ success: true }), {\n status: 200,\n headers: { ...commonResponseHeaders, ...jsonContentType },\n });\n }\n\n async function getSecurityInfo(ip: string) {\n if (!ip || ip === \"N/A\")\n return { vpn: false, proxy: false, threatScore: 0, country: \"N/A\", region: \"N/A\", city: \"N/A\", isp: \"N/A\" };\n try {\n const response = await fetch(`https://ipapi.co/${ip}/json/`);\n if (!response.ok)\n return { vpn: false, proxy: false, threatScore: 0, country: \"N/A\", region: \"N/A\", city: \"N/A\", isp: \"N/A\" };\n const data = await response.json();\n const org = data.org?.toLowerCase() || \"\";\n const isVpnOrProxy = org.includes(\"vpn\") || org.includes(\"proxy\") || org.includes(\"hosting\")\n || org.includes(\"relay\") || data.security?.vpn || data.security?.proxy || data.security?.tor\n || data.security?.relay;\n let threatScore = 0;\n if (isVpnOrProxy) threatScore = 50;\n return {\n vpn: !!isVpnOrProxy,\n proxy: org.includes(\"proxy\"),\n threatScore,\n country: data.country_name || \"N/A\",\n region: data.region || \"N/A\",\n city: data.city || \"N/A\",\n isp: data.org || \"N/A\",\n };\n } catch (e) {\n return { vpn: false, proxy: false, threatScore: 0, country: \"N/A\", region: \"N/A\", city: \"N/A\", isp: \"N/A\" };\n }\n }\n\n console.log(\"[SERVER LOG] Attempting to serve HTML page.\");\n\n const externalCssUrl = \"https://sreehari-root.github.io/portfolio-assets/portfolio_styles.css\";\n\n const html = `\n \n \n \n K S Sreehari Sharma - Cybersecurity Portfolio\n \n \n \n \n \n 🛡️\">\n \n \n \n \n \n \n \n

\n \n \n \n `;\n // console.log(\"[SERVER LOG] HTML page generated. Sending response with external CSS URL:\", externalCssUrl);\n\n const updatedCSP =\n \"default-src 'self' https://esm.sh https://cdnjs.cloudflare.com https://fonts.googleapis.com https://fonts.gstatic.com https://sreehari-root.github.io; \\\nstyle-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com https://sreehari-root.github.io; \\\nscript-src 'self' 'unsafe-inline' https://esm.sh https://esm.town; \\\nimg-src 'self' data:; \\\nfont-src 'self' https://cdnjs.cloudflare.com https://fonts.gstatic.com; \\\nconnect-src 'self' https://api.ipify.org https://ip-api.com https://ipapi.co https://api.telegram.org *.val.run; \\\nframe-ancestors 'none'; \\\nobject-src 'none'; \\\nbase-uri 'self';\";\n\n return new Response(html, {\n status: 200,\n headers: {\n ...commonResponseHeaders,\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Content-Security-Policy\": updatedCSP,\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\",\n },\n });\n } catch (e: any) {\n console.error(\"[SERVER CRITICAL ERROR] Unhandled exception in server function:\", e.message, e.stack);\n return new Response(\n `Internal Server Error: ${e.message}\\n\\nPlease check the Val Town logs for more details. A critical error occurred.`,\n {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" },\n },\n );\n }\n}\n// this code is correct and working in val.town but css and animations and colors are not applied\n// so check the css file and give me the updated code\n// and make the website more atractive\n// https://gist.github.com/sreehari-root/c85cc727706556a7cba58425f461f01f","deleted","label","sree",[98],"permalink","https://www.val.town/x/sharma/sree1/code/main.tsx","extension","actionData","errors"]