first commit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,132 @@
+# 🎨 Modern Portfolio Website
+
+<div align="center">
+  <img src="#">
+
+  <p align="center">
+    A modern, responsive portfolio website with advanced features
+    <br />
+    <a href="#"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="#">View Demo</a>
+  </p>
+</div>
+
+## ✨ Features
+
+- 🎨 Modern and clean design
+- 🌓 Persistent dark mode with system preference detection
+- 📱 Fully responsive layout
+- 🚀 Smooth scroll navigation
+- 💼 Project showcase section with pagination
+- 🔍 Project filtering system
+- 📝 Contact form
+- 🎯 About me section
+- 🔗 Social media integration
+- ⚡ Fast performance
+- 🎉 Interactive UI elements
+- 💫 Hover animations
+- 🔄 State persistence
+- 📱 Mobile-first design
+
+## 🛠️ Built With
+
+- **Frontend Framework**: React 18.3.1
+- **Build Tool**: Vite
+- **Styling**: Tailwind CSS
+- **Icons**: Lucide React
+- **Language**: TypeScript
+- **Code Quality**: ESLint
+- **Performance**: Modern JavaScript features & optimizations
+- **State Management**: React Hooks & Local Storage
+
+## 🚀 Getting Started
+
+1. Clone the repository
+   ```sh
+   git clone https://github.com/yourusername/portfolio.git
+   ```
+
+2. Install dependencies
+   ```sh
+   npm install
+   ```
+
+3. Start the development server
+   ```sh
+   npm run dev
+   ```
+
+4. Build for production
+   ```sh
+   npm run build
+   ```
+
+## 💻 Technical Features
+
+- **Advanced Dark Mode**: 
+  - System preference detection
+  - Persistent theme selection
+  - Smooth transitions
+- **Project Management**:
+  - Pagination system
+  - Category filtering
+  - Dynamic loading
+- **Responsive Design**: 
+  - Mobile-first approach
+  - Breakpoint optimization
+  - Flexible layouts
+- **Performance**:
+  - Optimized images
+  - Lazy loading
+  - Smooth animations
+- **User Experience**:
+  - Interactive elements
+  - Smooth scrolling
+  - Visual feedback
+- **Code Quality**:
+  - TypeScript integration
+  - ESLint configuration
+  - Modern React practices
+
+## 🤝 Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📝 License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+## 👨‍💻 Author
+
+**Your Name**
+- GitHub: [@yourusername](https://github.com/yourusername)
+- Website: [yourwebsite.dev](https://yourwebsite.dev)
+
+## 🙏 Acknowledgments
+
+- [React](https://reactjs.org) for the frontend framework
+- [Tailwind CSS](https://tailwindcss.com) for styling
+- [Lucide React](https://lucide.dev) for icons
+- [Unsplash](https://unsplash.com) for stock images
+
+## 💖 Support
+
+If you find this project helpful, please consider giving it a ⭐️ on GitHub!
+
+- **BagiBagi**: [Support on BagiBagi](https://bagibagi.co/yourusername)
+- **Saweria**: [Support on Saweria](https://saweria.co/yourusername)
+- **Socialbuzz**: [Support on Socialbuzz](https://sociabuzz.com/yourusername)
+
+---
+
+<div align="center">
+  Made with ❤️ by <a href="https://github.com/yourusername">Your Name</a>
+</div>

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> Modern - Portfolio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>