How I generated my personal landing page with Figma & Flutter using Parabeac
Tags: flutter, showdev, productivity, startup
Published: 2022-03-24 20:07:08

In this post, I’ll share how I used Parabeac to create my portfolio website by converting my Figma design file to Flutter code and deploying the project using GitHub Pages.

When working on a product, it’s easy to get lost in the myriad of features, bugs, and refactors to implement. Getting tunnel vision means you lose sight of what is useful to the user and what is not. Because of this, I decided to put myself in our users’ shoes and try to build my portfolio website using Parabeac. 

## Setting up design file

I created a new Figma Project and decided to start with the Landing Page. I knew my website was going to have a minimalist, terminal style with dark colors accentuated by bright greens. Then, I re-watched The Matrix to inspire my design (and because I love the movie). Finally, after looking at a few websites, I started designing and (tried 😅) using Figma best practices to design the page:

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh1yxm5zuto5pcdx4000.png)

Although the design was to my liking, I did not want the UI to be static. Rather, I wanted the green text that says `Software Developer` to change to some hobbies: `Movie Enthusiast`, and `Gamer 😎`. The logic of animating and changing text cannot be generated by Parabeac, so I labeled the text with `<custom>` in Figma as follows:


![Custom Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o943wcis24llw5tfbgxh.png)

By doing this, Parabeac will create a file where I can add logic and change the text dynamically once the code is generated.

## Generating the Code Using Parabeac Nest

Once my Figma file was ready to generate, I went to Github, created a new repo, and initialized it with a `main` branch. Then, I went to [app.parabeac.com](http://app.parabeac.com) to start my new project. I followed the prompts, crossed my fingers, and began the conversion. After a few minutes, I got the success message:


![PR Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnbwnl99fatf03bh64bd.png)

After I saw this success message, I immediately cloned the Git Repo, checked out the generated branch, and opened it in VSCode:


![VSCode Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/872j2vsv1y9mbnritct5.png)

I modified the `main.dart` file to open the `Landing` page (as seen above), and ran it with the following result:


![First Conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vtvv36j5l62a5sehpml.png)

Not bad! Next, let’s make the text dynamic.

## Customizing logic

The first thing I do when I want to add some logic to my Flutter UI code is look it up on YouTube and hope there’s a Widget of the Week video on it. I searched “flutter animated text”, crossed my fingers once again, and hit the jackpot. This was the first video in the search: 

[https://www.youtube.com/watch?v=foQTKCQqVWk](https://www.youtube.com/watch?v=foQTKCQqVWk)

After reading the [docs](https://pub.dev/packages/animated_text_kit), I decided this was exactly what I wanted, so I went to my terminal and ran `flutter pub add animated_text_kit` on my project. Then, I went to the file `software_developer_custom.dart`, named after the text element in Figma, which had this boilerplate: 


![Custom File Boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5gpqru9s6ar901hvzqn.png)

Rather than returning `widget.child`, which is the static text that displays `Software Developer`, I want to use the package I just installed to make the text dynamic. I replaced the build method as follows:


![Adding Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1ydsq546s3vccj1mwmd.png)

As you can see, I added the `AnimatedTextKit` widget, which will animate the texts I provided in a loop. Here’s the final result:

![Website Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0w5y2io7924gvhyb9sw.gif)

And there it is! My landing page is mostly ready. There are still some easter eggs I want to implement, but I first need to design the rest of the website. 

As a final touch, I set up GitHub pages and deployed the site. Click [here](https://github.com/ivan-015/flutter-portfolio-site) to see the Github repo and source code, and [here](https://ivan-015.github.io/flutter-portfolio-site/#/) to see the website. 

DISCLAIMER: no `.g.dart` files were modified during the making of this article.