Skip to content

Commit fc0b3c1

Browse files
D3-cryptoD3-crypto
committed
Initial commit: Flutter guide website with responsive design
0 parents  commit fc0b3c1

25 files changed

Lines changed: 9759 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
build-and-deploy:
13+
runs-on: ubuntu-latest
14+
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: '18'
28+
cache: 'npm'
29+
30+
- name: Install dependencies
31+
run: npm ci
32+
33+
- name: Build
34+
run: npm run build
35+
36+
- name: Setup Pages
37+
uses: actions/configure-pages@v4
38+
39+
- name: Upload artifact
40+
uses: actions/upload-pages-artifact@v3
41+
with:
42+
path: './dist'
43+
44+
- name: Deploy to GitHub Pages
45+
id: deployment
46+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
# Runtime data
11+
pids
12+
*.pid
13+
*.seed
14+
*.pid.lock
15+
16+
# Dependency directories
17+
node_modules/
18+
jspm_packages/
19+
20+
# Production build
21+
dist/
22+
dist-ssr/
23+
build/
24+
25+
# Environment variables
26+
.env
27+
.env.local
28+
.env.development.local
29+
.env.test.local
30+
.env.production.local
31+
32+
# Cache directories
33+
.npm
34+
.eslintcache
35+
.parcel-cache
36+
.cache
37+
.vite
38+
39+
# Runtime data
40+
*.tgz
41+
*.tar.gz
42+
43+
# Editor directories and files
44+
.vscode/*
45+
!.vscode/extensions.json
46+
!.vscode/settings.json
47+
.idea
48+
.DS_Store
49+
*.suo
50+
*.ntvs*
51+
*.njsproj
52+
*.sln
53+
*.sw?
54+
55+
# OS generated files
56+
Thumbs.db
57+
ehthumbs.db
58+
Desktop.ini
59+
60+
# Temporary files
61+
*.tmp
62+
*.temp
63+
*.local
64+
65+
# GitHub Pages deployment
66+
.gh-pages

‎README.md‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
# Flutter Guide Website 🚀
2+
3+
A modern, responsive React website that provides a comprehensive guide for installing and using Flutter with VS Code - no Android Studio required! Perfect for developers who prefer a lightweight development environment.
4+
5+
## ✨ Features
6+
7+
- **🎨 Modern Design**: Clean, professional UI with responsive design
8+
- **📱 Mobile-First**: Fully responsive across all devices (mobile, tablet, desktop)
9+
- **📚 Step-by-Step Guide**: Complete Flutter installation instructions for Windows
10+
- **💻 VS Code Focus**: Optimized for VS Code development environment
11+
- **📱 Mobile Development**: Guide for connecting Android devices without Android Studio
12+
- **⚡ Interactive Examples**: Live code samples and commands
13+
- **🌙 Dark/Light Theme**: Toggle between themes
14+
- **🚀 GitHub Pages Ready**: Configured for easy deployment
15+
- **⚡ Fast Performance**: Built with Vite for lightning-fast builds
16+
17+
## 🛠️ Tech Stack
18+
19+
- **React 19** - Latest frontend framework
20+
- **Vite 7** - Next-generation build tool
21+
- **Framer Motion** - Smooth animations
22+
- **GSAP** - Advanced animations
23+
- **Lucide React** - Beautiful icon library
24+
- **CSS3** - Modern styling with custom properties
25+
- **GitHub Pages** - Free hosting platform
26+
27+
## 🚀 Quick Start
28+
29+
### Prerequisites
30+
- Node.js 16+ installed
31+
- Git installed
32+
- GitHub account (for deployment)
33+
34+
### Development
35+
36+
1. **Clone the repository:**
37+
```bash
38+
git clone https://github.com/YOUR_USERNAME/flutter-guide-website.git
39+
cd flutter-guide-website
40+
```
41+
42+
2. **Install dependencies:**
43+
```bash
44+
npm install
45+
```
46+
47+
3. **Start development server:**
48+
```bash
49+
npm run dev
50+
```
51+
52+
4. **Open in browser:**
53+
- Local: [http://localhost:5173/flutter-guide-website/](http://localhost:5173/flutter-guide-website/)
54+
- The site will automatically reload when you make changes
55+
56+
### Build for Production
57+
58+
```bash
59+
npm run build
60+
```
61+
62+
This creates a `dist/` folder with optimized production files.
63+
64+
## 📦 Deployment to GitHub Pages
65+
66+
### Automatic Deployment (Recommended)
67+
68+
1. **Fork or clone this repository**
69+
70+
2. **Update the repository name in `vite.config.js`:**
71+
```javascript
72+
base: '/your-repository-name/',
73+
```
74+
75+
3. **Install dependencies and deploy:**
76+
```bash
77+
npm install
78+
npm run deploy
79+
```
80+
81+
4. **Enable GitHub Pages:**
82+
- Go to your repository Settings
83+
- Scroll to "Pages" section
84+
- Source: "Deploy from a branch"
85+
- Branch: `gh-pages`
86+
- Your site will be live at: `https://yourusername.github.io/repository-name/`
87+
88+
### Manual Setup
89+
90+
1. **Create a new repository** on GitHub named `flutter-guide-website`
91+
92+
2. **Initialize git and connect:**
93+
```bash
94+
git init
95+
git add .
96+
git commit -m "Initial commit: Flutter guide website"
97+
git branch -M main
98+
git remote add origin https://github.com/yourusername/flutter-guide-website.git
99+
git push -u origin main
100+
```
101+
102+
3. **Deploy:**
103+
```bash
104+
npm run deploy
105+
```
106+
107+
## 📁 Project Structure
108+
109+
```
110+
flutter-guide-website/
111+
├── public/
112+
│ ├── vite.svg # Vite logo
113+
│ └── ... # Other static assets
114+
├── src/
115+
│ ├── components/
116+
│ │ ├── Header.jsx # Responsive navigation with mobile menu
117+
│ │ ├── Hero.jsx # Hero section with animations
118+
│ │ ├── PlatformSelector.jsx # Platform selection guide
119+
│ │ ├── InstallationSteps.jsx # Step-by-step installation
120+
│ │ ├── AndroidStudioComparison.jsx # VS Code vs Android Studio
121+
│ │ ├── VSCodeSetup.jsx # VS Code configuration
122+
│ │ ├── ProjectStructure.jsx # Flutter project structure
123+
│ │ ├── FirstApp.jsx # First Flutter app tutorial
124+
│ │ ├── SpectacularShowcase.jsx # Feature showcase
125+
│ │ └── Footer.jsx # Footer with social links
126+
│ ├── contexts/
127+
│ │ └── ThemeContext.jsx # Dark/Light theme management
128+
│ ├── assets/
129+
│ │ └── react.svg # React logo
130+
│ ├── App.jsx # Main app component
131+
│ ├── App.css # Comprehensive styles with responsive design
132+
│ ├── index.css # Global styles
133+
│ └── main.jsx # App entry point
134+
├── .gitignore # Git ignore rules
135+
├── eslint.config.js # ESLint configuration
136+
├── index.html # HTML template
137+
├── package.json # Dependencies and scripts
138+
├── README.md # This file
139+
└── vite.config.js # Vite configuration
140+
```
141+
142+
## 🎨 Responsive Design
143+
144+
The website is fully responsive with breakpoints for:
145+
- **320px+**: Extra small mobile devices
146+
- **480px+**: Small mobile devices
147+
- **640px+**: Large mobile devices
148+
- **768px+**: Tablets
149+
- **1024px+**: Small laptops
150+
- **1200px+**: Desktop
151+
152+
Features include:
153+
- Mobile-first hamburger navigation
154+
- Responsive typography and spacing
155+
- Touch-friendly buttons and interactions
156+
- Optimized animations for mobile devices
157+
- Accessible design patterns
158+
159+
## 🔧 Available Scripts
160+
161+
- `npm run dev` - Start development server
162+
- `npm run build` - Build for production
163+
- `npm run preview` - Preview production build locally
164+
- `npm run lint` - Run ESLint
165+
- `npm run deploy` - Deploy to GitHub Pages
166+
167+
## 🌟 Key Features Guide
168+
169+
### Navigation
170+
- **Desktop**: Horizontal navigation with theme toggle
171+
- **Mobile**: Collapsible hamburger menu with smooth animations
172+
173+
### Theme Support
174+
- Toggle between light and dark themes
175+
- Persistent theme preference
176+
- Smooth transitions between themes
177+
178+
### Animations
179+
- **GSAP**: Advanced scroll-triggered animations
180+
- **Framer Motion**: Smooth component transitions
181+
- **CSS**: Custom hover and focus effects
182+
183+
## 🤝 Contributing
184+
185+
1. Fork the repository
186+
2. Create a feature branch: `git checkout -b feature/amazing-feature`
187+
3. Commit changes: `git commit -m 'Add amazing feature'`
188+
4. Push to branch: `git push origin feature/amazing-feature`
189+
5. Open a Pull Request
190+
191+
## 📄 License
192+
193+
This project is open source and available under the [MIT License](LICENSE).
194+
195+
## 👤 Author
196+
197+
**Sonu Jha**
198+
- GitHub: [@D3-crypto](https://github.com/D3-crypto)
199+
- LinkedIn: [Sonu Jha](https://www.linkedin.com/in/sonu-jha-692708248/)
200+
- Instagram: [@sonu.106](https://www.instagram.com/sonu.106/)
201+
202+
## 🙏 Acknowledgments
203+
204+
- Flutter team for the amazing framework
205+
- VS Code team for the excellent editor
206+
- React and Vite communities for the powerful tools
207+
208+
---
209+
210+
**Made with ❤️ for Flutter developers who prefer VS Code over Android Studio!**
211+
212+
*⭐ If this project helped you, please give it a star on GitHub!*

‎eslint.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import { defineConfig, globalIgnores } from 'eslint/config'
6+
7+
export default defineConfig([
8+
globalIgnores(['dist']),
9+
{
10+
files: ['**/*.{js,jsx}'],
11+
extends: [
12+
js.configs.recommended,
13+
reactHooks.configs['recommended-latest'],
14+
reactRefresh.configs.vite,
15+
],
16+
languageOptions: {
17+
ecmaVersion: 2020,
18+
globals: globals.browser,
19+
parserOptions: {
20+
ecmaVersion: 'latest',
21+
ecmaFeatures: { jsx: true },
22+
sourceType: 'module',
23+
},
24+
},
25+
rules: {
26+
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27+
},
28+
},
29+
])

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Complete Flutter development guide using VS Code. Learn to build beautiful cross-platform mobile apps with step-by-step tutorials." />
8+
<meta name="keywords" content="Flutter, VS Code, Mobile Development, Cross-platform, Tutorial, Guide" />
9+
<meta name="author" content="Sonu Jha" />
10+
<title>Flutter Guide - Build Apps with VS Code</title>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.jsx"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)