Hugging Face's logo

Spaces:
Sasmitha59
/
codecircuit-cortex
Running

App Files Community
codecircuit-cortex / index.html
Sasmitha59's picture
Sasmitha59
🌐 Prompt: Create a Super-Stylish Official Website for Sasmitha Kaushan
475ae38 verified
Raw History Blame Contribute Delete
11.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RoboPortfolio | Robotics & Programming Expert</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="font-sans">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12 max-w-6xl">
<!-- Hero Section -->
<section class="hero-section mb-20 text-center relative overflow-hidden py-20">
<div class="absolute inset-0 overflow-hidden">
<div class="particles absolute inset-0"></div>
</div>
<div class="hero-content relative z-10">
<div class="flex justify-center mb-6">
<div class="w-40 h-40 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 p-1 animate-float">
<img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full rounded-full object-cover border-4 border-white">
</div>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-4 font-orbitron bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-600">
Hi, I'm <span class="text-white">Sasmitha Kaushan</span>
</h1>
<h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-300">
Robotics & Programming Expert | Innovator | Tech Visionary
</h2>
<p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
"Engineering the Future, One Line of Code at a Time"
</p>
<a href="#projects" class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-full hover:shadow-lg transition-all duration-300 hover:scale-105">
Explore My Work
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
</a>
</section>
<!-- Latest Achievement -->
<section class="mb-20 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/10 to-indigo-900/10 rounded-3xl -z-10"></div>
<div class="flex items-center mb-8">
<div class="relative">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg blur opacity-75 animate-pulse"></div>
<h2 class="relative text-3xl font-bold bg-gray-900 px-4 py-2 rounded-lg text-white font-orbitron">
LATEST ACHIEVEMENT
</h2>
</div>
</div>
<achievement-card
title="PIXEL TO POTENTIAL Competition - First Place Winner"
description="Sasmitha Kaushan secured 1st place in the prestigious PIXEL TO POTENTIAL digital innovation challenge, showcasing exceptional creativity and technical mastery."
date="2024">
</achievement-card>
</section>
<!-- Achievements -->
<section class="mb-20">
<div class="flex items-center mb-8">
<i data-feather="award" class="mr-3 text-indigo-600"></i>
<h2 class="text-3xl font-bold">🏆 Other Achievements</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<achievement-card
title="FIRST Robotics World Championship"
description="Led software team to develop autonomous navigation system that placed in top 1% of international competitors."
date="Finalist | 2023">
</achievement-card>
<achievement-card
title="IEEE Hardware Competition"
description="Designed embedded control system for autonomous robot that outperformed 50+ university teams."
date="1st Place | 2022">
</achievement-card>
</div>
</section>
<!-- Skills -->
<section class="mb-20">
<div class="flex items-center mb-8">
<i data-feather="code" class="mr-3 text-indigo-600"></i>
<h2 class="text-3xl font-bold">🛠️ Technical Skills</h2>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100">
<h3 class="font-semibold text-lg mb-3">Embedded Systems</h3>
<ul class="space-y-2">
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> ARM Cortex-M</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> RTOS (FreeRTOS, Zephyr)</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> PCB Design</li>
</ul>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100">
<h3 class="font-semibold text-lg mb-3">Software</h3>
<ul class="space-y-2">
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> Python (ML/DL)</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> C/C++</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> ROS/ROS2</li>
</ul>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100">
<h3 class="font-semibold text-lg mb-3">AI/ML</h3>
<ul class="space-y-2">
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> Computer Vision</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> Reinforcement Learning</li>
<li class="flex items-center"><i data-feather="check" class="mr-2 text-green-500 w-4 h-4"></i> Edge AI Deployment</li>
</ul>
</div>
</div>
</section>
<!-- Certificates -->
<section class="mb-20">
<div class="flex items-center mb-8">
<i data-feather="file-text" class="mr-3 text-indigo-600"></i>
<h2 class="text-3xl font-bold">📜 Certifications</h2>
</div>
<div class="space-y-4">
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 flex items-start">
<div class="bg-indigo-100 p-3 rounded-lg mr-4">
<i data-feather="cpu" class="text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg">NVIDIA Jetson AI Specialist</h3>
<p class="text-gray-600">Issued: 2023 | Credential ID: NV-42X7B9</p>
</div>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 flex items-start">
<div class="bg-indigo-100 p-3 rounded-lg mr-4">
<i data-feather="brain" class="text-indigo-600"></i>
</div>
<div>
<h3 class="font-semibold text-lg">TensorFlow Developer Certificate</h3>
<p class="text-gray-600">Issued: 2022 | Credential ID: TF-88A2C4</p>
</div>
</div>
</div>
</section>
<!-- Blog Preview -->
<section class="mb-20">
<div class="flex items-center mb-8">
<i data-feather="edit-3" class="mr-3 text-indigo-600"></i>
<h2 class="text-3xl font-bold">✍️ Latest Articles</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<article class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<h3 class="text-xl font-semibold mb-2">Optimizing ROS2 for Embedded Systems</h3>
<p class="text-gray-600 mb-3">Published: May 2023</p>
<p class="text-gray-700 mb-4">Techniques for reducing latency and memory footprint when running ROS2 on resource-constrained hardware...</p>
<a href="#" class="text-indigo-600 font-medium inline-flex items-center">Read more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
</article>
<article class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<h3 class="text-xl font-semibold mb-2">Edge AI for Robotics: Case Study</h3>
<p class="text-gray-600 mb-3">Published: March 2023</p>
<p class="text-gray-700 mb-4">How we deployed TensorFlow Lite models on STM32 microcontrollers for real-time object detection...</p>
<a href="#" class="text-indigo-600 font-medium inline-flex items-center">Read more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
</article>
</div>
</section>
<!-- Contact -->
<section>
<div class="flex items-center mb-8">
<i data-feather="mail" class="mr-3 text-indigo-600"></i>
<h2 class="text-3xl font-bold">📨 Get In Touch</h2>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 max-w-2xl mx-auto">
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb
<script src="components/achievement-card.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
</body>
</html>