1. Project management
The bread and butter: VisualStudio Code and GitLab
Here I´ll be describing the steps I took to create my preliminar base of the website to showcase my FabAcademy work. First, we need to install both Visual Studio Code and Git on our computers. Visual Studio Code is a code editor where we will write and modify all the code that will compose the website. We can independently edit the website and its subpages, give it format, and save it for later upload to the cloud, where we can display it on the FabAcademy page. We will download it directly from the website:
VisualStudio Code
I will be usin this software since I find very appealing what it has to offer against the complexity of it. It is very customizable in terms of the themes and libraries, while also giving a nice understandable structure of your files. It also autosaves whenever I modify any part so it automatically shows any change in the local HTML assigment page, making it very efficient to edit my work.
GitLab is a free program that we will use as a private repository to upload our finished work from our local disk so it can be opened anywhere in case we need it, as it gets stored in the cloud. Here I'll show you how to upload your saved work into the GitLab repository.
To install GitLab you can go to this link: GitLab Download. Select your operating system, windows in my case, and then select the installer depending if your computer is 32 or 64 bit. The installer should download into your computer, then accept the customizable preferences to your liking.
Secondly, we received an email from FabAcademy to grant us a GitLab account to upload our work to the repository alongside the rest of the students.
From there we download the folder as "Visual Studio Code (HTTPS)" to use as a git repository where we will add our work to later push to the server using the command "git init" inside the Git CMD app to make it a Git repository.
Now that we have that folder, we need to convert it to a Git repository. For that, we open the Git CMD app and type "cd desktop". This will direct us to all available folders on our desktop (my case is desktop since my folder is saved here, in case yours is not, type the appropriate space where it's saved). After that, we type "cd jorge-limon" (your folder's name). This will put us inside the Git repository folder where our webpage files will be saved. Lastly, type the "git init" command to make the folder an actual Git repository.
The Template Upgrade:
The format that I'm using for my FabAcademy webpage is a template given by one of our professors for us to use as a base and edit as we see fit. We directly downloaded the template from a GitLab link he sent us, where I downloaded it the same way as the previous one.
From there, we substitute the template files given by FabAcademy with the ones in the template given by our professor. So my webpage currently looks like this:
Changing the whole theme of the website has been a multi step process in which I modified a multitude of settings and features to end up with the current page design I have. Although I will inevitably further modify more settings, this are in my opinion the biggest changes and the ones I recommend to modify if you want to slightly tweak your website and make it totally to your liking!
Firstly we have the font. I choose mine from Google Fonts.
Once you´re there, choose any font of your liking, I went with "Chakra Petch". Once you made your mind (trust me, it will take a while...) click on Get Font, then Get embed code. this should give you the embed code for the your HTML page. Copy and paste that code onto the top of your website´s code.
Secondly, changing the background and text color really upgrades the look of your page. This is done on the "main.css" file. This is where we modiify all of our design and features visually. Change the body background color, and then the body color.
The third most notorious thing on my website is the sidebar on your left. This organizes and separates your subtitles and makes it way easier for the reader to browse your website. I actually just copied it from this youtube video: Responsive Sidebar This again includes a lot of code in the css file and some extra code in each of your assigment pages, but I think it´s very worth it, and it only takes about an hour to get done.
GitLab Cloud upload:
The last step is to upload all of our progress to the GitLab cloud, we that with the Git CMD app using the following commands:
- cd desktop
- cd jorge-limon (here were select the folder we previously used the command git init to make it a repository)
- git add .
- git commit -m "Webpage Template" (We give this commit a name to help us remember the contents of the commit) .
- git push
This is a practice inside Git CMD example of pushing all files and changes to the GitLab cloud. This is an example of how the process should be; it displays all the data that Git CMD shows about the files you added, deleted, or modified.
All the changes should update in the website in a span of a couple of minutes, depending on the size of the files uploaded and the general traffic the website is experiencing
You can also check the commits you´ve made in your GitLab page under "Code-Commits".
Sketch and Planning of Final Project
To conclude the Fab Academy course, I plan to build a VTOL capable, POV fixed wing drone along with it´s respective immersive controls. This includes a full size foot mounted joystick alongside with the throttle and general control electronics. To finish this setup with a head mounted VR setup that controls the position of the camera inside the plane to give it a fully immersive feeling.
The objective of this project is to merge the stability, hover and VTOL capabilities of a quadcopter, with the efficiency, speed and awesomeness of a fixed wing drone.
These are the rough sketches of the idea, altough it will probably change in the future:
