Portfolio template for lazy people like you and me 🚀

Overview

Looking for collaborators and maintainers. Feel free to connect!

Developer Portfolio ⚡️

It's minimal, beautiful and responsive!

Don't have or don't know Flutter?

  • Editing a JSON is all you have to do.

Made for people who are looking for a ready-made portfolio. Because making a portfolio out of scratch is tiring. Feel free to use it as-is or customise it just the way you want it to be.

Portfolio Sections

✔️ Skills
✔️ Summary and About me
✔️ Contact me
✔️ Education
✔️ Work Experience
✔️ Open Source Projects Connected hosted with GitHub
✔️ Other Projects
✔️ Achievements

Change and customize every section according to your need

Personalize page content in /assets/portfolio.json and modify it as per your needs. You can also change the title in web/index.html to change the title of your portfolio site. For reference, check out my personal portfolio.json.

IMPORTANT: Don't want to share some details or don't have an image file? Keep the value of the respective field empty (will load a template image or in case of text, will display no text. Your site won't look bad 😉 )

  • Your name and link.
"name_and_link": [
    "your name",
    "a link (preferably github) of your choice"
],
  • The tagline section in the home page, add as many as you want.
"designation": [
    "first tagline",
    "second tagline"
],
  • Your social media handles. Currently supports icons for Facebook, GitHub, Linkedin, Twitter, Medium, Stack Overflow, Twitter and email. Specify the name of the social media in small letters in the json. If you want to add link to something else, simply keep the name value empty (will load a button with template image).
"social_media": {
    "1": [
        "your github link",
        "specify the name of the social media"
    ],
    "2": [
        "https://linkedin.com/example",
        "linkedin"
    ],
    "3": [
        "https://another-link.com",
        ""
    ],
},
  • About and Bio section.
"about": "a small about section for the home page",
"bio": "a more detailed about for the contact me page"
  • Adding proficiency and used tools in What I do page.
    Simply place the image files (64x64) in assets/what_i_do/ and add the names in the json accordingly. In the example below, I have places 2 images (flutter.png and linux.png) under assets/what_i_do/.
    To add proficiency in a particular language or tool, place it like this: tool--proficiency_percentage. Add as many tools or proficiency items as you want.
"what_i_do": {
    "tools": [
        "flutter.png",
        "linux.png",
    ],
    "proficiency": [
        "Flutter--50",
        "C/C++/Java/Python--60",
    ]
},
  • Education page.
    Place institute logo image file (128x128) under assets/education/.
"education": {
    "1": {
        "institute": "RCC Institute of Information Technology",
        "location": "Kolkata",
        "years": "2020 - 2024",
        "description": "B.Tech in CSE",
        "grades": "9.53 YGPA",
        "logo": "rcciit.png"
    },
    "2": {
        "institute": "Gitaram Academy",
        "location": "Berhampore",
        "years": "2018 - 2020",
        "description": "Physics, Chemistry, Mathematics, Computer Science",
        "grades": "84%",
        "logo": ""
    },
},
  • Experience page.
    Place logo image file (128x128) under assets/experience/.
"experience": {
    "1": {
        "name": "Google Developer Student Club",
        "role": "Cybersecurity core member",
        "period": "September, 2021 - Present",
        "description": "Helped in organizing and conducting technical workshops, for community members.",
        "image_name": "GDSC.png"
    },
},
  • Projects page.
    You can either fill out all the details of a particular project or just the GitHub link (if you want to fetch and use the details provided in the GitHub repo).
    Note: The GitHub link (in both the cases) is required to fetch the number of stars and forks.
"projects": {
    "1": {
        "name": "flutter_dev_folio",
        "tech_stack_used": "Flutter",
        "description": "Minimal, Beautiful and responsive portfolio site template",
        "general_or_github_link": "https://github.com/danger-ahead/flutter_dev_folio"
    },
    "2": {
        "name": "",
        "tech_stack_used": "",
        "description": "",
        "general_or_github_link": "https://github.com/danger-ahead/roBOT"
    },
}
  • Achievements page.
    You can add a link where visitors can view or validate your achievement.
"achievements": {
    "1": {
        "description": "your achievement",
        "link": "https://some-link.com/view-certificate"
    },
}
  • Contact me page.
"contact_me": {
    "location": "your location",
    "open_for_opportunities": "Yes or No",
    "picture": "picture.png"
},

How to deploy, run or test locally

# Clone this repository
git clone https://github.com/danger-ahead/flutter_dev_folio

# Go into the repository
cd flutter_dev_folio

# Create dotenv. No need to add any token now, GitHub API serves requests without authorisation.
echo "" > dotenv

# Get dependencies
flutter pub get

# Start a local dev server
# We'll be using the HTML renderer
flutter run -d chrome --web-renderer html

Deployment

flutter_dev_folio uses the GitHub API for fetching details from GitHub. The API is currently rate limited to 60 requests/hour. To overcome this, we would need a GitHub Personal Access Token placed in the dotenv.

Generate a new token with only public_repo scope.

IMPORTANT NOTE: TO USE PERSONAL ACCESS TOKEN FOR API CALLS, YOU NEED TO MANUALLY DEPLOY THE BUILT PROJECT. AS YOU CAN'T VERSION CONTROL THE dotenv.

Create a dotenv file here:

- flutter_dev_folio
  - assets
  - lib
  - web
  - dotenv         <-- create it here
  - .gitignore
  - pubspec.lock
  - pubspec.yaml
  - README.md

Then paste the PERSONAL ACCESS TOKEN and run flutter build web --web-renderer html --release. This will create the build/ directory containing all your build files. You can now simply deploy the build/web/.

Or, You can create an empty dotenv file and run (and deploy) the project. Caution: This will limit the GitHub API to 60 requests/hour.

Or alternatively, Enable workflows in your fork and edit the json (and/or other files as per your wish) in your fork. Then commit and push. GitHub actions will soon generate the build files in the master-deploy branch. The generated build files will have rate limited API access.

For the future

This project is still very much in beta stage.

  • Adding more sections
  • Adding animations in different parts while loading the screens
  • Embedding and connecting Twitter, Medium or Linkedin

Consider opening a PR if you can help me with these.


If you'd like to contribute and make this much better for other users, have a look at the issues.

Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.

You might also like...

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package

Aug 27, 2022

This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

May 8, 2022

Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

Git+ for GitLab Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop. Git+ lets you see

Jan 7, 2023

A cryptocurrency tracker and portfolio app, built with Flutter and Dart

A cryptocurrency tracker and portfolio app, built with Flutter and Dart

I'm currently rewriting the application from scratch to remove a lot of the ugly code, conform better to modern flutter best practices with regards to

Oct 6, 2022

It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

liquid A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Oct 7, 2022

Live portfolio designed using Flutter 2.0 available for android and web.

Live portfolio designed using Flutter 2.0 available for android and web.

DevFolio - Portfolio for Developers Designed live portfolio using Flutter 2.0. Available for Android and Web. 💻 How to install? Before these steps ma

Jan 7, 2023

Flutter table with dio and provider - A flutter Application created for Portfolio Page

Flutter table with dio and provider - A flutter Application created for Portfolio Page

My LinkedIn https://www.linkedin.com/in/marcelo-augusto-a60b6821a/ Intro This is

Jan 18, 2022

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components to make it look like our Now UI Design, minimalistic and easy to use.

Oct 9, 2022
Comments
  • Add a new loading animation in CSS

    Add a new loading animation in CSS

    A new loading animation needs to be added in place of the current animation.

    Do submit the animation and ask for approval here before starting to work on this issue.

    enhancement good first issue 
    opened by danger-ahead 0
  • Modularise and refactor code base

    Modularise and refactor code base

    The current code base has many repeated lines. Also the general architecture isn't very modularised. Has many unnecessary parameter passes, unnecessary imports, etc.

    Need to fix that. You have full freedom over how you want to achieve the end goal (that is, modularising the code base and reducing the numbers of total lines).

    Let me know if you want to discuss this over a call. Will you guide you through the codebase.

    good first issue easy fix 
    opened by danger-ahead 10
Owner
SHOURYA SHIKHAR
tired pretending...
SHOURYA SHIKHAR
Flutter-web-portfolio - A Basic web portfolio built using flutter

My Flutter Web Portfolio It is a basic flutter web portfolio. 1. Home To use thi

Aleyna Eser 2 May 30, 2022
Portfolio - Developer Portfolio Application With Flutter

My Portfolio This is my developer portfolio application! Preview of the Applicat

Samit Kapoor 6 Jun 16, 2022
This Country Selector UI Library written by Dart and Fluter and supports three locales with country's name, achieves lazy loading, and country card animation on listview

Country Selector Widget This Country Selector Widget UI Library written by Dart and Fluter and supports three locales with country's name, achieves la

Klaus 6 Nov 15, 2022
Aditya 93 Dec 25, 2022
Software Developer Portfolio Template built using Dart, Flutter web

Dev Portfolio Software Developer Portfolio Template that helps you showcase your work and skills as a software developer. A lightweight, customizable

Rezky Maulana 9 Dec 10, 2022
meg4cyberc4t 11 Oct 24, 2022
CRUD Table Flutter consists of a Lazy loading function, resizable columns, and integrated CRUD Form.

CRUD Table Flutter CRUD Table Flutter is a package for crating CURD-UI for your entity/object/class easily. It consists of a Lazy loading function, re

null 10 Dec 31, 2022
A Flutter package that extends IndexedStack to allow for lazy loading.

lazy_load_indexed_stack A package that extends IndexedStack to allow for lazy loading. Motivation If you use the IndexedStack with bottom navigation,

Ryotaro Oka 18 Dec 16, 2022
A wrapper for a Flutter ScrollView which enables lazy loading

Lazy load scrollview A wrapper for a ScrollView that will enable lazy loading Usage Add lazy_load_scrollview dependency to your pubspec.yaml: dependen

Quirijn Groot Bluemink 104 Nov 7, 2022
Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Abu Anwar 198 Dec 30, 2022