Welcome to the project showcase! Here, you can explore a collection of impressive work that showcases innovative projects from different areas. Experience the outcomes of creative efforts, featuring distinct solutions that go beyond expectations and turn ideas into reality.
"Creativity is intelligence having fun." - Albert Einstein
If you're developing a Laravel application and in need of a fully functional and minimalist contact page, look no further than "abhisan/contact_with_bulma," a Laravel package that provides seamless integration with Bulma, offering an elegant and responsive contact form solution.
I created an application called "AbhiNotes" during my learning journey on LinkedIn. This Laravel-based application encompasses essential CRUD functionality. I have tailored its logo, contents, and functions to align with the distinctive style of AbhiNotes.
The application "NiuLab-crawl-YouTube-screenshots" is designed to crawl and capture screenshots from YouTube videos. It utilizes the YouTube API to fetch videos based on specific criteria and automatically captures screenshots at predefined time intervals. This application serves as a convenient tool for extracting visual content from YouTube videos for various purposes.
Dive into amazing discoveries! Our BGC STEM club blends magic, science, robots, and coding for hands-on fun. Build robots, learn cool magic tricks, and create games! Join us to explore and make STEM magic together.
This research presents a preliminary analysis of 94 YouTube videos from known U.S. hate groups, categorizing their styles and examining their diagnostic, prognostic, and motivational framing based on the collective action framework.
As a software developer and tech enthusiast, I led coding activities at the Boys & Girls Club of Worcester (BGCW) in the summer of 2024. Initially planning a Rubik's Cube club, I shifted to coding, introducing kids to Scratch, Roblox Studio, and robotics, fostering their creativity and problem-solving skills. I have highlighted the kids' dedication, sincerity, and creativity, dedicating a website to their achievements.
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive AWS Architecture Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet"> <!-- Chosen Palette: Warm Neutrals & Subtle Blues --> <!-- Application Structure Plan: A thematic, single-page dashboard. The user is introduced with a high-level interactive architecture diagram. Clicking any component reveals detailed information in a modal, encouraging exploration. Subsequent sections use cards and tabs for deep dives into Frontend, Backend, and Data/AI tiers, presenting key metrics and comparisons. This structure transforms the dense report into a non-linear, explorable experience, prioritizing user understanding over the original document's linear structure. --> <!-- Visualization & Content Choices: Report Info (Architecture) -> Goal (Organize/Explore) -> Viz (HTML/CSS Diagram) -> Interaction (Click to show modal) -> Justification (Interactive overview without clutter) -> Library (Vanilla JS). Report Info (Performance Stats) -> Goal (Compare/Inform) -> Viz (Bar/Donut Chart) -> Interaction (Hover for tooltips) -> Justification (Quick visual comparison) -> Library (Chart.js). Report Info (Security) -> Goal (Inform) -> Viz (HTML Checklist) -> Interaction (Static) -> Justification (Clear, scannable summary). Report Info (CI/CD) -> Goal (Organize) -> Viz (HTML/CSS Flowchart) -> Interaction (Static) -> Justification (Simple process visualization). --> <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> <style> body { font-family: 'Inter', sans-serif; background-color: #F8F7F4; color: #2c3e50; } .chart-container { position: relative; width: 100%; max-width: 400px; height: 300px; margin: auto; } @media (min-width: 768px) { .chart-container { height: 350px; } } .flow-line { position: absolute; background-color: #bdc3c7; z-index: 0; } .flow-node { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; cursor: pointer; } .flow-node:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } #modal-backdrop { transition: opacity 0.3s ease-in-out; } #modal-content { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } </style> </head> <body class="antialiased"> <div class="container mx-auto p-4 md:p-8"> <header class="text-center mb-16"> <h1 class="text-4xl md:text-6xl font-black text-[#2c3e50] leading-tight">Architecting a Cloud Powerhouse</h1> <p class="mt-4 text-lg text-gray-600 max-w-4xl mx-auto">An interactive dashboard exploring a high-performance, AI-powered 3D web application built on AWS. Click on any component in the diagram below to learn more.</p> </header> <section id="architecture" class="mb-20"> <h2 class="text-3xl font-bold text-center mb-10">Interactive Architecture Blueprint</h2> <div class="relative p-8 bg-white rounded-2xl shadow-lg border border-gray-200"> <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-16 items-center"> <div class="col-span-1 flex flex-col items-center"> <div id="User" data-service="User" class="flow-node z-10 w-32 text-center p-3 bg-gray-100 rounded-lg shadow"> <span class="text-3xl">👤</span> <p class="font-bold">End User</p> </div> </div> <div class="col-span-1 flex flex-col items-center text-center"> <div id="Route53" data-service="Route53" class="flow-node z-10 w-32 p-3 bg-orange-100 rounded-lg shadow"> <span class="font-bold text-orange-800">Route 53</span> <p class="text-xs text-orange-600">DNS Routing</p> </div> </div> <div class="col-span-1 flex flex-col items-center text-center"> <div id="CloudFront" data-service="CloudFront" class="flow-node z-10 w-32 p-3 bg-blue-100 rounded-lg shadow"> <span class="font-bold text-blue-800">CloudFront</span> <p class="text-xs text-blue-600">Frontend CDN</p> </div> </div> <div class="col-span-1 flex flex-col items-center text-center"> <div id="ALB" data-service="ALB" class="flow-node z-10 w-32 p-3 bg-blue-100 rounded-lg shadow"> <span class="font-bold text-blue-800">ALB & WAF</span> <p class="text-xs text-blue-600">Backend Gateway</p> </div> </div> <div class="col-span-1 md:col-start-3 flex flex-col items-center"> <div id="S3" data-service="S3" class="flow-node z-10 w-32 text-center p-3 bg-red-100 rounded-lg shadow"> <span class="font-bold text-red-800">S3 Bucket</span> <p class="text-xs text-red-600">Static 3.js Assets</p> </div> </div> <div class="col-span-2 md:col-start-4 flex flex-col items-center"> <div id="EC2" data-service="EC2" class="flow-node z-10 w-32 text-center p-3 bg-green-100 rounded-lg shadow"> <span class="font-bold text-green-800">EC2 Fleet</span> <p class="text-xs text-green-600">Laravel Octane API</p> </div> </div> <div class="col-span-2 md:col-start-1 lg:col-start-3 flex flex-col items-center"> <div id="SQS" data-service="SQS" class="flow-node z-10 w-32 p-3 bg-purple-100 rounded-lg shadow"> <span class="font-bold text-purple-800">SQS</span> <p class="text-xs text-purple-600">AI Task Queue</p> </div> </div> <div class="col-span-2 md:col-start-3 lg:col-start-4 flex flex-col items-center"> <div id="RDS" data-service="RDS" class="flow-node z-10 w-32 p-3 bg-indigo-100 rounded-lg shadow"> <span class="font-bold text-indigo-800">RDS</span> <p class="text-xs text-indigo-600">PostgreSQL DB</p> </div> </div> <div class="col-span-2 md:col-start-1 lg:col-start-3 flex flex-col items-center"> <div id="Lambda" data-service="Lambda" class="flow-node z-10 w-32 p-3 bg-yellow-100 rounded-lg shadow"> <span class="font-bold text-yellow-800">Lambda</span> <p class="text-xs text-yellow-600">AI Processor</p> </div> </div> <div class="col-span-2 md:col-start-3 lg:col-start-3 flex flex-col items-center"> <div id="Bedrock" data-service="Bedrock" class="flow-node z-10 w-32 p-3 bg-yellow-100 rounded-lg shadow"> <span class="font-bold text-yellow-800">Bedrock</span> <p class="text-xs text-yellow-600">Foundation Models</p> </div> </div> </div> </div> </section> <section id="deep-dive" class="mb-20"> <h2 class="text-3xl font-bold text-center mb-10">Technology Deep-Dive</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200"> <h3 class="text-2xl font-bold text-[#3498db]">⚡ Immersive Frontend</h3> <p class="mt-2 text-gray-600 mb-6">Delivering a fluid 3D experience requires extreme performance optimization and modern web features.</p> <div class="text-center my-8"> <div class="text-7xl font-black text-[#3498db]">60 <span class="text-4xl">FPS</span></div> <p class="text-gray-700 font-semibold">Target Frame Rate</p> <p class="text-sm text-gray-500">Achieved through geometry, texture, and render-loop optimizations.</p> </div> <h4 class="font-bold text-center mt-8 mb-2">PWA Mobile Experience</h4> <ul class="text-center text-sm space-y-1 text-gray-600"> <li>✔️ Installable on Home Screen</li> <li>✔️ Instant Loading via Caching</li> <li>✔️ Offline Functionality</li> </ul> </div> <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200"> <h3 class="text-2xl font-bold text-[#e74c3c]">🚀 High-Throughput Backend</h3> <p class="mt-2 text-gray-600 mb-6">Moving beyond traditional PHP to a high-performance, in-memory application server model.</p> <div class="chart-container"> <canvas id="backendPerfChart"></canvas> </div> <p class="text-center mt-4 text-xs text-gray-500">Laravel Octane eliminates framework bootstrapping overhead for a dramatic increase in requests per second.</p> </div> <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200"> <h3 class="text-2xl font-bold text-[#8e44ad]">🧠 Intelligent & Resilient Data</h3> <p class="mt-2 text-gray-600 mb-6">A decoupled architecture ensures AI tasks don't impact user experience, supported by a managed data tier.</p> <div class="chart-container"> <canvas id="aiServiceChart"></canvas> </div> <p class="text-center mt-4 text-xs text-gray-500">Amazon Bedrock is chosen for its simplicity and direct access to powerful foundation models without MLOps overhead.</p> </div> </div> </section> <section id="process" class="mb-20"> <h2 class="text-3xl font-bold text-center mb-10">Automation & Security</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200"> <h3 class="text-2xl font-bold text-center mb-6">Unified CI/CD Pipeline</h3> <div class="flex flex-col md:flex-row justify-around items-center space-y-4 md:space-y-0 text-center"> <div class="w-28"> <div class="p-4 bg-gray-100 rounded-full inline-block">📝</div> <p class="font-bold mt-2">Source</p> <p class="text-sm text-gray-500">GitHub</p> </div> <div class="text-2xl text-gray-400">➡️</div> <div class="w-28"> <div class="p-4 bg-gray-100 rounded-full inline-block">⚙️</div> <p class="font-bold mt-2">Build & Test</p> <p class="text-sm text-gray-500">CodeBuild</p> </div> <div class="text-2xl text-gray-400">➡️</div> <div class="w-28"> <div class="p-4 bg-gray-100 rounded-full inline-block">🚀</div> <p class="font-bold mt-2">Deploy</p> <p class="text-sm text-gray-500">CodeDeploy</p> </div> </div> <p class="mt-6 text-sm text-gray-600">A single pipeline orchestrates both frontend and backend builds and deployments, ensuring atomic and reliable releases.</p> </div> <div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-200"> <h3 class="text-2xl font-bold text-center mb-6">Security Best Practices Checklist</h3> <ul class="space-y-2 text-sm"> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>Private Subnets for App/Data Tiers</li> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>IAM Roles for Service Communication</li> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>AWS WAF on Application Load Balancer</li> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>Eloquent ORM to Prevent SQL Injection</li> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>Secrets Stored in AWS Secrets Manager</li> <li class="flex items-center"><span class="text-green-500 mr-2">✓</span>Automated Dependency Vulnerability Scanning</li> </ul> </div> </div> </section> </div> <!-- Modal --> <div id="modal-backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden opacity-0"></div> <div id="modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden"> <div id="modal-content" class="bg-white rounded-lg shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-y-auto transform scale-95 opacity-0"> <div class="p-6"> <div class="flex justify-between items-start"> <h2 id="modal-title" class="text-2xl font-bold text-[#2c3e50]"></h2> <button id="modal-close" class="text-gray-400 hover:text-gray-800 text-3xl">×</button> </div> <p id="modal-role" class="mt-1 text-sm font-semibold text-[#3498db]"></p> <p id="modal-description" class="mt-4 text-gray-700 leading-relaxed"></p> <p id="modal-justification" class="mt-4 text-sm text-gray-600 bg-gray-50 p-3 rounded-lg"></p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const serviceData = { User: { title: 'End User', role: 'The Initiator', description: 'The user interacts with the application through their browser, primarily on desktop or mobile devices. Their actions initiate all requests to the cloud infrastructure.', justification: 'The entire architecture is designed to provide a fast, responsive, and secure experience for the end-user.' }, Route53: { title: 'Amazon Route 53', role: 'DNS & Traffic Director', description: 'A highly available and scalable DNS web service. When a user navigates to the application\'s domain, Route 53 is the first point of contact. It translates the human-readable domain name into an IP address, directing browser traffic to the appropriate AWS endpoint (CloudFront for the frontend, ALB for the backend).', justification: 'Chosen for its reliability, scalability, and support for advanced routing policies (like latency-based routing) to improve global performance and resilience.' }, CloudFront: { title: 'Amazon CloudFront', role: 'Global Frontend Delivery Network', description: 'A Content Delivery Network (CDN) that caches the static frontend assets (3.js application files) at hundreds of edge locations worldwide. It serves content from the location closest to the user, dramatically reducing latency.', justification: 'Decoupling the frontend and serving it via a CDN is the most efficient way to achieve fast global load times for a static single-page application.' }, S3: { title: 'Amazon S3', role: 'Static Asset Storage', description: 'Amazon Simple Storage Service (S3) acts as the origin store for all production-ready frontend assets (HTML, CSS, JS, 3D models). The bucket is kept private, with access granted only to CloudFront.', justification: 'S3 provides highly durable (99.999999999%), scalable, and cost-effective object storage, making it the ideal choice for hosting static website assets.' }, ALB: { title: 'Application Load Balancer (ALB) & WAF', role: 'Secure Backend Gateway', description: 'The ALB is a layer 7 load balancer that distributes incoming API requests across the fleet of EC2 instances. It terminates SSL/TLS traffic and performs health checks. It is integrated with AWS WAF (Web Application Firewall) to protect against common web exploits like SQL injection and XSS.', justification: 'Essential for high availability, scalability, and security. It offloads SSL processing and provides a critical layer of defense at the application\'s edge.' }, EC2: { title: 'Amazon EC2 Auto Scaling Group', role: 'Backend Compute Engine', description: 'A fleet of virtual servers (EC2 instances) running the high-performance Laravel Octane application. These instances are located in private subnets for security and are managed by an Auto Scaling group, which automatically adjusts the number of instances based on traffic load.', justification: 'EC2 provides the necessary control to install and optimize specialized software like Swoole for Laravel Octane. It offers the best price-performance for sustained, high-traffic workloads.' }, SQS: { title: 'Amazon SQS', role: 'Asynchronous Task Queue', description: 'Amazon Simple Queue Service (SQS) is a message queue that decouples the backend from the AI processing layer. When a complex AI task is requested, the Laravel application sends a message to the SQS queue instead of processing it directly.', justification: 'This ensures the main application remains responsive. It acts as a durable buffer, improving resilience and allowing the web and AI tiers to scale independently.' }, Lambda: { title: 'AWS Lambda', role: 'Serverless AI Processor', description: 'A serverless compute service that runs code in response to triggers. In this architecture, it is triggered by new messages in the SQS queue. The Lambda function contains the logic to call the AI service and process the result.', justification: 'Lambda automatically scales with the number of incoming tasks and is cost-effective, as you pay only for the compute time consumed. It is ideal for event-driven processing.' }, Bedrock: { title: 'Amazon Bedrock', role: 'Managed AI Model Service', description: 'A fully managed service that provides access to powerful foundation models from leading AI companies through a single API. The Lambda function calls Bedrock to perform the actual generative AI tasks.', justification: 'Bedrock simplifies the integration of sophisticated AI capabilities, abstracting away the complexity of MLOps and providing access to state-of-the-art models.' }, RDS: { title: 'Amazon RDS for PostgreSQL', role: 'Managed Relational Database', description: 'A managed database service for the application\'s persistent data. It is deployed in a Multi-AZ configuration for high availability and is located in a private subnet, accessible only by the EC2 instances.', justification: 'RDS automates complex administration tasks like patching, backups, and failover, ensuring the database is durable and highly available without the operational overhead of self-management.' } }; const modal = document.getElementById('modal'); const modalBackdrop = document.getElementById('modal-backdrop'); const modalTitle = document.getElementById('modal-title'); const modalRole = document.getElementById('modal-role'); const modalDescription = document.getElementById('modal-description'); const modalJustification = document.getElementById('modal-justification'); const modalClose = document.getElementById('modal-close'); const flowNodes = document.querySelectorAll('.flow-node'); const openModal = (serviceId) => { const data = serviceData[serviceId]; if (!data) return; modalTitle.textContent = data.title; modalRole.textContent = data.role; modalDescription.textContent = data.description; modalJustification.textContent = 'Justification: ' + data.justification; modal.classList.remove('hidden'); modalBackdrop.classList.remove('hidden'); setTimeout(() => { modalBackdrop.classList.remove('opacity-0'); modal.querySelector('#modal-content').classList.remove('scale-95', 'opacity-0'); }, 10); }; const closeModal = () => { modalBackdrop.classList.add('opacity-0'); modal.querySelector('#modal-content').classList.add('scale-95', 'opacity-0'); setTimeout(() => { modal.classList.add('hidden'); modalBackdrop.classList.add('hidden'); }, 300); }; flowNodes.forEach(node => { node.addEventListener('click', () => { openModal(node.dataset.service); }); }); modalClose.addEventListener('click', closeModal); modalBackdrop.addEventListener('click', closeModal); // Chart Configs Chart.defaults.font.family = 'Inter'; Chart.defaults.color = '#6b7280'; const backendPerfCtx = document.getElementById('backendPerfChart').getContext('2d'); new Chart(backendPerfCtx, { type: 'bar', data: { labels: ['Traditional PHP-FPM', 'Laravel Octane'], datasets: [{ label: 'Requests Per Second', data: [250, 3100], backgroundColor: ['#95a5a6', '#e74c3c'], borderRadius: 4 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false }, title: { display: true, text: 'Octane Performance Boost', font: { size: 14 } } } } }); const aiServiceCtx = document.getElementById('aiServiceChart').getContext('2d'); new Chart(aiServiceCtx, { type: 'radar', data: { labels: ['Ease of Use', 'No MLOps', 'Model Access', 'Scalability', 'Control'], datasets: [{ label: 'Amazon Bedrock', data: [9, 10, 9, 10, 6], backgroundColor: 'rgba(142, 68, 173, 0.2)', borderColor: '#8e44ad', pointBackgroundColor: '#8e44ad' }, { label: 'Amazon SageMaker', data: [5, 4, 7, 8, 10], backgroundColor: 'rgba(52, 152, 219, 0.2)', borderColor: '#3498db', pointBackgroundColor: '#3498db' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'AI Service Comparison', font: { size: 14 } }, legend: { position: 'bottom' } }, scales: { r: { angleLines: { color: '#ecf0f1' }, grid: { color: '#ecf0f1' }, pointLabels: { font: { size: 10 } }, ticks: { display: false, stepSize: 2 }, suggestedMin: 0, suggestedMax: 10 } } } }); }); </script> </body> </html>