[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "@/app/globals.css" import { ThemeProvider } from "@/components/theme-provider" import type { Metadata } from "next" export const metadata: Metadata = { title: "Shakil Rana - Machine Learning Engineer", description: "Portfolio of Shakil Rana, Machine Learning Engineer specializing in AI, deep learning, and data science.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for responsive design */ @media (max-width: 640px) { .container { @apply px-4; } } /* Smooth transitions */ .transition-all { transition-duration: 300ms; } /* Improved card hover effects */ .card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* Improved tab styles */ .tabs-list { scrollbar-width: none; } .tabs-list::-webkit-scrollbar { display: none; } /* Animation utilities */ .animate-in { animation-duration: 0.3s; animation-timing-function: ease-out; animation-fill-mode: both; } .fade-in-10 { animation-name: fadeIn; animation-duration: 0.5s; } .fade-in-20 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.1s; } .fade-in-30 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.2s; } .fade-in-40 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.3s; } .fade-in-50 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.4s; } .fade-in-60 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.5s; } .fade-in-70 { animation-name: fadeIn; animation-duration: 0.5s; animation-delay: 0.6s; } .slide-in-from-bottom-5 { animation-name: slideInFromBottom; animation-duration: 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInFromBottom { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } [V0_FILE]typescriptreact:file="app/api/upload/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { writeFile } from "fs/promises" import { join } from "path" import { mkdir } from "fs/promises" export async function POST(request: NextRequest) { const formData = await request.formData() const file = formData.get("file") as File if (!file) { return NextResponse.json({ error: "No file uploaded" }, { status: 400 }) } const bytes = await file.arrayBuffer() const buffer = Buffer.from(bytes) // Create the public/uploads directory if it doesn't exist const uploadDir = join(process.cwd(), "public/uploads") try { // Ensure the directory exists try { await mkdir(uploadDir, { recursive: true }) } catch (error) { // Directory might already exist, continue } // Generate a unique filename to avoid conflicts const fileExtension = file.name.split(".").pop() const uniqueFilename = `profile-${Date.now()}.${fileExtension}` // Save the file const filePath = join(uploadDir, uniqueFilename) await writeFile(filePath, buffer) return NextResponse.json({ message: "File uploaded successfully", url: `/uploads/${uniqueFilename}`, }) } catch (error) { console.error("Error saving file:", error) return NextResponse.json({ error: "Failed to save file" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/upload-button.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Upload } from "lucide-react" import { motion } from "@/components/motion" export function UploadButton() { const [isUploading, setIsUploading] = useState(false) const [uploadSuccess, setUploadSuccess] = useState(false) const handleUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return setIsUploading(true) setUploadSuccess(false) try { const formData = new FormData() formData.append("file", file) const response = await fetch("/api/upload", { method: "POST", body: formData, }) if (!response.ok) { throw new Error("Upload failed") } const data = await response.json() // Update the profile image with the new URL const profileImg = document.getElementById("profile-image") as HTMLImageElement if (profileImg) { profileImg.src = data.url } setUploadSuccess(true) // Hide success message after 3 seconds setTimeout(() => { setUploadSuccess(false) }, 3000) } catch (error) { console.error("Error uploading file:", error) } finally { setIsUploading(false) } } return (

{isUploading && (

)} {uploadSuccess && ( Image updated successfully! )}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/motion.tsx" isMerged="true" "use client" import { type HTMLMotionProps, motion as framerMotion } from "framer-motion" type MotionProps = HTMLMotionProps<"div"> export const motion = { div: (props: MotionProps) => , span: (props: HTMLMotionProps<"span">) => , h1: (props: HTMLMotionProps<"h1">) => , h2: (props: HTMLMotionProps<"h2">) => , h3: (props: HTMLMotionProps<"h3">) => , p: (props: HTMLMotionProps<"p">) => , button: (props: HTMLMotionProps<"button">) => , a: (props: HTMLMotionProps<"a">) => , ul: (props: HTMLMotionProps<"ul">) => , li: (props: HTMLMotionProps<"li">) => , section: (props: HTMLMotionProps<"section">) => , } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]json:file="package.json" isMerged="true" { "name": "portfolio", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.284.0", "next": "14.0.0", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.7", "fs": "0.0.1-security", "path": "0.12.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", "eslint": "^8", "eslint-config-next": "14.0.0", "postcss": "^8", "tailwindcss": "^3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="public/uploads/profile-image.tsx" isMerged="true" // This file is just to ensure the uploads directory exists // The actual image is loaded from the URL provided export {} [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { Github, Linkedin, Mail, FileText, ExternalLink, Menu, X, Phone, MapPin, Award } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { UploadButton } from "@/components/upload-button" import { useState, useEffect } from "react" import { motion } from "@/components/motion" import { cn } from "@/lib/utils" export default function Portfolio() { const [activeTab, setActiveTab] = useState("experience") const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

{/* Header */}

Shakil Rana

{/* Desktop Navigation */} {/* Mobile Menu Button */}

{/* Mobile Menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)} >

GitHub

setMobileMenuOpen(false)} >

)}

{/* Hero Section */}

Shakil Rana ML Engineer & AI Researcher | Medical Imaging | Sports Analytics ML Engineer at KodeEnd IT Solutions with expertise in building AI-driven solutions for sports analytics and healthcare. Researcher specializing in medical imaging, explainable AI, and deep learning. Published author with 6 peer-reviewed papers in top-tier journals and conferences.

{/* Main Content */}

Experience Projects Research Skills Education

{/* Experience Tab */}

Work Experience

ML Engineer KodeEnd IT Solutions AB (Bangladesh Office)

September 2024 - Present

Built ML pipelines for sports analytics platform integrating real-time API data to predict match outcomes and player statistics
Developed Tellecto AI using Deepgram + OpenAI for accurate call transcription and automated insights
Created company chatbot with LangChain + RAG, deployed via Django API for internal knowledge-based Q&A
Automated workflows with Deepnote and optimized large-scale datasets in MongoDB/Airtable for full ML lifecycle
Tech Stack: Python, TensorFlow, Scikit-learn, Deepnote, MongoDB, Airtable, Django, LangChain, RAG

ML Researcher DIU Health Informatics Research Laboratory (HIRL)

August 2022 - September 2024

Designed and implemented CNN and GNN models for multi-modal medical imaging improving diagnostic accuracy
Built pipelines for preprocessing, feature extraction, and ensemble learning for classification tasks
Optimized NLP and computer vision models using TensorFlow and PyTorch, reducing error rates in medical workflows
Applied XAI (Explainable AI) techniques for transparency in AI-assisted healthcare
Collaborated on multiple peer-reviewed publications in journals and international conferences

ML Engineer (Intern) Mentorness, India

January 2025 - February 2025

Contributed to supervised learning pipelines and model evaluation
Worked on real-world ML projects applying industry best practices

{/* Projects Tab */}

Projects

{[ { title: "Skin Cancer Detection", desc: "Django-based deployment", content: "CNN-based image classification system with image preprocessing and ML integration, deployed on Django for real-time usage.", github: "https://github.com/Shakil526563/Skin-cancer-detection", }, { title: "Multilingual RAG System", desc: "English & Bengali Support", content: "Sophisticated RAG system understanding queries in both English and Bengali. Built with Django REST Framework, LangChain, FAISS, and Groq API.", github: "https://github.com/Shakil526563/Multilingual-Retrieval-Augmented-Generation-RAG-System", }, { title: "Traffic Monitoring System", desc: "YOLOv8-based intelligent system", content: "Real-time vehicle monitoring using YOLOv8 for detection, counting, speed measurement, license plate recognition, and automated violation logging.", github: "https://github.com/Shakil526563/Traffic-Monitoring-System", }, { title: "AI-Powered Voice Sales Agent", desc: "FastAPI voice assistant", content: "Voice sales assistant combining real-time voice interaction, rule-based response logic, and advanced RAG for context-aware conversations about educational products.", github: "https://github.com/Shakil526563/AI-Powered-Voice-Sales-Agent", }, { title: "Student Weather Awareness System", desc: "Django-based weather system", content: "Features real-time OpenWeatherMap forecasts, Groq LLM-powered safety tips, email alerts, request tracking, and a RESTful API.", github: "https://github.com/Shakil526563/Students-Awareness-System", }, { title: "Chatbot with Audio Response", desc: "RAG-powered FastAPI chatbot", content: "FastAPI chatbot using RAG (FAISS + transformers) and Groq for intelligent responses with text-to-speech output.", github: "https://github.com/Shakil526563/Custom-Chatbot-with-Audio-Response", }, ].map((project, index) => ( {project.title} {project.desc && {project.desc}}

{project.content}

))}

{/* Research Tab */}

Research Publications

{[ { title: "DeepChestGNN: A Comprehensive Framework for Enhanced Lung Disease Identification through Advanced Graphical Deep Features", authors: "Shakil Rana, Md Jabed Hosen, Tasnim Jahan Tonni, Md. Awlad Hossen Rony, Kaniz Fatema, Md. Zahid Hasan, Md. Tanvir Rahman, Risala Tasin Khan, Tony Jan, Md Whaiduzzaman", journal: "Biomedical Sensors (MDPI)", link: true, }, { title: "An Automated Histopathological Colorectal Cancer Multi-Class Classification System Based on Optimal Image Processing and Prominent Features", authors: "Tasnim Jahan Tonni, Shakil Rana, Kaniz Fatema, Asif Karim, Md. Awlad Hossen Rony, Md. Zahid Hasan, Md. Saddam Hossain Mukta, Sami Azam", journal: "Computational Intelligence (Wiley)", link: true, }, { title: "Integrating Explainable AI (XAI) and Machine Learning for Superior Brain Tumor MRI Classification", authors: "Md. Injamul Haque, Shakil Rana, Fowzia Rahman Taznin, Saiful Islam, S.M. Fardin Foyes Riad, MD Yeasin Chowdhury", journal: "IEEE Xplore [Scopus Indexed]", link: true, }, { title: "NewsNet: A Comprehensive Neural Network Hybrid Model for Efficient Bangla News Categorization", authors: "Shakil Rana, Md. Injamul Haque, Naznin Sultana, Abdul Fattah Amid, Md Jabed Hosen, Saiful Islam", journal: "IEEE Xplore [Scopus Indexed]", link: true, }, { title: "Sentiment Analysis of Israel-Palestine Conflict Comments Using Sentiment Intensity Analyzer and TextBlob", authors: "Md. Emon Sharkar, Md Jabed Hosen, Md. Abdullah, Saiful Islam, Shakil Rana, Naznin Sultana", journal: "IEEE Xplore [Scopus Indexed]", link: true, }, { title: "An Efficient Framework for Transliteration Sentence Identification of Low Resource Languages Using Hybrid BERT-BiGRU", authors: "Saiful Islam, Md Jabed Hosen, Fowzia Rahman Taznin, Naznin Sultana, Md Injamul Haque, Shakil Rana", journal: "IEEE Xplore [Scopus Indexed]", link: true, }, ].map((paper, index) => ( {paper.title} {paper.authors} {paper.journal} {paper.link && ( )} ))}

{/* Skills Tab */}

Skills & Certifications

Technical Skills

Programming & Frameworks

{["Python", "C", "C++", "Java", "Django", "SQL"].map((skill, i) => ( {skill} ))}

AI/ML & Tools

{[ "TensorFlow", "PyTorch", "Keras", "Scikit-learn", "OpenCV", "CNN", "Transfer Learning", "YOLOv8", "Pose Estimation", "NLP", "RAG", "LLM", "XAI", "Hugging Face", "LangChain", ].map((skill, i) => ( {skill} ))}

Data & Analysis

{[ "Pandas", "NumPy", "Matplotlib", "Feature Engineering", "Model Evaluation", "Image Classification", "Object Detection", "FAISS", ].map((skill, i) => ( {skill} ))}

DevOps & Others

{[ "Docker", "Git", "Jupyter Notebook", "Groq API", "Deepnote", "Team Management", "Event Planning", ].map((skill, i) => ( {skill} ))}

{[ { title: "Machine Learning Specialization", org: "Stanford University & DeepLearning.AI (Coursera)", desc: "Master fundamental AI concepts and develop practical machine learning skills in the beginner-friendly, 3-course program by AI visionary Andrew Ng.", link: "https://www.coursera.org/account/accomplishments/specialization/certificates/machine-learning-specialization", }, { title: "Microsoft Certified: Azure Data Scientist Associate", org: "", desc: "Design and prepare a machine learning solution. Explore data and train models. Prepare the deployment model.", link: "https://learn.microsoft.com/en-us/users/shakilrana-7748/", }, { title: "Foundations of Data Science", org: "Coursera", desc: "Learned about data analytics careers, its impact on decision-making, data privacy, ethics, and creating project plans with defined roles.", link: "https://www.coursera.org/account/accomplishments/certificates/foundations-data-science", }, { title: "Intermediate Machine Learning Certificate", org: "Kaggle", desc: "Learned to handle missing values, work with categorical variables, deploy models, apply cross-validation, and use XGBoost for structured data, all while avoiding data leakage for real-world machine learning applications.", link: "https://www.kaggle.com/learn/certification/shakilrana", }, { title: "Deep Learning with PyTorch: Image Segmentation", org: "Coursera", desc: "Learned image segmentation techniques using PyTorch, focusing on deep learning models for precise object localization and pixel-level classification.", link: "https://www.coursera.org/account/accomplishments/certificates/deep-learning-pytorch-image-segmentation", }, { title: "OpenCV Bootcamp", org: "", desc: "Learned computer vision techniques using OpenCV, including image processing, object detection, and feature extraction for real-world applications.", link: "https://opencv.org/courses/", }, ].map((cert, index) => ( {cert.title} {cert.org && {cert.org}} {cert.desc && (

{cert.desc}

)} ))}

{/* Language Skills */}

Language Skills

Bengali Mother Tongue

Listening Native

Reading Native

Writing Native

English Professional Level

Listening B2

Reading B1

Writing B2

Spoken Production B2

{/* Education Tab */}

Education

{[ { degree: "B.Sc. in Computer Science and Engineering (CSE)", school: "Daffodil International University, DSC", period: "January 2020 - July 2024", gpa: "CGPA: 3.76 out of 4.00", thesis: "DeepChestGNN: A Comprehensive Framework for Enhanced Lung Disease Identification through Advanced Graphical Deep Features", credits: "148 (Bangladeshi Credit System)", }, { degree: "Higher Secondary Certificate (H.S.C)", school: "Qadirabad Cantonment Sapper College", period: "July 2017 - May 2019", gpa: "GPA: 5.00 out of 5.00", group: "Science", }, { degree: "Secondary School Certificate (S.S.C)", school: "Khubjipur Multilateral High School", period: "January 2013 - January 2017", gpa: "GPA: 5.00 out of 5.00", group: "Science", }, ].map((edu, index) => (

{edu.degree} {edu.school}

{edu.period}

{edu.gpa}

{edu.credits &&

Credits: {edu.credits}

} {edu.group &&

Group: {edu.group}

} {edu.thesis && (

Thesis:

{edu.thesis}

)}

))}

{/* Contact Section */}

Contact Information

(+880) 1744526563 shakil15-3816@diu.edu.bd linkedin.com/in/shakil-rana-a1b383256 github.com/Shakil526563 Bamonbaria, Khubjipur, Natore, Rajshahi 6440, Bangladesh

Reference

Dr. Md. Zahid Hasan

Associate Professor & MIS Coordinator

Director of HIRL Lab, Department of CSE

Daffodil International University

01672580748

zahid.cse@diu.edu.bd

{/* Footer */}

) }