{"id":29637681,"url":"https://github.com/lxnid/me","last_synced_at":"2026-04-11T05:37:22.172Z","repository":{"id":304942303,"uuid":"1020623691","full_name":"lxnid/me","owner":"lxnid","description":"A modern, interactive developer portfolio built with Next.js, React, and TailwindCSS. This site showcases my projects, skills, and experience with smooth animations, 3D effects, and a clean, responsive design.","archived":false,"fork":false,"pushed_at":"2026-02-16T04:34:30.000Z","size":24836,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T12:02:00.097Z","etag":null,"topics":["framer-motion","fullstack-development","gsap","nextjs","portfolio","react","react-icons","responsive-web-design","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://dinilr.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxnid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-16T06:42:15.000Z","updated_at":"2026-02-16T04:34:33.000Z","dependencies_parsed_at":"2025-07-17T14:28:52.342Z","dependency_job_id":"65f3f503-edb5-4c32-a28d-2e33333e0300","html_url":"https://github.com/lxnid/me","commit_stats":null,"previous_names":["lxnid/me"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lxnid/me","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxnid%2Fme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxnid%2Fme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxnid%2Fme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxnid%2Fme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxnid","download_url":"https://codeload.github.com/lxnid/me/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxnid%2Fme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31670376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["framer-motion","fullstack-development","gsap","nextjs","portfolio","react","react-icons","responsive-web-design","tailwindcss","typescript"],"created_at":"2025-07-21T19:01:08.516Z","updated_at":"2026-04-11T05:37:22.164Z","avatar_url":"https://github.com/lxnid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hirusha Dinil – Portfolio\n\nA modern, high-performance developer portfolio built with **Astro 5**, **React 19**, and **Tailwind CSS 4**. This site showcases my projects, skills, and experience with smooth animations, responsive design, and optimized performance through Astro's island architecture.\n\n**Live Site**: https://dinilr.com\n**Deployed on**: Cloudflare Workers\n\n## ✨ Features\n\n- **Lightning-fast performance** with Astro's partial hydration (island architecture)\n- **Interactive project gallery** with detailed case study pages\n- **Full-featured Blog** with MDX support, categorization, and \"likes\" functionality\n- **Smooth animations** using Framer Motion, GSAP with ScrollTrigger, and Lenis scroll\n- **SEO Optimized** with structured data (JSON-LD), sitemap, and keyword metadata\n- **Responsive, mobile-first design** optimized for all devices\n- **Archive section** showcasing previous portfolio versions\n- **Dedicated contact page** with multiple contact methods\n- **Dark mode design** with carefully chosen color palette\n- **Comprehensive project content** with sections for challenge, solution, technical details, and results\n\n## 🛠️ Tech Stack\n\n### Core Framework\n- **Astro 5** – Static site generation with island architecture\n- **React 19** – UI components with selective client-side hydration\n- **MDX** – Dynamic content for blog posts with interactive components\n\n### Styling \u0026 CSS\n- **Tailwind CSS 4** – Utility-first CSS with Vite plugin\n- **@tailwindcss/typography** – Optimized styles for MDX blog content\n- **Custom Fonts** – PP Neuemontreal for distinctive typography\n\n### Animation \u0026 Interactivity\n- **Framer Motion** (v12.23.0) – React component animations and transitions\n- **GSAP 3** (v3.13.0) – Advanced timeline animations and scroll triggers\n- **Lenis** (v1.2.0) – Smooth, physics-based scrolling\n- **split-type** – Text splitting for character-level animations\n- **react-intersection-observer** – Scroll-triggered animations\n\n### Backend \u0026 SEO\n- **Firebase** – Real-time database for blog post likes\n- **@astrojs/sitemap** – Automatic sitemap generation\n- **JSON-LD** – Structured data for enhanced search visibility\n\n### Developer Experience\n- **TypeScript** – Full type safety throughout the codebase\n- **React Icons** – Comprehensive icon library\n- **Vite** – Lightning-fast build tool integration with Astro\n\n## 📁 Project Structure\n\n```\n/\n├── src/\n│   ├── layouts/\n│   │   ├── BaseLayout.astro        # Root layout with metadata and structured data\n│   │   └── BlogLayout.astro        # Specialized layout for MDX blog posts\n│   ├── pages/\n│   │   ├── index.astro             # Home page with hero, featured projects, about\n│   │   ├── contact.astro           # Contact page\n│   │   ├── archive.astro           # Archive of previous portfolio versions\n│   │   ├── blog/\n│   │   │   ├── index.astro         # Blog index with tag filtering\n│   │   │   └── [...slug].astro     # Dynamic MDX blog post routes\n│   │   └── work/\n│   │       ├── index.astro         # All projects gallery\n│   │       └── [slug].astro        # Dynamic project detail pages\n│   ├── content/\n│   │   ├── config.ts               # Content collections schema (blog)\n│   │   └── blog/                   # MDX blog posts and associated images\n│   ├── components/\n│   │   ├── blog/                   # Blog-specific React/Astro components\n│   │   ├── Header.tsx              # Hero section with animated text (GSAP)\n│   │   ├── Navbar.tsx              # Navigation with social links\n│   │   ├── Footer.tsx              # Footer with contact info\n│   │   ├── ProjectItem.tsx         # Project list item with hover effect\n│   │   ├── ProjectPage.tsx         # Detailed project page with sections\n│   │   ├── Projects.astro          # Featured projects carousel\n│   │   ├── CustomCursor.tsx        # Enhanced custom cursor interaction\n│   │   └── ...\n│   ├── hooks/\n│   │   └── useLikes.ts             # Firebase hook for blog post interactions\n│   ├── lib/\n│   │   ├── firebase.ts             # Firebase client configuration\n│   │   └── animations.ts           # Shared Framer Motion variants\n│   ├── data/\n│   │   ├── projects.ts             # Project data with TypeScript interfaces\n│   │   └── ArchiveData.ts          # Previous portfolio versions\n│   └── styles/\n│       └── globals.css             # Global styles and custom font imports\n├── astro.config.mjs                # Astro configuration with MDX and sitemap\n├── wrangler.toml                   # Cloudflare Workers configuration\n└── package.json                    # Dependencies and scripts\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+ and npm\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/lxnid/me.git\ncd me\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nThe site will be available at `http://localhost:3000`\n\n### Development Commands\n\n```bash\nnpm run dev        # Start development server with hot reload\nnpm run build      # Build for production (outputs to dist/)\nnpm run preview    # Preview production build locally\nnpm run lint       # Run ESLint\nnpm run deploy     # Deploy to Cloudflare Workers\n```\n\n## 🏗️ Astro Island Architecture\n\nThis portfolio uses **Astro's island architecture** for optimal performance:\n\n- **Zero JavaScript by default**: Static HTML pages with no hydration overhead\n- **Selective Hydration**: React components only load JavaScript when needed using `client:` directives:\n  - `client:only=\"react\"` – Components that require browser APIs (cursor, animations)\n  - `client:visible` – Components that hydrate when visible in viewport\n  - `client:load` – Components that hydrate on page load\n\n### Example Client Directive Usage\n\n```astro\n\u003c!-- Hydrate on page load --\u003e\n\u003cNavbar client:load /\u003e\n\n\u003c!-- Hydrate when visible --\u003e\n\u003cProjects client:visible /\u003e\n\n\u003c!-- Browser-only component --\u003e\n\u003cCustomCursor client:only=\"react\" /\u003e\n```\n\nThis approach dramatically reduces JavaScript bundle size and improves Core Web Vitals.\n\n## 📝 Project Data Structure\n\nProjects are defined in `src/data/projects.ts` with TypeScript interfaces:\n\n```typescript\ninterface Project {\n  id: number;\n  title: string;\n  image: string;                    // Main hero image\n  galleryImage?: string;            // Hover preview image\n  link?: string;                    // External project link\n  description: string;\n  headline: string;                 // Short tagline\n  technologies: string[];\n  date: string;\n  role: string;\n  sections?: ProjectSection[];      // Detailed case study sections\n  githubUrl?: string;               // GitHub repository link\n}\n\ninterface ProjectSection {\n  title: string;\n  content: string | string[];       // Supports single or multiple paragraphs\n  list?: string[];                  // Optional bullet points\n}\n```\n\n## ✍️ Blog Content Structure\n\nThe blog uses **Astro Content Collections** with MDX. The schema is defined in `src/content/config.ts`:\n\n```typescript\nconst blog = defineCollection({\n  schema: z.object({\n    title: z.string(),\n    description: z.string(),\n    pubDate: z.date(),\n    updatedDate: z.date().optional(),\n    heroImage: z.string().optional(),\n    tags: z.array(z.string()).default([]),\n    keywords: z.string().optional(), // SEO keywords\n    featured: z.boolean().default(false),\n  }),\n});\n```\n\n### Adding a New Blog Post\n\n1. Create a new MDX file in `src/content/blog/post-title.mdx`.\n2. Add the required frontmatter:\n   ```md\n   ---\n   title: \"My New Blog Post\"\n   description: \"A brief summary of what this post is about.\"\n   pubDate: 2026-01-04\n   heroImage: \"/blog/images/hero.jpg\"\n   tags: [\"React\", \"Astro\"]\n   keywords: \"react, astro, web development\"\n   featured: true\n   ---\n   ```\n3. Write your content using standard Markdown or custom React components.\n\n### Adding a New Project\n\n1. **Add project data** to `src/data/projects.ts`:\n   ```typescript\n   {\n     id: 7,\n     title: \"Project Title\",\n     image: \"/workImages/project-name/hero.jpg\",\n     galleryImage: \"/workImages/project-name/gallery.jpg\",\n     description: \"Short description\",\n     headline: \"Catchy subtitle\",\n     technologies: [\"React\", \"TypeScript\", \"Tailwind CSS\"],\n     date: \"2025\",\n     role: \"Full Stack Developer\",\n     sections: [\n       {\n         title: \"Challenge\",\n         content: \"Description of the challenge...\"\n       }\n     ]\n   }\n   ```\n\n2. **Add images** to `public/workImages/project-name/`\n\n3. **Images are automatically included** in the gallery and dynamic routes\n\n## 🎨 Design System\n\n### Color Palette\n\n- **Background**: `#000000` (pure black)\n- **Text Primary**: `#dddddd` (light gray)\n- **Text Secondary**: `text-neutral-400` through `text-neutral-700`\n- **Borders**: `border-neutral-700` to `border-neutral-800`\n- **Accents**: Tech-specific colors (React blue, TypeScript blue, etc.)\n\n### Typography\n\n- **Display Font**: PP Neuemontreal (weights: 400, 500, 700)\n- **Body Font**: PP Neuemontreal with fallback to system fonts\n- **Responsive sizing**: `text-sm` → `md:text-lg` → `lg:text-xl` patterns\n\n### Animation Patterns\n\n#### Framer Motion Variants\n\nCommon animation patterns used throughout:\n\n```typescript\nconst fadeInUp = {\n  hidden: { opacity: 0, y: 20 },\n  visible: { opacity: 1, y: 0 }\n};\n\nconst staggerContainer = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: { staggerChildren: 0.1 }\n  }\n};\n```\n\n#### GSAP Scroll Animations\n\nThe Header component uses GSAP's ScrollTrigger for text animations that respond to scroll position:\n\n```typescript\ngsap.fromTo(element,\n  { y: 0, opacity: 1 },\n  {\n    y: 500,\n    opacity: 0,\n    scrollTrigger: {\n      trigger: document.documentElement,\n      start: \"top top\",\n      end: \"+=1200\",\n      scrub: true\n    }\n  }\n);\n```\n\n## 🚢 Deployment\n\n### Cloudflare Workers\n\nThis portfolio is deployed on **Cloudflare Workers** for global edge performance.\n\n**Configuration**: `wrangler.toml`\n\n**Deploy to production**:\n```bash\nnpm run deploy\n```\n\nThis runs `npx wrangler deploy`, which:\n1. Builds the Astro site to `dist/`\n2. Uploads static assets to Cloudflare\n3. Deploys the worker script\n\n**Environment**: `wrangler.toml` is configured to:\n- Serve static assets from the `dist` directory\n- Set site URL to `https://dinilr.com`\n- Use production compatibility date\n\n## 📊 Performance Optimizations\n\n- **Astro's partial hydration** reduces JavaScript by ~70% vs traditional SPAs\n- **Lazy loading** for images with `loading=\"lazy\"`\n- **Static generation** for all routes (no runtime rendering)\n- **CSS Vite plugin** with Tailwind 4 for optimized stylesheets\n- **Code splitting** for dynamic imports where needed\n- **Image optimization** through proper sizing and format selection\n\n## 🔗 Contact \u0026 Social\n\n- **Email**: offbeat-zombies.3q@icloud.com\n- **Phone**: +94 74 322 8881\n- **LinkedIn**: https://www.linkedin.com/in/hirusha-dinil-rubasinghe-66bbba313/\n- **GitHub**: https://github.com/lxnid\n- **Portfolio**: https://dinilr.com\n\n## 📄 License\n\nMIT License – Feel free to use this as inspiration for your own portfolio!\n\n## 👤 Author\n\n**Hirusha Dinil**\nCreative Developer \u0026 Designer\n[GitHub](https://github.com/lxnid) · [LinkedIn](https://www.linkedin.com/in/hirusha-dinil-rubasinghe-66bbba313/) · [Portfolio](https://dinilr.com)\n\n---\n\n\u003e _Handcrafted with ❤️. Migrated from Next.js to Astro for improved performance and developer experience._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxnid%2Fme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxnid%2Fme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxnid%2Fme/lists"}