[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "resend": "6.2.2", "jspdf": "3.0.3" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/profile-content.tsx" isEdit="true" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { BarChart3, Code, Database, FileSpreadsheet, Sparkles, Workflow } from "lucide-react" export function ProfileContent() { return (

Career Objective

A challenging position in an influential and incremental bank where my creative and innovative capabilities can be efficiently utilized.

With over 10 years of experience in banking operations, I specialize in ATM services, cash management, reconciliation, and alternative delivery channels. My expertise includes ATM deployment, vault management, customer service, and maintaining operational excellence in high-volume banking environments.

Experience

Officer ATM Services

Brac Bank Ltd. • May 2018 - Present

ATM Service Center Rampura, Dhaka

Prepare daily ATM replenishment sheets for feeding cash based on ATM switch reports
Adjustment between ATM switch and Core Banking software after confirmation of loading cash
Communicate with assigned vendors for ATM and ATM booth issues
Monitor ATM and CDM status, attend FLM and PM calls
Manage reconciliation of customer complaints and ATM transactions

ATM Management Cash Management Reconciliation Core Banking

Officer ATM Replenishment

The City Bank Limited • May 2015 - May 2018

ADC Center, Chittagong

Site selection and negotiations for ATM/CDM booth deployment in Chittagong region
ADC vault management and cash distribution to replenishment teams
Install software (ITC, Anti Virus, citytouch) and manage ATM configurations
Reconcile customer complaints and manage capture cards and journal rolls
CDM envelope processing and voucher preparation for various transaction types
Maintain MIS for cash in/out, fake notes, and daily vault amounts

Deployment Vault Management CDM Operations MIS Reporting

Education

LL.B (Hons) in Law

Green University of Bangladesh • 2010

CGPA: 3.66 (Scale 4.00)

Higher Secondary Certificate (H.S.C)

Mohanagar College • 2006

Commerce • GPA: 3.70 (Scale 5.00)

Skills & Expertise

Excel & Data Analysis

Expert in Excel automation and data analysis

Data Analysis Excel Automation Macros & VBA Advanced Formulas Pivot Tables


              
                Web Development & AI
                Building web applications with AI integration
                
                  Google App Script
                  Web Applications
                  AI Integration
                  Automation



          
            
              
                
              
              
                ATM Operations
                
                  ATM Replenishment
                  ATM Deployment
                  FLM & PM Monitoring
                  ATM Switch Reports
                  CDM Operations
                
              
            
          

          
            
              
                
              
              
                Cash Management
                
                  Vault Management
                  Cash Sorting
                  Cash Distribution
                  Fake Note Detection
                  MIS Reporting
                
              
            
          

          
            
              
                
              
              
                Reconciliation
                
                  Customer Complaints
                  Transaction Reconciliation
                  Capture Card Management
                  Journal Roll Analysis
                  Voucher Preparation
                
              
            
          

          
            
              
                
              
              
                Technical Skills
                
                  Core Banking Software
                  Card Payment Module
                  MS Office Suite
                  Banking Software



      
        Projects & Portfolio
        
          
            
              
                
              
              
                Innovative Solutions
                Excel automation, web apps, and AI-powered tools
              
            
            
              I create custom solutions using Excel automation, Google App Script, and AI integration to streamline
              business processes. My projects include data analysis dashboards, automated reporting systems, and
              web-based applications that improve efficiency and decision-making.
            
            
              Excel Dashboards
              Automation Scripts
              Web Applications
              AI Tools
              Data Analytics
            
          
        
      

      
        Personal Information
        
          
            
              Date of Birth
              December 25, 1987
            
            
              Nationality
              Bangladeshi
            
            
              Blood Group
              B+
            
            
              Marital Status
              Married
            
            
              Location
              Badda, Dhaka-1212, Bangladesh


  )
}
[V0_FILE]typescriptreact:file="components/experience-section.tsx" isMerged="true"
import { Building2, Calendar } from "lucide-react"
import { Card } from "@/components/ui/card"

export function ExperienceSection() {
  const experiences = [
    {
      company: "Brac Bank Ltd.",
      position: "Officer ATM Services",
      location: "ATM Service Center Rampura, Dhaka",
      period: "May 2018 - Present",
      responsibilities: [
        "Prepare daily ATM replenishment sheets based on ATM switch reports",
        "Manage adjustment between ATM switch and Core Banking software",
        "Coordinate with vendors for ATM maintenance and issue resolution",
        "Monitor ATM and CDM status for optimal performance",
        "Oversee First Line Maintenance (FLM) and Preventive Maintenance (PM) operations",
      ],
    },
    {
      company: "The City Bank Limited",
      position: "Officer ATM Replenishment",
      location: "ADC Center, Chittagong",
      period: "May 2015 - May 2018",
      responsibilities: [
        "Managed ATM deployment including site selection and vendor coordination",
        "Handled ADC vault management and cash distribution",
        "Performed reconciliation of customer complaints and ATM transactions",
        "Maintained MIS for cash operations, capture cards, and customer complaints",
        "Managed CDM operations including envelope processing and voucher preparation",
      ],
    },
  ]

  return (
    
      
        
          Work Experience
          My professional journey in the banking sector
        

        
          {experiences.map((exp, index) => (
            
              
                
                  {exp.position}
                  
                    
                    {exp.company}
                  
                  {exp.location}
                
                
                  
                  {exp.period}
                
              

              
                Key Responsibilities:
                
                  {exp.responsibilities.map((resp, idx) => (
                    
                      •
                      {resp}
                    
                  ))}
                
              
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/skills-section.tsx" isMerged="true"
import { Card } from "@/components/ui/card"
import { FileSpreadsheet, Code, Brain, Banknote, Settings, BarChart3, Workflow } from "lucide-react"

export function SkillsSection() {
  const skillCategories = [
    {
      title: "Banking Operations",
      icon: Banknote,
      skills: [
        "ATM Management & Deployment",
        "Cash Management & Reconciliation",
        "CDM Operations",
        "Banking Software (Core Banking, Card Payment Module)",
        "Vault Management",
        "Customer Service & Complaint Resolution",
      ],
    },
    {
      title: "Data Analysis & Automation",
      icon: FileSpreadsheet,
      skills: [
        "Advanced Microsoft Excel",
        "Excel Automation & Macros",
        "Data Analysis & Visualization",
        "MIS Report Generation",
        "Financial Data Processing",
        "Automated Workflow Creation",
      ],
    },
    {
      title: "Web Development",
      icon: Code,
      skills: [
        "Google Apps Script",
        "Web Application Development",
        "Custom Banking Solutions",
        "API Integration",
        "Database Management",
        "Automation Scripts",
      ],
    },
    {
      title: "AI & Innovation",
      icon: Brain,
      skills: [
        "AI Integration in Applications",
        "Intelligent Automation",
        "Process Optimization",
        "Machine Learning Applications",
        "AI-Powered Analytics",
        "Innovation in Banking Tech",
      ],
    },
  ]

  return (
    
      
        
          Skills & Expertise
          
            A comprehensive blend of banking operations and technical innovation
          
        

        
          {skillCategories.map((category, index) => {
            const Icon = category.icon
            return (
              
                
                  
                    
                  
                  {category.title}
                
                
                  {category.skills.map((skill, idx) => (
                    
                      ✓
                      {skill}
                    
                  ))}
                
              
            )
          })}
        

        {/* Additional Skills Highlights */}
        
          
            
            Data-Driven
            
              Expert in analyzing complex datasets and creating actionable insights
            
          
          
            
            Process Automation
            
              Building automated solutions that improve efficiency and reduce errors
            
          
          
            
            Problem Solver
            
              Innovative approach to solving complex operational challenges
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
export function Footer() {
  return (
    
      
        
          Md. Imtiaj
          Banking Professional | Excel Expert | Web Developer | AI Enthusiast
          © {new Date().getFullYear()} Md. Imtiaj. All rights reserved.
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { Navigation } from "@/components/navigation"
import { HeroSection } from "@/components/hero-section"
import { AboutSection } from "@/components/about-section"
import { ExperienceSection } from "@/components/experience-section"
import { CertificationsSection } from "@/components/certifications-section"
import { SkillsSection } from "@/components/skills-section"
import { ProjectsSection } from "@/components/projects-section"
import { ContactSection } from "@/components/contact-section"
import { Footer } from "@/components/footer"

export default function Home() {
  return (
    
      
      
      
      
      
      
      
      
      
    
  )
}
[V0_FILE]typescriptreact:file="components/projects-section.tsx" isEdit="true" isMerged="true"
import { Card } from "@/components/ui/card"
import { Code2, FileSpreadsheet, Database, CheckSquare, BarChart3, Settings } from "lucide-react"

export function ProjectsSection() {
  const vbaProjects = [
    {
      title: "RMS (Replenishment Management System)",
      description:
        "Comprehensive VBA-based system for managing ATM cash replenishment operations, tracking cash levels, scheduling, and generating automated reports for efficient cash management across multiple ATM locations.",
      icon: Database,
      technologies: ["Excel VBA", "Automation", "Data Management"],
    },
    {
      title: "Captured Card Process",
      description:
        "Automated system for tracking and managing captured ATM cards, including card logging, customer notification workflows, and reconciliation processes to ensure efficient card return operations.",
      icon: FileSpreadsheet,
      technologies: ["Excel VBA", "Process Automation", "Workflow Management"],
    },
    {
      title: "Fixed Asset Tracker",
      description:
        "Advanced Excel VBA application for tracking and managing fixed assets including ATM machines, booth equipment, and other banking infrastructure with depreciation calculations and maintenance scheduling.",
      icon: BarChart3,
      technologies: ["Excel VBA", "Asset Management", "Reporting"],
    },
  ]

  const googleScriptProjects = [
    {
      title: "ATM and Booth Management System",
      description:
        "Real-time web application for managing ATM and booth operations with FLM (First Line Maintenance) and SLM (Second Line Maintenance) tracking, enabling instant status updates and efficient maintenance coordination.",
      icon: Settings,
      technologies: ["Google Apps Script", "Web App", "Real-time Monitoring"],
    },
    {
      title: "Booth Inspection Check List",
      description:
        "Digital inspection system built with Google Apps Script for conducting and tracking booth inspections, ensuring compliance with standards, and generating automated inspection reports with photo documentation.",
      icon: CheckSquare,
      technologies: ["Apps Script", "Google Forms", "Automation"],
    },
    {
      title: "Dynamic Report Download System",
      description:
        "Intelligent reporting system that generates customized reports on-demand with dynamic filters, automated data processing, and one-click download functionality for various banking operations metrics.",
      icon: Code2,
      technologies: ["Apps Script", "Google Sheets", "API Integration"],
    },
  ]

  return (
    
      
        
          Projects & Innovations
          
            Automation solutions and web applications for banking operations
          
        

        
          
            
            Excel VBA Projects
          
          
            {vbaProjects.map((project, index) => {
              const Icon = project.icon
              return (
                
                  
                    
                  
                  {project.title}
                  {project.description}
                  
                    {project.technologies.map((tech, idx) => (
                      
                        {tech}
                      
                    ))}
                  
                
              )
            })}
          
        

        
          
            
            Google Apps Script Projects
          
          
            {googleScriptProjects.map((project, index) => {
              const Icon = project.icon
              return (
                
                  
                    
                  
                  {project.title}
                  {project.description}
                  
                    {project.technologies.map((tech, idx) => (
                      
                        {tech}
                      
                    ))}
                  
                
              )
            })}
          
        
      
    
  )
}
[V0_FILE]jpg:file="public/images/design-mode/1000000249.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/1000000249-oOgy4kigh33nUnwMhPHUNq5HIvkHhJ.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isMerged="true"
import { Briefcase, GraduationCap, Target } from "lucide-react"
import { Card } from "@/components/ui/card"

export function AboutSection() {
  return (
    
      
        
          About Me
          
            Dedicated banking professional with expertise in technology and automation
          
        

        
          
            
              
                
              
              Career Objective
              
                Seeking a challenging position in an influential and incremental bank where my creative and innovative
                capabilities can be efficiently utilized.
              
            
          

          
            
              
                
              
              10+ Years
              
                Professional experience in banking sector, specializing in ATM services, cash management, and
                operational excellence.
              
            
          

          
            
              
                
              
              Education
              
                LL.B (Hons) from Green University of Bangladesh with CGPA 3.66/4.00, combining legal knowledge with
                banking expertise.
              
            
          
        

        
          Professional Summary
          
            
              I am a dedicated banking professional with over 10 years of experience in the financial sector, currently
              serving as an Officer ATM Services at Brac Bank Ltd. My expertise spans across ATM operations, cash
              management, reconciliation, and deployment of banking infrastructure.
            
            
              Beyond traditional banking operations, I have developed strong technical skills in data analysis and
              automation. I am an expert in Microsoft Excel, creating sophisticated automation solutions and data
              analysis tools that improve operational efficiency. Additionally, I have expanded my skill set to include
              web application development using Google Apps Script and AI integration, allowing me to build innovative
              solutions that bridge banking operations with modern technology.
            
            
              My unique combination of banking domain knowledge, legal education, and technical expertise positions me
              to contribute effectively to organizations seeking to modernize their operations and leverage technology
              for improved service delivery.
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/certifications-section.tsx" isMerged="true"
"use client"

import { Award, BookOpen } from "lucide-react"

export function CertificationsSection() {
  const bracCourses = [
    {
      title: "Treasury and Financial Institutions",
      date: "25-Jun-2024",
      score: 80,
    },
    {
      title: "Code of Conduct",
      date: "15-Jun-2023",
      score: 72,
    },
    {
      title: "Basics of Information Security",
      date: "19-Mar-2023",
      score: 72,
    },
    {
      title: "Fundamentals of Enterprise Risk Management",
      date: "18-Jun-2023",
      score: 63,
    },
    {
      title: "AML & CFT",
      date: "18-Jun-2025",
      score: 60,
    },
    {
      title: "General Security",
      date: "09-Nov-2022",
      score: "Completed",
    },
  ]

  const bibmCourse = {
    title: "Banking Foundation Course",
    institution: "Bangladesh Institute of Bank Management (BIBM)",
  }

  return (
    
      
        {/* Section Header */}
        
          Certifications & Training
          
            Professional development and continuous learning from leading institutions
          
        

        {/* BIBM Course */}
        
          
            
            Bangladesh Institute of Bank Management (BIBM)
          
          
            
              
                {bibmCourse.title}
                {bibmCourse.institution}
              
              
            
          
        

        {/* BRAC Bank Courses */}
        
          
            
            BRAC Bank Learning Portal (ALO)
          
          
            {bracCourses.map((course, index) => (
              
                {course.title}
                
                  
                    Date: {course.date}
                  
                  
                    Score:
                    
                      {typeof course.score === "number" ? `${course.score}%` : course.score}
                    
                  
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/profile-header.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import { Mail, Linkedin, Phone, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"

export function ProfileHeader() {
  return (
    
      
        
          
        
      

      
        
          Md. Imtiaj
          Officer ATM Services
          Brac Bank Ltd.
        

        
          Banking professional specializing in ATM services, Excel automation, and web application development with AI
        

        
          
            
            
              imtiajmd180@gmail.com
            
          
          
            
            01670288219
          
          
            
            Dhaka, Bangladesh
          
        

        
          
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Mail, Phone, MapPin, Send } from "lucide-react"

export function ContactForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setSubmitStatus("idle")

    try {
      const response = await fetch("/api/send-email", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

      const data = await response.json()

      if (!response.ok) {
        console.error("[v0] Email submission error:", data)
        setSubmitStatus("error")
        setIsSubmitting(false)
        return
      }

      console.log("[v0] Email sent successfully:", data)
      setSubmitStatus("success")
      setIsSubmitting(false)

      // Reset form after 3 seconds
      setTimeout(() => {
        setFormData({ name: "", email: "", subject: "", message: "" })
        setSubmitStatus("idle")
      }, 3000)
    } catch (error) {
      console.error("[v0] Form submission error:", error)
      setSubmitStatus("error")
      setIsSubmitting(false)
    }
  }

  const handleChange = (e: React.ChangeEvent) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

  return (
    
      
        Get In Touch
        
          Have a project in mind? Let's discuss how I can help you achieve your goals.
        
      

      
        
          
            
              
                
                  Your Name
                
                
              
              
                
                  Email Address
                
                
              
            

            
              
                Subject
              
              
            

            
              
                Message
              
                          </div>

            <Button
              type="submit"
              disabled={isSubmitting}
              className="w-full bg-primary hover:bg-primary/90 sm:w-auto"
              size="lg"
            >
              {isSubmitting ? (
                "Sending..."
              ) : submitStatus === "success" ? (
                "Message Sent!"
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Send Message
                </>
              )}
            </Button>

            {submitStatus === "success" && (
              <p className="text-sm text-primary">Thank you! I'll get back to you soon.</p>
            )}

            {submitStatus === "error" && (
              <p className="text-sm text-red-500">Failed to send message. Please try again or contact directly.</p>
            )}
          </form>
        </Card>

        <div className="flex flex-col gap-6">
          <Card className="card-hover p-6 bg-gradient-to-br from-primary/5 to-transparent">
            <div className="flex items-start gap-4">
              <div className="rounded-lg bg-primary/10 p-3">
                <Mail className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h3 className="mb-1 font-semibold text-foreground">Email</h3>
                <a
                  href="mailto:imtiajmd180@gmail.com"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  imtiajmd180@gmail.com
                </a>
              </div>
            </div>
          </Card>

          <Card className="card-hover p-6 bg-gradient-to-br from-accent/5 to-transparent">
            <div className="flex items-start gap-4">
              <div className="rounded-lg bg-accent/10 p-3">
                <Phone className="h-6 w-6 text-accent" />
              </div>
              <div>
                <h3 className="mb-1 font-semibold text-foreground">Phone</h3>
                <p className="text-sm text-muted-foreground">01670288219</p>
                <p className="text-sm text-muted-foreground">01401288219</p>
              </div>
            </div>
          </Card>

          <Card className="card-hover p-6 bg-gradient-to-br from-primary/5 to-transparent">
            <div className="flex items-start gap-4">
              <div className="rounded-lg bg-primary/10 p-3">
                <MapPin className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h3 className="mb-1 font-semibold text-foreground">Location</h3>
                <p className="text-sm text-muted-foreground">Flat # C2, 3rd Floor</p>
                <p className="text-sm text-muted-foreground">Ekota Nibas, Lane #14</p>
                <p className="text-sm text-muted-foreground">Purbachal Road, Badda</p>
                <p className="text-sm text-muted-foreground">Dhaka-1212, Bangladesh</p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Mail, Phone, MapPin, Send, Linkedin, MessageCircle } from "lucide-react"

export function ContactSection() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setSubmitStatus("idle")

    try {
      const response = await fetch("/api/send-email", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

      const data = await response.json()

      if (!response.ok) {
        console.error("[v0] Email submission error:", data)
        setSubmitStatus("error")
        setIsSubmitting(false)
        return
      }

      console.log("[v0] Email sent successfully:", data)
      setSubmitStatus("success")
      setIsSubmitting(false)

      // Reset form after 3 seconds
      setTimeout(() => {
        setFormData({ name: "", email: "", subject: "", message: "" })
        setSubmitStatus("idle")
      }, 3000)
    } catch (error) {
      console.error("[v0] Form submission error:", error)
      setSubmitStatus("error")
      setIsSubmitting(false)
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  return (
    <section id="contact" className="py-20 bg-muted/30">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold mb-4">Get In Touch</h2>
          <p className="text-muted-foreground text-lg">
            Feel free to reach out for collaborations or just a friendly chat
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-2">
          {/* Contact Information */}
          <div className="space-y-6">
            <Card className="p-8">
              <h3 className="text-2xl font-bold mb-6">Contact Information</h3>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <Mail className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold mb-1">Email</h4>
                    <a
                      href="mailto:imtiajmd180@gmail.com"
                      className="text-muted-foreground hover:text-primary transition-colors"
                    >
                      imtiajmd180@gmail.com
                    </a>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <Phone className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold mb-1">Phone</h4>
                    <p className="text-muted-foreground">01670288219</p>
                    <p className="text-muted-foreground">01401288219</p>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="p-3 bg-green-100 rounded-lg">
                    <MessageCircle className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold mb-1">WhatsApp</h4>
                    <a
                      href="https://wa.me/qr/YQ5UBXXLULYZO1"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-muted-foreground hover:text-green-600 transition-colors"
                    >
                      Chat on WhatsApp
                    </a>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <Linkedin className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold mb-1">LinkedIn</h4>
                    <a
                      href="https://www.linkedin.com/in/md-imtiaj-7a91511b1?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-muted-foreground hover:text-primary transition-colors"
                    >
                      linkedin.com/in/md-imtiaj
                    </a>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <MapPin className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold mb-1">Address</h4>
                    <p className="text-muted-foreground">
                      Flat # C2, 3rd Floor, Ekota Nibas
                      <br />
                      Lane #14, Purbachal Road
                      <br />
                      Badda, Dhaka-1212
                      <br />
                      Bangladesh
                    </p>
                  </div>
                </div>
              </div>
            </Card>

            <Card className="p-8 bg-gradient-to-br from-primary/10 to-accent/10">
              <h3 className="text-xl font-bold mb-4">Professional Details</h3>
              <div className="space-y-2 text-sm text-muted-foreground">
                <p>
                  <strong>Current Position:</strong> Officer ATM Services
                </p>
                <p>
                  <strong>Company:</strong> Brac Bank Ltd.
                </p>
                <p>
                  <strong>Experience:</strong> 10+ Years in Banking
                </p>
                <p>
                  <strong>Education:</strong> LL.B (Hons), CGPA 3.66/4.00
                </p>
                <p>
                  <strong>Nationality:</strong> Bangladeshi
                </p>
              </div>
            </Card>
          </div>

          {/* Contact Form */}
          <Card className="p-8">
            <h3 className="text-2xl font-bold mb-6">Send Me a Message</h3>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium mb-2">
                  Your Name
                </label>
                <Input
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  placeholder="Enter your name"
                  required
                />
              </div>

              <div>
                <label htmlFor="email" className="block text-sm font-medium mb-2">
                  Your Email
                </label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="Enter your email"
                  required
                />
              </div>

              <div>
                <label htmlFor="subject" className="block text-sm font-medium mb-2">
                  Subject
                </label>
                <Input
                  id="subject"
                  name="subject"
                  value={formData.subject}
                  onChange={handleChange}
                  placeholder="What is this about?"
                  required
                />
              </div>

              <div>
                <label htmlFor="message" className="block text-sm font-medium mb-2">
                  Message
                </label>
                <Textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  placeholder="Write your message here..."
                  rows={6}
                  required
                />
              </div>

              <Button type="submit" size="lg" className="w-full" disabled={isSubmitting}>
                <Send className="h-5 w-5 mr-2" />
                {isSubmitting ? "Sending..." : "Send Message"}
              </Button>

              {submitStatus === "success" && (
                <p className="text-sm text-green-600 font-medium">
                  ✓ Message sent successfully! I'll get back to you soon.
                </p>
              )}

              {submitStatus === "error" && (
                <p className="text-sm text-red-600 font-medium">
                  ✗ Failed to send message. Please try again or contact directly.
                </p>
              )}
            </form>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/api/send-email/route.tsx" isEdit="true" isMerged="true"
import { Resend } from "resend"
import { type NextRequest, NextResponse } from "next/server"

const resend = new Resend(process.env.RESEND_API_KEY)

export async function POST(request: NextRequest) {
  try {
    const { name, email, subject, message } = await request.json()

    console.log("[v0] Received form data:", { name, email, subject })
    console.log("[v0] RESEND_API_KEY exists:", !!process.env.RESEND_API_KEY)

    if (!name || !email || !subject || !message) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

    const result = await resend.emails.send({
      from: "noreply@resend.dev",
      to: "imtiajmd180@gmail.com",
      replyTo: email,
      subject: `New Contact Form Submission: ${subject}`,
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
          <h2 style="color: #333;">New Message from Your Portfolio</h2>
          <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
            <p><strong>Name:</strong> ${name}</p>
            <p><strong>Email:</strong> ${email}</p>
            <p><strong>Subject:</strong> ${subject}</p>
            <hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;" />
            <p><strong>Message:</strong></p>
            <p style="white-space: pre-wrap; color: #555;">${message}</p>
          </div>
          <p style="color: #999; font-size: 12px; margin-top: 20px;">
            This email was sent from your portfolio contact form.
          </p>
        </div>
      `,
    })

    console.log("[v0] Resend response:", result)

    if (result.error) {
      console.error("[v0] Resend error details:", result.error)
      return NextResponse.json({ error: "Failed to send email", details: result.error }, { status: 500 })
    }

    console.log("[v0] Email sent successfully with ID:", result.data?.id)
    return NextResponse.json({ success: true, message: "Email sent successfully" }, { status: 200 })
  } catch (error) {
    console.error("[v0] API error:", error)
    return NextResponse.json({ error: "Internal server error", details: String(error) }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/test-email/route.tsx" isMerged="true"
import { Resend } from "resend"
import { NextResponse } from "next/server"

const resend = new Resend(process.env.RESEND_API_KEY)

export async function GET() {
  try {
    console.log("[v0] Testing email with API key:", !!process.env.RESEND_API_KEY)

    const result = await resend.emails.send({
      from: "noreply@resend.dev",
      to: "imtiajmd180@gmail.com",
      subject: "Test Email from Your Portfolio",
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
          <h2 style="color: #333;">✅ Test Email Successful!</h2>
          <p>This is a test email to verify your portfolio contact form is working correctly.</p>
          <p style="color: #666; margin-top: 20px;">If you received this email, your contact form is now ready to use!</p>
        </div>
      `,
    })

    console.log("[v0] Test email result:", result)

    if (result.error) {
      return NextResponse.json(
        {
          success: false,
          error: "Failed to send test email",
          details: result.error,
          apiKeySet: !!process.env.RESEND_API_KEY,
        },
        { status: 500 },
      )
    }

    return NextResponse.json({
      success: true,
      message: "Test email sent successfully to imtiajmd180@gmail.com",
      emailId: result.data?.id,
    })
  } catch (error) {
    console.error("[v0] Test email error:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Internal server error",
        details: String(error),
        apiKeySet: !!process.env.RESEND_API_KEY,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("dark")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const initialTheme = savedTheme || (prefersDark ? "dark" : "light")
    setTheme(initialTheme)
    document.documentElement.classList.toggle("dark", initialTheme === "dark")
  }, [])

  const toggleTheme = () => {
    const newTheme = theme === "dark" ? "light" : "dark"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
  }

  if (!mounted) return <>{children}</>

  return (
    <>
      {children}
      <div className="fixed bottom-6 right-6 z-40">
        <button
          onClick={toggleTheme}
          className="p-3 rounded-full bg-primary/20 hover:bg-primary/30 border border-primary/30 transition-all shadow-lg hover:shadow-xl"
          aria-label="Toggle theme"
        >
          {theme === "dark" ? (
            <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l-2.12-2.12a1 1 0 00-1.414 0l-.707.707a1 1 0 000 1.414l2.12 2.12a1 1 0 001.414 0l.707-.707a1 1 0 000-1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM9 4a1 1 0 100-2 1 1 0 000 2zm6.464 12.05l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 111.414 1.414l-.707.707a1 1 0 01-1.414 0zm2.12-10.607a1 1 0 00-1.414 0l-.707.707a1 1 0 101.414 1.414l.707-.707a1 1 0 000-1.414zM17 11a1 1 0 100-2 1 1 0 000 2z"
                clipRule="evenodd"
              />
            </svg>
          ) : (
            <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
            </svg>
          )}
        </button>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Menu, X, Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { generateCVPDF } from "@/lib/pdf-generator"

export function Navigation() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
      setIsMobileMenuOpen(false)
    }
  }

  const downloadCV = () => {
    generateCVPDF()
  }

  const navItems = [
    { label: "Home", id: "home" },
    { label: "About", id: "about" },
    { label: "Experience", id: "experience" },
    { label: "Certifications", id: "certifications" },
    { label: "Skills", id: "skills" },
    { label: "Projects", id: "projects" },
    { label: "Contact", id: "contact" },
  ]

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? "bg-background/80 backdrop-blur-xl border-b border-primary/10 shadow-lg" : "bg-transparent"
      }`}
    >
      <div className="mx-auto max-w-7xl px-6 py-4">
        <div className="flex items-center justify-between">
          <button
            onClick={() => scrollToSection("home")}
            className="text-2xl font-bold gradient-text hover:opacity-80 transition-opacity"
          >
            MI
          </button>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-1">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => scrollToSection(item.id)}
                className="px-4 py-2 text-sm font-medium text-foreground/70 hover:text-primary hover:bg-primary/5 rounded-lg transition-all"
              >
                {item.label}
              </button>
            ))}
          </div>

          <div className="hidden md:flex items-center gap-2">
            <Button
              size="sm"
              variant="outline"
              onClick={downloadCV}
              className="border-primary/50 hover:border-primary hover:bg-primary/5 transition-all gap-2 bg-transparent"
            >
              <Download className="h-4 w-4" />
              Download CV
            </Button>
          </div>

          {/* Mobile Menu Button */}
          <Button
            variant="ghost"
            size="icon"
            className="md:hidden"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </Button>
        </div>

        {/* Mobile Navigation */}
        {isMobileMenuOpen && (
          <div className="md:hidden mt-4 pb-4 space-y-2 border-t border-primary/10 pt-4">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => scrollToSection(item.id)}
                className="block w-full text-left px-4 py-2 text-sm font-medium text-foreground/70 hover:text-primary hover:bg-primary/5 rounded-lg transition-all"
              >
                {item.label}
              </button>
            ))}
            <button
              onClick={downloadCV}
              className="block w-full text-left px-4 py-2 text-sm font-medium text-foreground/70 hover:text-primary hover:bg-primary/5 rounded-lg transition-all flex items-center gap-2"
            >
              <Download className="h-4 w-4" />
              Download CV
            </button>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import { Mail, Phone, MapPin, ArrowRight, Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { generateCVPDF } from "@/lib/pdf-generator"

export function HeroSection() {
  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
    }
  }

  const downloadCV = () => {
    generateCVPDF()
  }

  return (
    <section id="home" className="min-h-[calc(100vh-5rem)] flex items-center pt-20 pb-8">
      <div className="mx-auto max-w-7xl px-6 lg:px-8 w-full">
        <div className="grid gap-16 lg:grid-cols-2 lg:gap-20 items-center">
          {/* Left Column - Text Content */}
          <div className="space-y-8">
            <div className="space-y-4">
              <div className="inline-block px-4 py-2 rounded-full bg-primary/10 border border-primary/30">
                <p className="text-sm font-semibold text-primary">Welcome to my portfolio</p>
              </div>
              <h1 className="text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
                <span className="gradient-text-animated">Md. Imtiaj</span>
              </h1>
              <p className="text-2xl lg:text-3xl text-muted-foreground font-medium">
                Banking Professional & Tech Innovator
              </p>
            </div>

            <p className="text-lg text-muted-foreground leading-relaxed max-w-lg">
              10+ years of expertise in banking operations, ATM services, and cash management. Passionate about
              automation, data analysis, and AI integration.
            </p>

            <div className="space-y-3 text-muted-foreground">
              <div className="flex items-center gap-3 hover:text-primary transition-colors cursor-pointer">
                <div className="p-2 rounded-lg bg-primary/10">
                  <Mail className="h-5 w-5 text-primary" />
                </div>
                <a href="mailto:imtiajmd180@gmail.com" className="hover:underline">
                  imtiajmd180@gmail.com
                </a>
              </div>
              <div className="flex items-center gap-3 hover:text-primary transition-colors cursor-pointer">
                <div className="p-2 rounded-lg bg-primary/10">
                  <Phone className="h-5 w-5 text-primary" />
                </div>
                <a href="tel:01670288219" className="hover:underline">
                  01670288219
                </a>
              </div>
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-primary/10">
                  <MapPin className="h-5 w-5 text-primary" />
                </div>
                <span>Dhaka, Bangladesh</span>
              </div>
            </div>

            <div className="flex flex-wrap gap-4 pt-6">
              <Button
                size="lg"
                onClick={() => scrollToSection("contact")}
                className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg hover:shadow-xl transition-all group"
              >
                Get In Touch
                <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => scrollToSection("projects")}
                className="border-primary/50 hover:border-primary hover:bg-primary/5 transition-all"
              >
                View My Work
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={downloadCV}
                className="border-primary/50 hover:border-primary hover:bg-primary/5 transition-all gap-2 bg-transparent"
              >
                <Download className="h-4 w-4" />
                Download CV
              </Button>
            </div>
          </div>

          {/* Right Column - Image */}
          <div className="flex justify-center lg:justify-end">
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-br from-primary/40 via-accent/20 to-primary/40 rounded-3xl blur-3xl animate-pulse-slow" />
              <div className="relative bg-card rounded-3xl p-1 shadow-2xl glow-effect">
                <div className="rounded-3xl overflow-hidden border border-primary/20">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1000000249-YghXiaBvBKWZbEHsEfofZS7Dk6fZZ9.jpg"
                    alt="Md. Imtiaj"
                    width={400}
                    height={500}
                    className="object-cover w-full h-auto"
                    priority
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Md. Imtiaj - Banking Professional & Tech Innovator",
  description:
    "Portfolio of Md. Imtiaj - 10+ years banking experience with expertise in automation, data analysis, and AI integration",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`font-sans antialiased`}>
        <ThemeProvider>
          {children}
          <Analytics />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Light colorful theme - default */
  --background: oklch(0.98 0.002 85);
  --foreground: oklch(0.2 0.01 250);
  --card: oklch(0.96 0.01 250);
  --card-foreground: oklch(0.2 0.01 250);
  --popover: oklch(0.98 0.002 85);
  --popover-foreground: oklch(0.2 0.01 250);
  --primary: oklch(0.6 0.25 280);
  --primary-foreground: oklch(0.98 0.002 85);
  --secondary: oklch(0.7 0.2 40);
  --secondary-foreground: oklch(0.98 0.002 85);
  --muted: oklch(0.75 0.01 250);
  --muted-foreground: oklch(0.45 0.01 250);
  --accent: oklch(0.65 0.25 30);
  --accent-foreground: oklch(0.98 0.002 85);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0.002 85);
  --border: oklch(0.92 0.01 250);
  --input: oklch(0.96 0.01 250);
  --ring: oklch(0.6 0.25 280);
  --chart-1: oklch(0.6 0.25 280);
  --chart-2: oklch(0.65 0.25 30);
  --chart-3: oklch(0.7 0.2 120);
  --chart-4: oklch(0.65 0.22 200);
  --chart-5: oklch(0.6 0.25 340);
  --radius: 0.75rem;
  --sidebar: oklch(0.96 0.01 250);
  --sidebar-foreground: oklch(0.2 0.01 250);
  --sidebar-primary: oklch(0.6 0.25 280);
  --sidebar-primary-foreground: oklch(0.98 0.002 85);
  --sidebar-accent: oklch(0.92 0.01 250);
  --sidebar-accent-foreground: oklch(0.2 0.01 250);
  --sidebar-border: oklch(0.92 0.01 250);
  --sidebar-ring: oklch(0.6 0.25 280);
}

.dark {
  /* Dark theme colors for users who prefer dark mode */
  --background: oklch(0.15 0.01 250);
  --foreground: oklch(0.95 0.01 250);
  --card: oklch(0.18 0.01 250);
  --card-foreground: oklch(0.95 0.01 250);
  --popover: oklch(0.15 0.01 250);
  --popover-foreground: oklch(0.95 0.01 250);
  --primary: oklch(0.65 0.22 200);
  --primary-foreground: oklch(0.15 0.01 250);
  --secondary: oklch(0.25 0.01 250);
  --secondary-foreground: oklch(0.95 0.01 250);
  --muted: oklch(0.35 0.01 250);
  --muted-foreground: oklch(0.75 0.01 250);
  --accent: oklch(0.7 0.25 180);
  --accent-foreground: oklch(0.15 0.01 250);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.28 0.01 250);
  --input: oklch(0.2 0.01 250);
  --ring: oklch(0.65 0.22 200);
  --chart-1: oklch(0.65 0.22 200);
  --chart-2: oklch(0.6 0.2 180);
  --chart-3: oklch(0.7 0.18 160);
  --chart-4: oklch(0.55 0.2 220);
  --chart-5: oklch(0.75 0.22 140);
  --sidebar: oklch(0.15 0.01 250);
  --sidebar-foreground: oklch(0.95 0.01 250);
  --sidebar-primary: oklch(0.65 0.22 200);
  --sidebar-primary-foreground: oklch(0.15 0.01 250);
  --sidebar-accent: oklch(0.28 0.01 250);
  --sidebar-accent-foreground: oklch(0.95 0.01 250);
  --sidebar-border: oklch(0.28 0.01 250);
  --sidebar-ring: oklch(0.65 0.22 200);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  :root {
    color-scheme: light;
  }

  :root:not(.dark) {
    /* Light colorful theme - vibrant and attractive */
    --background: oklch(0.98 0.002 85);
    --foreground: oklch(0.2 0.01 250);
    --card: oklch(0.96 0.01 250);
    --card-foreground: oklch(0.2 0.01 250);
    --popover: oklch(0.98 0.002 85);
    --popover-foreground: oklch(0.2 0.01 250);
    --primary: oklch(0.6 0.25 280);
    --primary-foreground: oklch(0.98 0.002 85);
    --secondary: oklch(0.7 0.2 40);
    --secondary-foreground: oklch(0.98 0.002 85);
    --muted: oklch(0.75 0.01 250);
    --muted-foreground: oklch(0.45 0.01 250);
    --accent: oklch(0.65 0.25 30);
    --accent-foreground: oklch(0.98 0.002 85);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.98 0.002 85);
    --border: oklch(0.92 0.01 250);
    --input: oklch(0.96 0.01 250);
    --ring: oklch(0.6 0.25 280);
    --chart-1: oklch(0.6 0.25 280);
    --chart-2: oklch(0.65 0.25 30);
    --chart-3: oklch(0.7 0.2 120);
    --chart-4: oklch(0.65 0.22 200);
    --chart-5: oklch(0.6 0.25 340);
    --sidebar: oklch(0.96 0.01 250);
    --sidebar-foreground: oklch(0.2 0.01 250);
    --sidebar-primary: oklch(0.6 0.25 280);
    --sidebar-primary-foreground: oklch(0.98 0.002 85);
    --sidebar-accent: oklch(0.92 0.01 250);
    --sidebar-accent-foreground: oklch(0.2 0.01 250);
    --sidebar-border: oklch(0.92 0.01 250);
    --sidebar-ring: oklch(0.6 0.25 280);
  }

  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Updated gradient utilities for light colorful theme */
  .gradient-text {
    background: linear-gradient(135deg, oklch(0.6 0.25 280) 0%, oklch(0.65 0.25 30) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-animated {
    background: linear-gradient(135deg, oklch(0.6 0.25 280) 0%, oklch(0.65 0.25 30) 50%, oklch(0.6 0.25 280) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
  }

  @keyframes gradient-shift {
    0%,
    100% {
      background-position: 0% center;
    }
    50% {
      background-position: 100% center;
    }
  }

  .card-hover {
    transition: all 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px oklch(0.6 0.25 280 / 0.3);
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse-slow {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }

  /* Updated glow effect for light theme */
  .glow-effect {
    box-shadow: 0 0 20px oklch(0.6 0.25 280 / 0.2);
  }

  .glow-effect:hover {
    box-shadow: 0 0 30px oklch(0.6 0.25 280 / 0.4);
  }
}
[V0_FILE]jpg:file="public/images/img-20251103-113702-597.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251103_113702_597-RSDPGQfPZUFSnFkTetjyhh4cTUJ2tO.jpg" isMerged="true"
[V0_FILE]typescript:file="lib/pdf-generator.ts" isEdit="true" isQuickEdit="true"
import jsPDF from "jspdf"

export async function generateCVPDF() {
  const doc = new jsPDF({
    orientation: "portrait",
    unit: "mm",
    format: "a4",
  })

  const pageWidth = doc.internal.pageSize.getWidth()
  const pageHeight = doc.internal.pageSize.getHeight()
  let yPosition = 15
  let currentPage = 1

  const addText = (text: string, fontSize: number, isBold = false, color: [number, number, number] = [0, 0, 0]) => {
    doc.setFontSize(fontSize)
    doc.setTextColor(color[0], color[1], color[2])
    if (isBold) doc.setFont(undefined, "bold")
    else doc.setFont(undefined, "normal")

    const lines = doc.splitTextToSize(text, pageWidth - 20)
    doc.text(lines, 10, yPosition)
    yPosition += (lines.length * fontSize) / 2.5 + 2

    if (yPosition > pageHeight - 15) {
      doc.addPage()
      yPosition = 15
      currentPage++
    }
  }

  const addSection = (title: string) => {
    if (yPosition > pageHeight - 40) {
      doc.addPage()
      yPosition = 15
      currentPage++
    }
    yPosition += 3
    doc.setDrawColor(52, 152, 219)
    doc.setLineWidth(0.5)
    doc.line(10, yPosition, pageWidth - 10, yPosition)
    yPosition += 4
    addText(title, 12, true, [52, 152, 219])
    yPosition += 2
  }

  const headerStartY = yPosition
  const photoWidth = 25
  const photoHeight = 30
  const photoX = pageWidth - photoWidth - 10

  const photoStartY = headerStartY
  const textStartY = headerStartY + 5

  // Add header text on the left, moved down
  doc.setFontSize(18)
  doc.setTextColor(0, 0, 0)
  doc.setFont(undefined, "bold")
  doc.text("MD. IMTIAJ", 10, textStartY)

  doc.setFontSize(11)
  doc.setTextColor(100, 100, 100)
  doc.setFont(undefined, "normal")
  doc.text("Banking Professional & Tech Innovator", 10, textStartY + 7)

  doc.setFontSize(10)
  doc.text("10+ Years of Experience", 10, textStartY + 14)

  // Add photo on the right, at original position
  try {
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1000000249-YghXiaBvBKWZbEHsEfofZS7Dk6fZZ9.jpg"

    await new Promise((resolve, reject) => {
      img.onload = () => {
        doc.addImage(img, "JPEG", photoX, photoStartY, photoWidth, photoHeight)
        resolve(null)
      }
      img.onerror = reject
    })
  } catch (error) {
    console.log("[v0] Could not load image, continuing without photo")
  }

  // Update yPosition to account for header and photo height
  yPosition = Math.max(photoStartY + photoHeight, textStartY + 14) + 5

  // Contact
  addSection("CONTACT INFORMATION")
  addText("Email: imtiajmd180@gmail.com", 10)
  addText("Phone: +880 1670288219 / +880 1401288219", 10)
  addText("Location: Dhaka, Bangladesh", 10)
  addText("LinkedIn: https://www.linkedin.com/in/md-imtiaj-7a91511b1", 10)
  addText("Portfolio: https://imtiaj.vercel.app/", 10)

  // Career Objective
  addSection("CAREER OBJECTIVE")
  addText(
    "A challenging position in an influential and incremental bank where my creative and innovative capabilities can be efficiently utilized.",
    10,
  )

  // Professional Summary
  addSection("PROFESSIONAL SUMMARY")
  addText(
    "Experienced banking professional with 10+ years of expertise in ATM services, cash management, and banking operations. Proficient in Excel automation, data analysis, and AI integration. Skilled in developing solutions using VBA and Google Apps Script.",
    10,
  )

  // Experience
  addSection("PROFESSIONAL EXPERIENCE")
  addText("OFFICER ATM SERVICES", 11, true)
  addText("BRAC Bank Ltd. | May 2018 - Present", 9, false, [100, 100, 100])
  addText(
    "• Manage ATM replenishment and cash distribution\n• Monitor ATM and CDM status and performance\n• Handle reconciliation and customer complaints\n• Prepare daily MIS reports and analysis",
    9,
  )
  yPosition += 2

  addText("OFFICER ATM REPLENISHMENT", 11, true)
  addText("The City Bank Limited | May 2015 - May 2018", 9, false, [100, 100, 100])
  addText(
    "• Supervised ATM replenishment operations\n• Managed cash vault and distribution\n• Coordinated with vendors for booth maintenance",
    9,
  )

  // Education
  addSection("EDUCATION")
  addText("LL.B (Hons) - Law | Green University of Bangladesh | 2010 | CGPA: 3.66/4.00", 10)
  addText("H.S.C - Commerce | Mohanagar College | 2006 | Result: 3.70/5.00", 10)
  addText("S.S.C - Science | Deuly Polli Mangal High School | 2004 | Result: 2.69/5.00", 10)

  // Certifications
  addSection("CERTIFICATIONS & TRAINING")
  addText("BRAC Bank Learning Portal (ALO):", 10, true)
  addText(
    "Code of Conduct (72) • Enterprise Risk Management (63) • Treasury & Financial Institutions (80) • AML & CFT (60) • Information Security (72)",
    9,
  )
  yPosition += 2
  addText("Bangladesh Institute of Bank Management (BIBM): Banking Foundation Course", 10)

  // Skills
  addSection("TECHNICAL SKILLS")
  addText("Banking Operations: ATM Management, Cash Management, Reconciliation, CDM Operations", 9)
  addText("Data Analysis: Advanced Excel, VBA, Automation, Dynamic Reports", 9)
  addText("Web Development: Google Apps Script, Web Applications, AI Integration", 9)

  // Projects
  addSection("PROJECTS")
  addText("VBA Projects: RMS (Replenishment Management System), Captured Card Process, Fixed Asset Tracker", 9)
  addText("Google Apps Script: ATM & Booth Management, Inspection Check List, Dynamic Report Download", 9)

  yPosition += 30

  if (yPosition > pageHeight - 40) {
    doc.addPage()
    yPosition = 20
  }

  doc.setFontSize(11)
  doc.setTextColor(0, 0, 0)
  doc.setFont(undefined, "bold")
  doc.text("DECLARATION", 10, yPosition)

  yPosition += 10
  doc.setFontSize(10)
  doc.setFont(undefined, "normal")
  const declarationText = doc.splitTextToSize(
    "I hereby declare that all information provided in this CV is true to my knowledge. If required and where applicable, this document can be supported by appropriate authentic certificates/papers.",
    pageWidth - 20,
  )
  doc.text(declarationText, 10, yPosition)

  yPosition += 14

  // Add signature image just above the line
  try {
    const signatureImg = new Image()
    signatureImg.crossOrigin = "anonymous"
    signatureImg.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Adobe%20Express%20-%20file-ndc93mSVfmlDKXDU1Ur5pN5mSbvk0f.png"

    await new Promise((resolve, reject) => {
      signatureImg.onload = () => {
        doc.addImage(signatureImg, "PNG", 10, yPosition - 8, 30, 10)
        resolve(null)
      }
      signatureImg.onerror = reject
    })
  } catch (error) {
    console.log("[v0] Could not load signature image, continuing without it")
  }

  yPosition += 8
  doc.setLineWidth(0.5)
  doc.line(10, yPosition, 50, yPosition)

  yPosition += 5
  doc.setFontSize(10)
  doc.setFont(undefined, "bold")
  doc.text("Md. Imtiaj", 10, yPosition)

  // Footer
  yPosition = pageHeight - 10
  doc.setFontSize(8)
  doc.setTextColor(150, 150, 150)
  doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 10, yPosition)

  doc.save("Md_Imtiaj_CV.pdf")
}
[V0_FILE]jpg:file="public/images/1000000249.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1000000249-YghXiaBvBKWZbEHsEfofZS7Dk6fZZ9.jpg"
[V0_FILE]png:file="public/images/adobe-20express-20-20file.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Adobe%20Express%20-%20file-ndc93mSVfmlDKXDU1Ur5pN5mSbvk0f.png"</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This