Introduction

Throughout the months of March to August 2023, I had my first internship experience as a Software Engineer Intern at a Small and Midsize Enterprise (SME) in the machine vision industry, with customers internationally. And it was a roller coaster of a ride, to say the least.

The six-month internship was mandatory for my university’s Bachelor's Degree program in order to graduate.

Application Process

I did not go through the normal application process like resume submission, and interviewing rounds. I was lucky enough to know my supervisor personally through my connections, hence I was accepted as an intern directly. I guess this is fortunate and unfortunate at the same time. Fortunate because I was able to easily secure my internship spot. Unfortunate, because I wasn’t able to go through interviews to understand the company better, and to brush up on my interviewing skills.

Expectation vs Reality

Since I’m joining an SME, my expectations weren’t that high in terms of office space and network opportunities. I expected to learn a lot from my supervisor and be able to be part of a lot of projects. But the reality was much worse.

At the old office, (yes, the company moved to a new office in the midst of my internship) I did not have my own desk to work at. I had to work in a common area shared by another organization. The desk and chair were uncomfortable to work in for 8 hours a day. (Since those were not meant to sit for 8 hours) Fortunately, after moving to the new office, this was not an issue anymore.

Reality also hit hard after the second month. Because the company is small, I am the only intern, with projects handled only by me. I did not have anyone to talk to during work. Even when I encountered technical bottlenecks, my supervisor wasn’t able to provide much help as he was busy with meetings and so on. Other colleagues were close friends and had their own projects to worry about. I probably suffered a bit of depression in the third month and was very deflated.

I was glad that I kept on going out to do sports after working hours to keep myself sane and healthy.

Learning and Growth

Learning and growth in an SME are definitely much more significant as you will be participating in most of the development processes. I was involved in three different projects throughout the 6-month internship. Throughout the three projects, my role was basically a full stack engineer, where I had to listen to user requirements, plan, design, prototype, and develop the front and back end of the application.

I was able to learn full-stack desktop and web applications, as well as custom PDF parsing algorithms.

Takeaways and Lessons

My takeaway from this internship experience is to always understand that, it is okay if some days we are unproductive and some days we are super productive. I guess the most important thing is to make sure that you’re consistent and always there. No matter how much you contribute.

Another takeaway is to understand the company culture beforehand if possible. Although I understand that, as an intern, I am not part of the company, it is still depressing when my desk is isolated in the corner and not a lot of communication between me and the other employees.

That’s all for the blog. I’m going to touch a lot of grass before the next semester starts!

The template page

I know, the pictures are the same, and the description are like wtf, but chill, this is for testing purposes. Real info will be fetched from Firebase later on.

I first built the page for the Hobbies screen. However, I quickly realized that I am going to use the same design for my Work Experience page. Both screens were built with the same codebase. Everything is built inside of a ListView.builder class. And information is fetched based on the title of the page.

The CustomListItem class is a custom-defined class that I referenced here.

About Me Page

As for the About Me Page, I chose to use a normal png file over the 3D model, just because this picture looks so much better. As well as I’m having problems dealing with the 3D model from the Home Page. This part of the About Me page was rather easy to build. Just a Column nested within a Container. I then proceeded to include a Google Maps for a more detailed introduction about myself.

This was quite easy to build, I just had to follow the Codelabs from the Google Dev website.

How do I navigate to different screens?

In order to navigate from screen to screen, I used the Navigator class from Flutter itself. And I wanted to implement this small little detail where every time when I press the back button, it will return to the Home Page no matter how many pages I have visited on my website. So, I made use of the pushAndRemoveUntil() method.

And that’s all for Day #6 as well as the front-end sketch work so far. I’ll start working on the backend to fetch data from Firebase. If you would like to support me, you can buy me a coffee.

As always, open to discussions and suggestions. Peace! ✌️

Achievements section

From the previous article, I built my achievements section with a NestedScrollView class. That was fun and implemented my initial design very well. However, I quickly ran into problems when I was trying to animate it to open up different achievements from different years. I went through SlideTransition, AnimatedBuilder, AnimatedPosition, and OpenContainer classes in Flutter, but I wasn’t able to make it work. Maybe I was missing some stuff that I just couldn’t figure out. I then changed my plans to download a package from Pub.dev called timeline_tile. This package is highly customizable and very easy to use.

It isn’t that bad right? I’ll work on finishing up the design later on when I start fetching data from Firebase after I finish sketching up the whole front end of my website.

Google Dev section

The final section of my home page. It’s an honorable mention to my current Google Developers community who brought me into the wonders of Flutter.

This section was fairly easy to build with a Container and specifying a DecorationImage for the background image. The frustrating part was the introduction passage and the color of my 3D Dev logo. In the introduction passage, I had to build a large RichText widget with a lot of TextSpan inside of it just to specify different styles for different text as shown in the image.

I’m eager to find out better and more efficient ways to implement this design. Please drop a comment if you know how.

I’m also seeking help to find out why the color of my 3D model is so faded.

I will update the next article as to why the 3D model looks so faded. Thanks for reading and have a nice day! Feel free to support me through

As always see you at the next one! Peace! ✌️

Responsive Design

I improved my codebase to be responsive according to different screen sizes. This tutorial by Mitch Koko was really easy to understand and follow. I used it to mainly change the size of text, the amount of padding, and the camera angle of the initial 3D mode when loaded.

Studies Achievement Section

The other reason why this update took so long was also because of a specific design I was trying to achieve.

I’ve been trying out a package called nested_inner_scroll on pub.dev, because of the simplicity of use. However, there was one big problem. Once you implemented the package, mouse wheel scrolling will be disabled. You’re left with dragging the scrollbar on the side to scroll. Hence, I took some time to study why the package behave in this way. But I couldn’t get it to work.

I also tried to use iFrame, an inline frame within a webpage to display another website inside the frame. This article by Aseem Wangoo explains how to use it in Flutter pretty well, but it doesn’t work for my case since I’m not embedding a webpage within my website.

I moved on to use the built-in NestedScrollView class. The class seemed daunting at first sight with the parameters that needs to be initialized, but it wasn’t so when I started using it.

And regarding all those pink containers inside the grid, I am planning to fetch contents from Firebase later on.

And that’s all for Day 4! (Well, sort of day 4) As always, see you on the next one! Peace! ✌️

What was that error

The error message “Trying to use the default webview implementation for TargetPlatform.windows but there isn’t a default one” was actually telling me that my windows application does not have a way to load a Model_Viewer widget. This is because the model viewer is actually a web component developed by Google. Hence, to display a web component in a desktop or mobile application, you’ll need to wrap it in a WebView dependency.

And ah, silly me testing my website on a Windows application without realizing it. Just found out I can run the command “flutter run -d chrome” in the terminal.

The 3D model

Finally, I can see my 3D model on a webpage. I had to do a lot of reading on the model_viewer documentation to adjust the camera angle, zoom, and whatnot. But still can’t get it to zoom in on my face. (I don’t like how my hands are just dangling on the default model)

I’m still trying to iron out a few rough edges here and there regarding the model and size of the model. I also tried to animate my model in Blender, but that was not my cup of tea.

Responsive site?

After making my model work just okay. I thought about making my site responsive when a user visits it on a mobile app. I’m still working on how to make my model go from side to side with my intro to above and bottom when the screen size is smaller.

As you can see, this can’t be it. This is bad. I tried using a Wrap widget but I’m not sure why it’s not going to the bottom. So I’ll have to figure it out.

Honorable mentions!

I noticed that when running the website through the terminal gives you a link to a Flutter DevTools Debugger on your site. And that is so neat! It helped me solve quite a few layout problems easily. I’m not sure how to get to this page if you’re pressing F5 with VS Code though.

That’s all for Day #3! As always, feel free to comment, discuss or suggest in the comments. See you the next day. Peace! ✌️

Setting up the theme

Day 2 of building my flutter website starts with me initializing the flutter project in Visual Studio Code. I then proceeded to set the color of the themes with the ThemeData function. Defining the theme across the whole project was something I did not do for my first Flutter project. And I’m glad I did it this time, it saves time and makes the code much cleaner to read.

I did encounter errors requiring me to pass a MaterialColor class to the ThemeData attributes initially, but somehow that error magically disappeared when I debug the project in a Chrome browser. (Again, those “I don’t know what I did” moments)

Building the AppBar

Building the AppBar was easy for my situation, as I didn’t need much from my AppBar, just a few Flexible TextButtons, and wallah! My AppBar is done. I did have some hiccups along the way when I wanted the text buttons to resize themselves, mainly because I forgot about the Flexible and Expanded widgets.

Building the body

Building the introductory body was easy. Wrap it in Row and Column widgets and you have yourself a basic layout. I used the RichText class to have different styles of text in one line, as well as inline hyperlinks to my socials. To hyperlink to my socials, I used WidgetSpan inside of the RichText class. Then, it is just a normal IconButton that launches to my social links with a url_launcher dependency.

Oh yeah, I also wrapped my entire introductory Column widget in an Expanded widget to make it responsive.

Finally, when trying to load a 3D model for the first time…Errors! As of writing, I still can’t figure out a solution. I’m using a package called model_viewer_plus but I’m getting an error message as below:

“Trying to use the default webview implementation for TargetPlatform.windows but there isn’t a default one”

Signing off day two with an error message. As always, feel free to comment or give suggestions on my article, I’m new to blogging and Flutter. See you in the next article when I get to solve this error. Peace! ✌️

So the motivation for building my own portfolio website came when I received a surprise email about attending Google IO 2022.

Since then, I had the idea of building my own portfolio website with my own domain! However, with my hands full of academic work, I did not start developing until my semester break.

And now with my two-month-long semester break, I started out by planning out the layout, color theme, and UI for my website using Figma.

I like the dark theme a lot. And I mean A LOTTTTT. So I started out by understanding the colors of the dark theme through the Material Design page about dark themes. After that, it’s all about hitting that space bar with Coolors to find some awesome color combinations. Regarding the avatar, I created it through a website called Ready Player Me. And yes, I’m planning to have 3D models on my website to make it more interesting. Although it might not be possible, I have my fingers crossed 🤞.

I did not plan to have a lot of pages for my website yet, mainly because I don’t know how much time would it take for me to complete it, I’ll keep it simple for now. That’s all for the first day, I’m new to web development and Flutter, so feel free to comment or give suggestions. I’ll see you the next day! Peace ✌️