As a first entry in this repository, I’m interested in experimenting with HTML, CSS, and JavaScript to create a website that not only explores and conveys the aesthetic concepts of the project but also serves as a practical tool to document updates, methods, and knowledge acquired throughout the diploma program.
With the goal of creating a website that functions as a menu for future entries, I’ve decided to learn the most commonly used languages for web design: HTML, CSS, and JavaScript. These will be used within Visual Studio Code as the main code editor, chosen due to my prior experience with the software from previous Python programming courses. Additionally, a plugin called “Open with Live Server” will be installed to enable real-time preview of code updates.
Besides VS Code, I also looked at a couple of other code editors. Here’s a short comparison between them: Visual Studio Code (VS Code) is free, open-source, and very popular. It has a modern look, lots of helpful extensions, and built-in Git support. It works with many programming languages and is great for web development, especially when using plugins like Live Server for real-time previews. Sublime Text is a lightweight and very fast editor. It doesn’t come with as many features built-in as VS Code, but you can add many tools through packages. It’s free to try, though it sometimes shows reminders to buy the full version. Atom, created by GitHub, is also free and open-source. It’s very customizable and has a nice user interface. It connects well with GitHub, which is helpful for team projects. However, it can be slower than the others for big projects, and it’s no longer actively maintained since 2022.
Git Bash is a tool that lets you use Git through a command-line interface on Windows. It works like a Linux terminal, so you can run basic commands like listing files or moving between folders, which aren’t normally available in Windows Command Prompt. With Git Bash, you can do important Git tasks like cloning repositories, making commits, and pushing changes to remote servers. It also lets you run simple scripts to automate tasks. Overall, it helps Windows users work with Git in a way that feels more like using a Unix or Linux system.
The most important creative goal of the project was the design of the homepage, which is inspired by the website of Philippe Rahm’s architecture studio in Switzerland. The main idea is to create an overlay mask that sits above the site’s basic index. As the user moves the mouse, this mask gradually fades or disappears, revealing the underlying menu of assignments. Additionally, the interaction is designed to be responsive, adapting fluidly to the size and resolution of the user’s screen.
1. To get started, you need to install Git "Version Control." To do this, click on the "Download" option, as shown in the image.
2. I created my credentials in Git and linked them to my online repository using my SSH key.
3. By entering the SSH key generated as a text file in GitLab, I can now validate the following actions I perform with Git.
4. Create a new folder where the pre-existing files of the web/portfolio project will be cloned. Use the GIT INIT command to set the master folder and then clone with GIT CLONE.
5. Download a template from the ThemeWagon website that will include the HTML, CSS, and JS files. Edit them later to fit the needs of the portfolio
6. The first step eith the template was rorder the assignments list and giving them css qualities to be able to edit their position.
7. In a file called dif.js the behavior of the web will be defined. The first section is dedicated to create rules for the use of certain dimensions according to the screen size or resolution.
8. In the next section the characteristics of the points are defined. Two main parameters, the interval of time to follow the mouse movement and the min and max size of the points generated
9. Once the points are created, it’s necessary to perform a subtraction operation on the front layer in order to reveal the links on the index. These links should only become functional when they are fully exposed.
10. Select the cached files to replace by navigating to the folder with GIT ADD ., then create a version with GIT COMMIT -M "version name", and finally replace it with GIT PUSH.