{"_id":"@blaze_linaung/portfolio-ui","_rev":"2-ecaf390c86d9a9fcdfba0ad8df2020ad","name":"@blaze_linaung/portfolio-ui","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@blaze_linaung/portfolio-ui","version":"1.0.0","keywords":["react","portfolio","ui-components","design-system","modern","framer-motion","responsive"],"author":{"name":"Blaze"},"license":"MIT","_id":"@blaze_linaung/portfolio-ui@1.0.0","maintainers":[{"name":"blaze_linaung","email":"channelpieces@gmail.com"}],"homepage":"https://github.com/yourusername/portfolio-ui#readme","bugs":{"url":"https://github.com/yourusername/portfolio-ui/issues"},"dist":{"shasum":"349a1d9f5598619475c3b42c5e91398fb8a3173d","tarball":"https://registry.npmjs.org/@blaze_linaung/portfolio-ui/-/portfolio-ui-1.0.0.tgz","fileCount":8,"integrity":"sha512-9KPE8wl/RrppPl3dY/y/PRE1BqR3KhBjUgWUfnifaaKDXe+tFtZ0Ku3ywDJIWjte/Mij7mF2apOHf82G4YTCow==","signatures":[{"sig":"MEUCIQC+zZYT+EbXFNsLT4wbIoG4MmKkTuyK4p3I3O6dDfm8lgIgNYGPx+4szUYH92i8K8bsUS0msLRZu4PyLcMpQOp+Suo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":568112},"main":"dist/index.cjs","type":"module","style":"dist/index.css","module":"dist/index.esm.js","scripts":{"dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"blaze_linaung","email":"channelpieces@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/portfolio-ui.git","type":"git"},"_npmVersion":"10.7.0","description":"Modern UI components for portfolio websites","directories":{},"_nodeVersion":"20.15.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","rollup":"^3.26.0","react-dom":"^18.2.0","@babel/core":"^7.22.0","autoprefixer":"^10.4.0","lucide-react":"^0.263.0","framer-motion":"^10.0.0","@babel/preset-env":"^7.22.0","@babel/preset-react":"^7.22.0","@rollup/plugin-babel":"^6.0.0","rollup-plugin-postcss":"^4.0.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","lucide-react":">=0.200.0","framer-motion":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/portfolio-ui_1.0.0_1752690434414_0.3313330583979155","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@blaze_linaung/portfolio-ui","version":"1.0.2","description":"Modern UI components for portfolio websites","type":"module","main":"dist/index.cjs","module":"dist/index.esm.js","style":"dist/index.css","scripts":{"build":"rollup -c rollup.config.js","dev":"rollup -c rollup.config.js -w","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","framer-motion":">=6.0.0","lucide-react":">=0.200.0"},"devDependencies":{"@babel/core":"^7.22.0","@babel/preset-env":"^7.22.0","@babel/preset-react":"^7.22.0","@rollup/plugin-babel":"^6.0.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","autoprefixer":"^10.4.0","framer-motion":"^10.0.0","lucide-react":"^0.263.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.26.0","rollup-plugin-postcss":"^4.0.0"},"keywords":["react","portfolio","ui-components","design-system","modern","framer-motion","responsive"],"author":{"name":"Blaze"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/yourusername/portfolio-ui.git"},"bugs":{"url":"https://github.com/yourusername/portfolio-ui/issues"},"homepage":"https://github.com/yourusername/portfolio-ui#readme","_id":"@blaze_linaung/portfolio-ui@1.0.2","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-dWXeZQvBhS67mahTWKHYFDkagp99vLydn0TARHM1TxG8Na3zM/TMR6wBYyATFSHL/6yQSZcvK3E6sGnSfTbQvA==","shasum":"9c7bb3c77f9787892998d611b4a8c71a8c3efbb3","tarball":"https://registry.npmjs.org/@blaze_linaung/portfolio-ui/-/portfolio-ui-1.0.2.tgz","fileCount":8,"unpackedSize":318591,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCSRtQ4/GV0Eqfb/6+rtKRV2LP3PZyDP/MR+uaAMmkhWgIgHI7OSbm6GDGHqqCY1w9Wl7i2Sa0GIquaS01uE0dcNAY="}]},"_npmUser":{"name":"blaze_linaung","email":"channelpieces@gmail.com"},"directories":{},"maintainers":[{"name":"blaze_linaung","email":"channelpieces@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/portfolio-ui_1.0.2_1752691207339_0.6663638977683863"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-16T18:27:14.316Z","modified":"2025-07-16T18:40:07.712Z","1.0.0":"2025-07-16T18:27:14.730Z","1.0.2":"2025-07-16T18:40:07.534Z"},"bugs":{"url":"https://github.com/yourusername/portfolio-ui/issues"},"author":{"name":"Blaze"},"license":"MIT","homepage":"https://github.com/yourusername/portfolio-ui#readme","keywords":["react","portfolio","ui-components","design-system","modern","framer-motion","responsive"],"repository":{"type":"git","url":"git+https://github.com/yourusername/portfolio-ui.git"},"description":"Modern UI components for portfolio websites","maintainers":[{"name":"blaze_linaung","email":"channelpieces@gmail.com"}],"readme":"# Portfolio UI Components\n\nModern, responsive React components for creating stunning portfolio websites. Built with Framer Motion animations and contemporary design patterns.\n\n## Features\n\n- šŸŽØ Modern design with dark/light theme support\n- šŸ“± Fully responsive components\n- āš” Smooth animations with Framer Motion\n- šŸŽÆ TypeScript-friendly\n- šŸš€ Optimized for performance\n- šŸ› ļø Highly customizable\n\n## Installation\n\n```bash\nnpm install @yourname/portfolio-ui framer-motion lucide-react\n```\n\n## Quick Start\n\n```jsx\nimport {\n Hero,\n Navigation,\n ProjectCard,\n SkillBadge,\n ContactForm,\n} from \"@yourname/portfolio-ui\";\n\nfunction App() {\n return (\n
\n \n \n {/* More components... */}\n
\n );\n}\n```\n\n## Components\n\n### Hero\n\nA modern hero section with animated text, profile image, and social links.\n\n```jsx\n\n```\n\n### Navigation\n\nResponsive navigation with smooth scrolling and theme toggle.\n\n```jsx\n\n```\n\n### ProjectCard\n\nModern project cards with hover effects and action buttons.\n\n```jsx\n\n```\n\n### SkillBadge\n\nAnimated skill badges with proficiency levels.\n\n```jsx\n// Individual badge\n\n\n// Skills grid\n\n\n// Skills by category\n\n```\n\n### ContactForm\n\nModern contact form with validation and animations.\n\n```jsx\n {\n // Handle form submission\n console.log(\"Form data:\", formData);\n // Send to your backend/service\n }}\n showSocialLinks={true}\n socialLinks={{\n email: \"mailto:you@example.com\",\n linkedin: \"https://linkedin.com/in/username\",\n github: \"https://github.com/username\",\n }}\n/>\n```\n\n## Theming\n\nThe components support both dark and light themes. Toggle between themes using the Navigation component or programmatically:\n\n```jsx\n// Set theme programmatically\ndocument.documentElement.setAttribute(\"data-theme\", \"light\");\n// or\ndocument.documentElement.setAttribute(\"data-theme\", \"dark\");\n```\n\n## Customization\n\n### CSS Variables\n\nYou can customize the appearance by overriding CSS variables:\n\n```css\n:root {\n --color-primary: #6366f1;\n --color-secondary: #10b981;\n --bg-primary: #0f0f23;\n --text-primary: #ffffff;\n /* ... more variables */\n}\n```\n\n### Component Props\n\nAll components accept className props for custom styling:\n\n```jsx\n\n\n```\n\n## Animation Configuration\n\nComponents use Framer Motion for animations. You can customize animation variants:\n\n```jsx\n// Example: Custom hero animation\nconst customVariants = {\n hidden: { opacity: 0, y: 50 },\n visible: { opacity: 1, y: 0, transition: { duration: 1 } },\n};\n\n// Note: This is for advanced customization\n```\n\n## Examples\n\n### Complete Portfolio Layout\n\n```jsx\nimport React from \"react\";\nimport {\n Navigation,\n Hero,\n ProjectCard,\n SkillsGrid,\n ContactForm,\n} from \"@yourname/portfolio-ui\";\n\nconst portfolioData = {\n projects: [\n {\n title: \"E-commerce Platform\",\n description: \"Full-stack e-commerce solution with React and Node.js\",\n image: \"/projects/ecommerce.jpg\",\n tags: [\"React\", \"Node.js\", \"MongoDB\", \"Stripe\"],\n githubUrl: \"https://github.com/username/ecommerce\",\n liveUrl: \"https://ecommerce-demo.com\",\n featured: true,\n },\n // ... more projects\n ],\n skills: [\n { name: \"React\", level: \"expert\", category: \"frontend\" },\n { name: \"Node.js\", level: \"advanced\", category: \"backend\" },\n { name: \"MongoDB\", level: \"intermediate\", category: \"database\" },\n // ... more skills\n ],\n};\n\nfunction Portfolio() {\n return (\n
\n \n\n
\n \n
\n\n
\n
\n

Featured Projects

\n
\n {portfolioData.projects.map((project, index) => (\n \n ))}\n
\n
\n
\n\n
\n
\n

Skills & Technologies

\n \n
\n
\n\n
\n {\n // Handle form submission\n const response = await fetch(\"/api/contact\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to send message\");\n }\n }}\n />\n
\n
\n );\n}\n\nexport default Portfolio;\n```\n\n### Custom Styling Example\n\n```css\n/* Custom styles for your portfolio */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n/* Override component styles */\n.my-custom-hero {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.my-custom-card {\n border: 2px solid var(--color-primary);\n}\n```\n\n## Development\n\n### Building the Package\n\n```bash\n# Development mode with watch\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Publish to npm\nnpm publish\n```\n\n### Project Structure\n\n```\nportfolio-ui/\nā”œā”€ā”€ src/\nā”‚ ā”œā”€ā”€ components/\nā”‚ ā”‚ ā”œā”€ā”€ Hero/\nā”‚ ā”‚ ā”œā”€ā”€ ProjectCard/\nā”‚ ā”‚ ā”œā”€ā”€ Navigation/\nā”‚ ā”‚ ā”œā”€ā”€ SkillBadge/\nā”‚ ā”‚ ā”œā”€ā”€ ContactForm/\nā”‚ ā”‚ ā””ā”€ā”€ index.js\nā”‚ ā”œā”€ā”€ styles/\nā”‚ ā”‚ ā””ā”€ā”€ globals.css\nā”‚ ā””ā”€ā”€ index.js\nā”œā”€ā”€ dist/\nā”œā”€ā”€ package.json\nā””ā”€ā”€ rollup.config.js\n```\n\n## Browser Support\n\n- Chrome 60+\n- Firefox 55+\n- Safari 12+\n- Edge 79+\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT Ā© [Your Name]\n\n## Roadmap\n\n- [ ] Add more component variants\n- [ ] Implement dark/light theme animations\n- [ ] Add TypeScript definitions\n- [ ] Create Storybook documentation\n- [ ] Add unit tests\n- [ ] Performance optimizations\n","readmeFilename":"README.md"}