1. State of the art, project management and documentation¶
Documentation¶
The first thing I wanted to do to work a little faster was to clone the git lab project, for that I followed the following steps.
All of the following steps and command lines were in the Windows operating system
STEP1¶
Installing GIT on my computer, this from the official web site
STEP2¶
Connect my git user name and email address
We open Git Bash on the computer and enter these commands
$ git config --global user.name "your user name"
$ git config --global user.email youremail@example.com
STEP 3¶
Create a SSH Key to create that secure connection from my laptop with git lab, if I don't do this then when I clone the project it will only allow me with the HTTPS option, HTTPS only allows me to read and edit it from my laptop but when I want to update it or do the PULL function this will not allow me because I won't have permissions, so it is necessary to do the following steps.
In Git Bash we execute the following command
$ ssh-keygen
Genereting public/private ed25519 Key pair.
Enter file in wich to save the key (/c/user/youruser/.ssh/id.ed25519):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/user/youruser/.ssh/id.ed25519.pub
The key fingerprint is:
SHA256Hereisyoursshkey,copyit8fw user@USER
STEP 4¶
Add the SSH key in git lab
STEP 5¶
After that we will be able to clone the project easily, for that I followed the steps of Diana Wakim where she teaches us how to clone and create the virtual environment.
If this is your first time using virtual enviroment you must install this function. By copying the following command
$ pip install virtualenv
STEP 6¶
after that you can continue with Diana Wakim's tutorial.
Problems activating the virtual environment
To fix it we need to find the Powershell program and run it in admin mode
Then run the following command
$ Set-ExecutionPolicy -Scope CurrentUser
STEP 7¶
After doing so, the problem will be solved and you will be able to activate your virtual environment correctly.
We open visual code and we can start editing and use the PULL option to publish it.
CUSTOMIZATION¶
INSPIRATION¶
I reviewed several profiles of fabricademy graduates, and I was very impressed with the profile of:
Diana Wakim's, I consider her interface looks very attractive and beautiful, I loved it. I like that she teaches us very well the steps to customize our interface with css, html and javascript.
Another profile that inspired me a lot was that of:
Olatz Pereda and how she customized her photo frames with illustrator which encouraged me to learn how to use this tool.
I would say that I was very inspired by them and also by my other passion which is electronics, the word electronics comes from electron which is a fundamental particle in the atom, its behavior is as follows:
The electron is very comfortable in the atom but when some external factor excites it, it leaves its place in the atom, charged with energy it travels through paths and paths of conductors to spend its energy in something, such as an LED, after spending its energy it returns to its position in the atom.
I consider that electronics is that, MOVEMENT, so I liked to give that touch to my page, giving it that animation of how the electrons like the ideas that are in my head are constantly moving.
START DOCUMENTATION¶
STEP 1¶
Ordering these ideas, I took my notebook and started to organize what I needed to do on my page to concentrate on each of the points in due time. 3Write what I wanted to express, for this I used Word but I could also use Google docs considering it is a free tool.
STEP 2¶
Photos, for this I initially used
Tools¶
-
Canva while I learn how to use illustrator, this is to create backgrounds of the same color as the background of my page and give those frames.
-
PhotoRoom this is a quick online tool that allows you to remove the background of the images.
- TinyPNG after editing these images and having them ready to upload to the web I needed to compress them in order to make them lighter and not overload the server with the weight.
PROGRAMMING¶
For this it was necessary to read the Material Mkdocs documentation, where it explains in a simple way how to change or add functions to our page.
On the page you can also see other effects like snow, point scattering and more, you can also configure it.
So I have added particle motion to my page, if you want you can do it too, I show you how.
STEPS FOR PARTICLE ANIMATION¶
Step 1¶
This function is thanks to VincentGarreau , you can check his GITHUB where he uploads all his documentation.
You need to download the particle.js file and go to this PAGE where you need to download the file particlesjs-config.json.
After having those files downloaded, we must go to our project folder and save them in the javascripts folder. If the folder does not exist then create it.
to finish preparing the files please create app.js file and copy all the programming that is in the particlesjs-config.json file
Our project should have this order
> docs/
> assignments/
> development/
> files/
> images/
> javascript/
> particles.js
> particlesjs-config.json
> app.js
> project/
> stylesheets
> extra.css
index.md
.gitignore
.gitlab.ci.yml
README.md
requirements.txt
Step 2¶
Go to the file extra.css and copy the next code
#particles-js {
height : 100vh ;
width : 100% ;
position : fixed ;
z-index : -1 ;
}
Step 3¶
Go to the file mkdocs.yml and activate the extra_css and extra_javascript
Here we need to call the files we have previously prepared, as seen here:
extra_css:
- stylesheets/extra.css
extra_javascript:
- javascripts/particles.js
- javascripts/app.js
Step 4¶
To finish we go to the file where we want to see the particles, as an example I will put it in index.md
We write the following:
<div id = "particles-js" ></div >