1import{j as e}from"./vendor-motion-C0Ykwh7C.js";import{f as s,g as t,h as a,i as r,S as i,e as m}from"./index-DQYSP24l.js";import{P as c}from"./ProjectPageTemplate-BukZfH_t.js";import{g as d,f as l,h as p,i as h}from"./vendor-icons-CZ0fHw8h.js";import"./vendor-react-D8ZVE-1i.js";import"./index-tD3BwZqC.js";import"./index-B32Yb0IV.js";import"./index-C9VRkwIY.js";import"./index-CMnRXDm6.js";import"./Footer-ClRpSHv8.js";import"./ProjectCard-BwLNlIzs.js";import"./projects-Clb5hPl-.js";import"./Seo-D8Plyq5-.js";const F=({isDark:o,toggleTheme:n})=>e.jsx(c,{isDark:o,toggleTheme:n,title:"Portfolio v2",description:"I rebuilt my portfolio with React 18, TypeScript, and Framer Motion to showcase modern frontend skills. It features scroll-triggered animations, a dark mode, and project case studies that are both interactive and mobile-friendly. This was a milestone where I moved from a static site to a full React application.",coverSrc:"/images/projects/Portfolio v2.webp",chips:[{name:"React 18",icon:e.jsx(s,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"TypeScript",icon:e.jsx(t,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Tailwind CSS",icon:e.jsx(a,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Framer Motion",icon:e.jsx(r,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Vite",icon:e.jsx(i,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})}],githubUrl:"https://github.com/dhruba-datta/Portfolio-v2",features:[{id:"components",icon:e.jsx(s,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"React Component Architecture",summary:"Organized, reusable React components with proper TypeScript types",details:["Functional components with custom hooks for state and effects","Component organization by feature and domain","Type safety across all props and data","Modular, maintainable structure"]},{id:"animations",icon:e.jsx(d,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Framer Motion Animations",summary:"Scroll-triggered reveals and smooth transitions",details:["Staggered entrance effects for lists and grids","Scroll-based animations that don't feel jarring","Respects prefers-reduced-motion for accessibility"]},{id:"responsive",icon:e.jsx(l,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Mobile-First Responsive Design",summary:"Looks good on phones, tablets, and desktops",details:["Tailwind CSS for rapid responsive layouts","Dark mode and light mode support","Touch-friendly navigation"]},{id:"dark-mode",icon:e.jsx(p,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Dark and Light Themes",summary:"System-aware color switching and manual toggle",details:["Smooth transitions between themes","Respects system preferences on first visit","Manual toggle button for user choice"]},{id:"accessibility",icon:e.jsx(h,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Semantic HTML and SEO",summary:"Built with accessibility standards in mind",details:["Proper heading hierarchy and landmarks","Open Graph and meta tags for sharing","Keyboard navigable throughout"]}],techSectionTitle:"Stack",techItems:[{icon:e.jsx(s,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React 18",description:"Functional components with hooks, custom hooks for reusable logic."},{icon:e.jsx(t,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"TypeScript",description:"Static type checking for safer code and better IDE support."},{icon:e.jsx(a,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Tailwind CSS",description:"Utility-first CSS framework for rapid layout and responsive design."},{icon:e.jsx(r,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Framer Motion",description:"Animation library for scroll effects and page transitions."},{icon:e.jsx(i,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Vite",description:"Fast build tool with instant dev server and optimized builds."},{icon:e.jsx(m,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Netlify",description:"Hosting with automatic deployments from GitHub."}],useCases:["A personal portfolio using modern React patterns and animations","Template for other developers wanting to build similar sites","Learning project to master React 18, TypeScript, and design animations"],howToSteps:[e.jsxs(e.Fragment,{children:["Clone: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"git clone https://github.com/dhruba-datta/Portfolio-v2"})]}),e.jsxs(e.Fragment,{children:["Install dependencies: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm install"})]}),e.jsxs(e.Fragment,{children:["Start dev server: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run dev"})]}),e.jsxs(e.Fragment,{children:["Edit content in ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded",children:"src/components/"})," and ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded",children:"src/pages/"})]}),e.jsxs(e.Fragment,{children:["Build for production: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run build"})]})],contactCTA:{title:"Building a React portfolio?",description:"I help developers create beautiful, interactive portfolios that showcase their best work.",primaryButtonText:"Get Started",secondaryButtonText:"View All Projects"}});export{F as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.