{"id":39967995,"url":"https://github.com/luandro/aldeia-manaka","last_synced_at":"2026-01-18T22:03:43.860Z","repository":{"id":298704741,"uuid":"1000544941","full_name":"luandro/aldeia-manaka","owner":"luandro","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-12T11:57:27.000Z","size":45,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-12T12:47:47.286Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luandro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-12T00:41:30.000Z","updated_at":"2025-06-12T00:41:36.000Z","dependencies_parsed_at":"2025-06-12T12:47:50.422Z","dependency_job_id":"e39969df-e2de-4744-a2e8-f1dee0b456c2","html_url":"https://github.com/luandro/aldeia-manaka","commit_stats":null,"previous_names":["luandro/aldeia-manaka"],"tags_count":0,"template":false,"template_full_name":"luandro/responsive-timeline","purl":"pkg:github/luandro/aldeia-manaka","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luandro%2Faldeia-manaka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luandro%2Faldeia-manaka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luandro%2Faldeia-manaka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luandro%2Faldeia-manaka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luandro","download_url":"https://codeload.github.com/luandro/aldeia-manaka/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luandro%2Faldeia-manaka/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28552198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T20:59:07.572Z","status":"ssl_error","status_checked_at":"2026-01-18T20:59:02.799Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-18T22:03:43.161Z","updated_at":"2026-01-18T22:03:43.852Z","avatar_url":"https://github.com/luandro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🕒 Responsive Timeline\n\nA modern, fully customizable React timeline component built with Vite. Features smooth scroll animations, responsive design, and JSON-based configuration.\n\n![Timeline Preview](https://via.placeholder.com/800x400/67CC8E/ffffff?text=Responsive+Timeline+Preview)\n\n## ✨ Features\n\n- 🎨 **Fully Customizable** - Colors, animations, and content via JSON configuration\n- 📱 **Responsive Design** - Adapts beautifully to all screen sizes\n- ⚡ **Optimized Performance** - Uses Intersection Observer API for smooth scrolling\n- 🎭 **Smooth Animations** - CSS transitions with customizable timing\n- 🔧 **Easy Configuration** - JSON-based setup for quick customization\n- 🚀 **Modern Stack** - Built with React 19 + Vite\n- 📦 **Zero Dependencies** - No jQuery or external animation libraries\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+\n- npm or yarn\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone \u003cyour-repo-url\u003e\ncd aldeia-manaka\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nVisit `http://localhost:5173` to see your timeline in action!\n\n## 📋 Available Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | Start development server with hot reload |\n| `npm run build` | Build for production |\n| `npm run preview` | Preview production build locally |\n| `npm run lint` | Run ESLint for code quality |\n\n## 🎨 Customization\n\n### Separated Content and Themes\n\nThe timeline uses a clean separation between content and themes:\n\n**Content** (`src/data/timeline-content.json`):\n```json\n{\n  \"title\": \"Your Timeline Title\",\n  \"items\": [\n    {\n      \"id\": \"unique-id\",\n      \"year\": \"2024\",\n      \"title\": \"Event Title\",\n      \"content\": \"Event description...\"\n    }\n  ]\n}\n```\n\n**Theme** (`src/data/timeline-config.json`):\n```json\n{\n  \"name\": \"Theme Name\",\n  \"theme\": {\n    \"primaryColor\": \"#67CC8E\",\n    \"secondaryColor\": \"#56BC83\",\n    \"backgroundColor\": \"#faf8eb\",\n    \"textColor\": \"#ffffff\",\n    \"headerBackground\": \"#3d9e67\"\n  },\n  \"animation\": {\n    \"duration\": \"0.7s\",\n    \"easing\": \"ease\",\n    \"staggerDelay\": \"100\"\n  }\n}\n```\n\n### Theme Options\n\n| Property | Description | Default |\n|----------|-------------|---------|\n| `primaryColor` | Main timeline color | `#67CC8E` |\n| `secondaryColor` | Gradient secondary color | `#56BC83` |\n| `backgroundColor` | Timeline background | `#faf8eb` |\n| `textColor` | Text color | `#ffffff` |\n| `headerBackground` | Header background color | `#3d9e67` |\n\n### Animation Options\n\n| Property | Description | Default |\n|----------|-------------|---------|\n| `duration` | Animation duration | `0.7s` |\n| `easing` | CSS easing function | `ease` |\n| `staggerDelay` | Delay between items (ms) | `100` |\n\n### Timeline Items\n\nEach timeline item supports:\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `id` | string | No | Unique identifier |\n| `year` | string | Yes | Display year/date |\n| `title` | string | No | Optional title |\n| `content` | string | Yes | Main content text |\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── components/\n│   ├── Timeline.jsx          # Main timeline component\n│   ├── TimelineItem.jsx      # Individual timeline item\n│   └── ThemeSwitcher.jsx     # Theme switcher button\n├── data/\n│   ├── timeline-content.json # Timeline content (title, items)\n│   ├── timeline-config.json  # Default theme configuration\n│   ├── dark-theme-config.json # Dark theme\n│   └── colorful-theme-config.json # Colorful theme\n├── App.jsx                   # Root component with theme management\n├── App.css                   # Timeline \u0026 theme switcher styles\n├── index.css                 # Global styles\n└── main.jsx                  # App entry point\n```\n\n## 🎯 Performance Optimizations\n\n- **Intersection Observer API**: Replaces scroll event listeners for better performance\n- **CSS Custom Properties**: Enables dynamic theming without JavaScript\n- **Optimized Animations**: Uses CSS transitions instead of JavaScript animations\n- **Component Memoization**: Prevents unnecessary re-renders\n- **Lazy Loading**: Timeline items animate in only when visible\n\n## 📱 Responsive Breakpoints\n\n| Breakpoint | Description | Changes |\n|------------|-------------|---------|\n| `\u003e 1020px` | Desktop | Full width timeline items (450px) |\n| `700px - 1020px` | Tablet | Responsive width (41vw) |\n| `\u003c 700px` | Mobile | Single column layout, full width |\n\n## 🎨 Custom Themes\n\n### Creating a Custom Theme\n\n1. Modify `src/data/timeline-config.json`\n2. Update the `theme` object with your colors\n3. Save and see changes instantly with hot reload\n\n### Example: Dark Theme\n\n```json\n{\n  \"theme\": {\n    \"primaryColor\": \"#2d3748\",\n    \"secondaryColor\": \"#4a5568\",\n    \"backgroundColor\": \"#1a202c\",\n    \"textColor\": \"#e2e8f0\",\n    \"headerBackground\": \"#2b6cb0\"\n  }\n}\n```\n\n### Example: Colorful Theme\n\n```json\n{\n  \"theme\": {\n    \"primaryColor\": \"#ed64a6\",\n    \"secondaryColor\": \"#f687b3\",\n    \"backgroundColor\": \"#fef5e7\",\n    \"textColor\": \"#ffffff\",\n    \"headerBackground\": \"#d53f8c\"\n  }\n}\n```\n\n## 🔧 Advanced Configuration\n\n### Custom Animation Timing\n\n```json\n{\n  \"animation\": {\n    \"duration\": \"1.2s\",\n    \"easing\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"staggerDelay\": \"200\"\n  }\n}\n```\n\n### Loading Data from API\n\nReplace the static JSON import in `App.jsx`:\n\n```jsx\nuseEffect(() =\u003e {\n  fetch('/api/timeline-config')\n    .then(response =\u003e response.json())\n    .then(data =\u003e setConfig(data))\n}, [])\n```\n\n### Built-in Theme Switcher\n\nThe timeline includes a beautiful theme switcher button in the top-right corner:\n\n- **🎨 Visual theme preview** with color dots\n- **Smooth transitions** between themes\n- **Mobile responsive** design\n- **3 built-in themes**: Default Green, Dark, Colorful Pink\n- **Easy to extend** with more themes\n\nThe theme switcher automatically:\n- Preserves timeline content across theme changes\n- Applies smooth CSS transitions\n- Updates all theme variables instantly\n- Maintains responsive behavior\n\n## 🚀 Deployment\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\nThe `dist` folder contains the optimized production build.\n\n### Deploy to Vercel\n\n```bash\nnpm install -g vercel\nvercel --prod\n```\n\n### Deploy to Netlify\n\n```bash\nnpm run build\n# Upload dist folder to Netlify\n```\n\n### Deploy to GitHub Pages\n\nThis project includes automated GitHub Pages deployment via GitHub Actions.\n\n**Automatic Deployment:**\n- Push to `main` branch triggers automatic deployment\n- No manual setup required after initial configuration\n- Built files are automatically deployed to GitHub Pages\n\n**Manual Setup (if needed):**\n1. Go to your repository Settings → Pages\n2. Set Source to \"GitHub Actions\"\n3. Push to main branch to trigger deployment\n\n**Manual Deployment:**\n```bash\nnpm install --save-dev gh-pages\nnpm run build\nnpx gh-pages -d dist\n```\n\n## 🧪 Testing\n\n### Running Tests\n\n```bash\n# Install testing dependencies\nnpm install --save-dev @testing-library/react @testing-library/jest-dom vitest\n\n# Run tests\nnpm run test\n```\n\n### Example Test\n\n```jsx\nimport { render, screen } from '@testing-library/react'\nimport Timeline from './components/Timeline'\n\ntest('renders timeline title', () =\u003e {\n  const config = { title: 'Test Timeline', items: [] }\n  render(\u003cTimeline config={config} /\u003e)\n  expect(screen.getByText('Test Timeline')).toBeInTheDocument()\n})\n```\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\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.txt) file for details.\n\n## 🙏 Acknowledgments\n\n- Original timeline design inspiration from CodePen community\n- React team for the amazing framework\n- Vite team for the lightning-fast build tool\n- Intersection Observer API for smooth performance\n\n## 📞 Support\n\n- 📧 Email: your-email@example.com\n- 🐛 Issues: [GitHub Issues](https://github.com/luandro/aldeia-manaka/issues)\n- 💬 Discussions: [GitHub Discussions](https://github.com/luandro/aldeia-manaka/discussions)\n\n## 🚀 Quick Customization Examples\n\n### Add Your Timeline Content\n```json\n// src/data/timeline-content.json\n{\n  \"title\": \"My Company Timeline\",\n  \"items\": [\n    {\n      \"id\": \"founding\",\n      \"year\": \"2020\",\n      \"title\": \"Company Founded\",\n      \"content\": \"Started our journey with a vision to change the world.\"\n    },\n    {\n      \"id\": \"growth\",\n      \"year\": \"2023\",\n      \"title\": \"Major Growth\",\n      \"content\": \"Expanded to 50+ employees and launched new products.\"\n    }\n  ]\n}\n```\n\n### Create Custom Theme\n```json\n// src/data/ocean-theme-config.json\n{\n  \"name\": \"Ocean Blue\",\n  \"theme\": {\n    \"primaryColor\": \"#0ea5e9\",\n    \"secondaryColor\": \"#0284c7\",\n    \"backgroundColor\": \"#f0f9ff\",\n    \"textColor\": \"#ffffff\",\n    \"headerBackground\": \"#0369a1\"\n  },\n  \"animation\": {\n    \"duration\": \"0.9s\",\n    \"easing\": \"ease-out\",\n    \"staggerDelay\": \"120\"\n  }\n}\n```\n\n### Add Theme to App\n```jsx\n// src/App.jsx - Add your custom theme\nimport oceanTheme from './data/ocean-theme-config.json'\n\nconst themes = {\n  default: defaultTheme,\n  dark: darkTheme,\n  colorful: colorfulTheme,\n  ocean: oceanTheme  // Your new theme\n}\n```\n\n---\n\nMade with ❤️ and React\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluandro%2Faldeia-manaka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluandro%2Faldeia-manaka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluandro%2Faldeia-manaka/lists"}