My Portfolio

Table of contents

• Project Description
• Project Structure
• Design
• Libaries Used
• Coming Soon
• Challenges Faced
• Gallery
• App Demo

Project Description

This app displays my portfolio, it contains a responsive side menu that displays my bio data, major skills, languages, nontechnical skills and links to my media platforms. The main screen which is also responsive contains a toggle button for switching between dark and light modes. It also contains a header banner which displays an animated text. Information about me, my projects, and recommendations can also be found on the responsive main screen.

Project Structure

Since this is essentially a one page UI based app that doesn't make any API calls, i decided to come up with a pretty straight forward code base structure. 👇

This table tries to explain the purpose of each folder

Folder	Description
common_widgets	All widgets used accross the app are contained here
constants	All app constant values go in here, like the app_colors and app_sizes
home	This is the main folder of the app, where the side_menu and responsive_main_screen are integrated to be displayed
models	This folder contains model classes used for the app ie project and recommendation
theme	The theme controller folder, this folder contains files that controll the theme of the app

Design

This design was inspired by Abu Anwar of the flutter way on youtube, Here is a link to the resource.

Libaries Used

Below is in image of my pubspec.yaml file that contains the libaries used 👇

This table tries to explain the purpose of each library.

Library	Purpose
animated_text_kit	This libary is responsible for the text animation seen on my header banner
flutter_svg	This library is responsible for loading svg files in the flutter app
google_fonts	This library is responsible for the fonts seen on the app
toggle_switch	This library is used to create the custom toggle switch used to change the apps theme
url_launcher	This library is used for launching the various links to my various platforms

Coming Soon

Due to time constraints, I have decided to slot these features for the v2 of this portfolio.

Feature	Description
In-App Browser Launching	This feature will insure that all links launch in the app
Web hosting	I intend to host this on the web so it'd serve as my portfolio website
Download CV	This will activate the download_cv button and esnure my cv is downloaded
Localizations	This feature will ensure that my portfolio can be loaded in various locals, thus changing the language when necessary
State Management	Depending on how complex the above features might become, i might add riverpod to handle the app's state

Challenges Faced

Below are some major challenges faced and their solutions

The App's Design:

Since we were not given any design to implement finding one was kind of tough, so i decided to visit youtube and use the one i came across.

The App's Theme:

There was a little problem on figuring out how to implement the apps theme functionality, especially the button for the toggling. After some deep thoughts, i decided ! to make it responsive in such a way that its on the app bar on normal screens and its a stack on the header banner on large screens.

Gallery

Here are some screen shots of the app

1. On a Large Screen

a. Landscape

b. Portrait

2. On a Mobile Screen

a. Landscape

b. Portrait

App Demo

Here is a link to the hosted app on appetize.io Here is a link to the website version of the app Here is a link to the downloadable apk file

NB: The dark theme button may not work because the emulators on appetize.io have disabled dark theme forever, so kindly go to the phones settings, search dark theme and activate it, come back to the app and then the toggle switch would begin working 👍