Portfolio 💙

Flutter Portfolio – by Masnun Siam

Live Preview 👀

Features ✨

💙 Responsive and adaptive design, inspired by Brittany Chiang
💙 Implements the Riverpod Architecture by Andrea Bizzotto
💙 Implements a feature-first structure
💙 Supports multi languages
💙 Supports multi themes

Fork and deploy with Firebase 🚀

Fork and clone this repository (see how to fork and clone a repo)

Clone the repo in portfolio directory :

$ git clone https://github.com/masnun-siam/msiamn-dev.git portfolio

Navigate to your portfolio directory :

$ cd portfolio

Install dependencies:

$ flutter pub get

Generator 🤖

If you haven't already, install Flutter

1. Run the code generator:

$ dart run build_runner build

For additional information, refer to the build_runner documentation

2. Generate localization files:

$ dart run easy_localization:generate -S assets/translations -f keys -O lib/src/localization/generated -o locale_keys.g.dart
$ dart run easy_localization:generate -S assets/translations -f json -O lib/src/localization/generated -o locale_json.g.dart

Firebase 🔥

If you haven't already, install Firebase CLI

1. Log into Firebase:

$ firebase login

2. Install the FlutterFire CLI:

$ dart pub global activate flutterfire_cli

3. Create a new Firebase project:

$ firebase projects:create

? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 <my-unique-project-id>
? What would you like to call your project? (defaults to your project ID) <my-unique-project-id>

4. Set the Firebase project for your portfolio:

$ firebase use --add

? Which project do you want to add? (Use arrow keys)
❯ <my-unique-project-id>
? What alias do you want to use for this project? (e.g. staging) default

5. Configure your apps to use Firebase:

$ flutterfire configure

i Found 1 Firebase projects. Selecting project <my-unique-project-id>.
? Which platforms should your configuration support (use arrow keys & space to select)? › 
✔ android                                                
✔ ios                                                    
  macos                                                  
✔ web

For additional information, refer to the Firebase setup documentation

6. Initialize Firebase Hosting:

$ firebase init hosting

? What do you want to use as your public directory? (public) build/web
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
? Set up automatic builds and deploys with GitHub? (y/N) N

7. Deploy:

$ flutter build web --web-renderer canvaskit --release --no-tree-shake-icons
$ firebase deploy --only hosting

Content Personalization 🖋

1. Your description:
Change the content of your description in the build/web/index.html:

<meta name="description" content="...">

2. Portfolio Content:
Modify or add JSON translation files within assets/translations folder to customize the portfolio content. Don't forget to re-generate your localization files. For an understanding of how JSON translation files are structured, refer to the translation template

If you add or remove a JSON translation file, remember to update the languages key in your other translation files. Also, update the supported locales in the lib/src/localization/app_localizations.dart

For additional information, refer to the easy_localization documentation

3. Launcher Icon and Splash Screen:
Update your launcher icon and your splash screen in the flutter_launcher_icons-production.yaml and the flutter_native_splash-production.yaml

Then, run:

$ dart run flutter_launcher_icons -f flutter_launcher_icons-production.yaml
$ dart run flutter_native_splash:create --path=flutter_native_splash-production.yaml

For additional information, refer to the flutter_launcher_icons and flutter_native_splash documentations

4. Update your live portfolio:
You are ready to re-deploy your custom portfolio!

License 📄

This project is licensed under the MIT License - see the LICENSE file for details