Week 1: Project Management

This week I worked on defining my final project idea and started to getting used to the documentation process, and 3D scanned an object

On the first week,
GitLab

Git Bash

VIS CODE

First Session’s Task

Objective

Develop a Personal Portfolio Website by completing the following tasks:

1. Set Up Development Environment:
   • Download and install Git Bash.
   • Download and install Visual Studio Code (VS Code).
2. Transfer and Clone Project Files:
   • Use Git Bash to clone the project repository to your personal laptop.
   • Open the cloned files in Visual Studio Code.

Steps to Complete the Tasks:

1. Download Git Bash and Visual Studio Code:

   • Ensure you have both applications installed on your laptop.

   To download and install both applications, simply click on the following links. You will be directed to their respective websites, where you can download Git Bash [1] and Visual Studio Code (VS Code) [2].

2. Clone the Project Repository:

   1. Open Git Bash in a preferred folder (e.g., Desktop).

      

   2. Use the git clone command to clone the repository from GitLab.
      1. Navigate to GitLab and:
         • Go to the main page displaying your username.
         • Click on the ‘Code’ button.
         • Copy the URL under ‘Clone with HTTPS’.
      2. In Git Bash, type the git clone command followed by the copied URL:

         git clone <URL>;
         

   

   

   After completing the aforementioned steps, an external dialog box will appear on the screen, requesting GitLab account information such as the username and password for security measures and confirmation. Consequently, the next step involves fulfilling these requirements, which will ultimately contribute to successfully copying the project to the Desktop folder of the laptop.

3. Create and Navigate to Project Folder:

   1. Use the cd command to create and move into a new folder:

      cd ;folder-name;
      

   

4. Configure Git:

   1. Set your Git username and email globally:

      git config --global user.name "Your Name"
      
      git config --global user.email "your.email@example.com"
      

   

5. Open Project in Visual Studio Code:

   1. Open Visual Studio Code.
   2. Use the ‘Open Folder’ option to open the cloned project files.

Benefits: Using Visual Studio Code offers easier access and a wider variety of extensions for editing and managing your project efficiently.

Second Session’s Task

Objective

Enhance and personalize your Personal Portfolio Website by completing the following tasks:

• Apply Extensions to Enhance Functionality.
• Modify the Website Name.
• Customize the Website Theme.
• Adjust the Website Palette.
• Add Social Icons with their Respective Links.

Steps to Complete the Tasks in Visual Studio Code:

1. Apply Extensions to Enhance Functionality:

   • Open Visual Studio Code and navigate to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
   • Search for and install extensions that can enhance your development experience. Recommended extensions include:
     • Code Spell Checker
     • Markdown Preview Enhanced

   

2. Save the additions or commit in VS Code:

   Save your changes and commit them to your version control system using the following steps:

   1. Save your changes:

      • To save your changes, click File in the top menu and select Save, or use the keyboard shortcut Ctrl+S (Windows).

   2. Open the Source Control view:

      • Click on the Source Control icon (represented by a branch icon) in the left sidebar to open the Source Control view.

   3. Enter a commit message:

      • At the top of the Source Control view, you will see a text box labeled Message. Enter a descriptive commit message that summarizes your changes.

   4. Commit your changes:

      • Click the checkmark icon (✓) above the commit message box to commit your staged changes.

   

3. Find the link to the website in GitLab:

   To find the link to the deployed website in GitLab, follow these steps:

   1. Go to the ‘Deploy’ page:

      • In the left sidebar of your project page, click on ‘Deploy’.

      • Select ‘Pages’.

      

      • You’ll be taken to the Pages page where you can find the link to your website.

      

   This step is crucial if you want people to view your website. 😊

4. Upload images in GitLab:

   To upload images to your GitLab repository, follow these steps:

   1. Navigate to your project:

      • Go to your project by clicking on the project name in the dashboard.

   2. Click on the docs file:

      • In the main page, locate and click on the docs file.

      

   3. Locate the images file:

      • After clicking on the images file, choose which week you would like your picture to be placed.

      

      

   4. Upload the image:

      • Click on the + button (or New file button) and select Upload file. Click Browse to select the file from your computer and upload it.

      

5. Code the uploaded images in VS Code:

   To use the uploaded images in your Markdown files or website, follow these steps:

   1. Get the image URL:

   After uploading the image to GitLab, navigate to the image file in your repository and click on it. This will open the image preview page. Copy the URL of the image from the browser’s address bar.

   

   1. Upload it into VS Code:

   You can upload images using various methods and customize their appearance. Themes like outlines and captions, as well as image alignment, can be controlled. Here’s an example of how to achieve this using HTML:

   <p align="center">
       <img src="../../images/week01/IMAGE01" style="border: 2px solid black;" />
       </p>
   

   Note: Put your image URL instead of IMAGE01.

6. Markdown CheatSheet:

   Here is a comprehensive Markdown cheat sheet for quick reference:

   

7. Check if the commit succeeded or failed in GitLab’s pipelines:

   After pushing your changes to GitLab, follow these steps to check the status of your commit in GitLab’s pipelines:

   1. Navigate to the Pipelines page:

      • In the left sidebar of your project page, click on ‘Build’ and then select Pipelines. This will take you to the Pipelines page where you can see all the pipeline runs for your project.

   

   1. Check the pipeline status:

      • On the Pipelines page, you will see a list of pipeline runs with their statuses. Each pipeline run corresponds to a commit. The status of each pipeline run will be indicated by a color-coded icon:

        • Green checkmark (✓): The pipeline succeeded.

        • Red cross (✗): The pipeline failed.

        • Blue clock (⌚): The pipeline is running.

        • Yellow dot (●): The pipeline is pending.

   
   Pipeline Passed

   
   Pipeline Failed

   
   Pipeline Running

   
   Pipeline Pending

   Note: This can also be seen in the ‘Main Page’ of ‘Gitlab’.

8. Navigate to the ‘Explorer’:

   Open Visual Studio Code and click on the ‘Explorer’ icon on the left sidebar to view your project files.

   

   The ‘Explorer’ in Visual Studio Code helps you manage and navigate through your project files. By clicking on the ‘Explorer’ icon in the sidebar, you open a view that displays all the files and directories in your current project workspace.

9. Click on the mkdocs.yml file:

   In the ‘Explorer’ pane, locate and click on the mkdocs.yml file. This file is the configuration file for your MkDocs project.

   

   The mkdocs.yml file is the main configuration file for an MkDocs project. By clicking on it in the ‘Explorer’, you open the file in the editor, allowing you to view and modify its contents.

10. Assign the desired name to the website:

    In the mkdocs.yml file, find the site_name attribute and set it to your desired website name by editing the value.

    

    The site_name attribute in the mkdocs.yml file specifies the name of your website. By changing its value, you update the website title that appears in the browser tab and throughout your site. In this website, I changed the site_name, site_description, site_author, and copyright to display my name, which is Ahmed Alaali, as exhibited in the figures below.

11. Associate your personal account link with the application icon:

    In the same mkdocs.yml file, locate the section where you can add custom links and include your personal account link with the appropriate application icon.

    

    After running the code, the icons you’ve selected will be displayed at the end of your website. If you’re curious about the variety of icons available, explore the Font Awesome icon library [5]. 😊

    

    In the mkdocs.yml file, you can add custom navigation links, including links to your personal accounts like Instagram, LinkedIn, etc. This is done by adding a section for custom links and specifying the URL and icon for each link. In this website, I added links to my personal accounts: Facebook, Twitter (currently known as ‘x’), Instagram, and LinkedIn. Feel free to check them out!😊

12. Change the theme of the website:

    To change the theme, find the theme attribute in the mkdocs.yml file and modify its value to the name of the desired theme.

Theme Examples

Below, you’ll find a few theme examples. Each figure is accompanied by a caption displaying the name of the theme. To customize your website, simply replace the theme name highlighted in the figure above.

material Theme

mkdocs Theme

readthedocs Theme

MkDocs supports various themes that change the appearance of your site. By modifying the theme attribute in the mkdocs.yml file, you can switch to a different theme that suits your design preferences. 😊

Theme Code

    theme:
name: material
palette:
    primary: blue grey
    accent: indigo
font:
    text: Playwrite Deutschland Grundschrift
    code: Ubuntu Mono
logo: images/masks-theater-solid.svg
favicon: images/masks-theater-solid.svg
features:
    - navigation.tabs
    - navigation.instant

Change the background and font color of the website:

• Change the primary and accent color of the website:

  In the theme configuration section, specify the primary and accent colors by adding the relevant attributes and assigning them your preferred colors.

  If you’re curious about how the website’s appearance can change, go ahead and click the buttons below. Each button represents a different color scheme, with the first word indicating the primary color and the second word indicating the accent color. Witness the magic of colors as they transform your browsing experience! 😊🌈

Customize Your Website

Green & Blue Blue & Indigo Orange & Pink Red & Yellow Teal & Brown Purple & Gold Black & Silver Navy & Cyan

The primary color define the main color scheme of your website, while the accent color define the highlighting color when the cursor is pointing on something clickable. These can be seen in the ‘theme’ section of the mkdocs.yml file, you can set these colors to align with your branding or aesthetic preferences. In this website, the primary color of the website is chosen to be ‘blue grey’ while the accent color is ‘indingo’.

Just in case you are wondering what the available colors are or what they’re called, this website link [3] showcases them and demonstrates the color terms. It also explains how to customize colors beyond the available ones. 😊

• Change the background color of the website:

To change the background and font color of your pages, simply add the following code to your pages instead of modifying the mkdocs.yml file. This will allow you to customize the appearance to your liking:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background-color: peachpuff; # Set the background color up to your taste
                color: pink; # Set the font color up to your taste
            }
        </style>
    </head>
    <body>
        <!-- Your content can go here -->
    </body>
    </html>

If you’re curious about how the website’s appearance can change, go ahead and click the buttons below. Each button represents a different color scheme. See how the magic of colors transforms your browsing experience! 😊

Navy Green Peach White Grey Yellow Purple Pink Green Blue Coral Cyan

The background color of your website affects the overall look and feel of your site. This ensures that your site’s visual style matches your brand or personal preference.

• Add a Light & Dark Mode Toggle

To easily switch between light and dark modes on your website, you can modify the mkdocs.yml file with the following code. This will allow you to customize the background and font colors of your pages:

theme:
  name: material
  palette:
    # Light mode palette
    - scheme: default
      toggle:
        icon: material/brightness-7 
        name: Switch to dark mode

    # Dark mode palette
    - scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

If you prefer to use custom colors instead of the default white and black, you can add the following HTML and CSS code to your pages. This allows for more flexibility in designing your website’s appearance with other color schemes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light/Dark Mode Toggle</title>

    <!-- Custom CSS for light and dark modes -->
    <style>
        body {
            font-family: Arial, sans-serif;
            transition: background-color 0.5s ease, color 0.5s ease;
        }
        .light-mode {
            background-color: lightcyan;
            color: black;
        }
        .dark-mode {
            background-color: #2F4F4F; /* Dark Slate Gray */
            color: white;
        }
        .toggle-button {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            background-color: grey;
            color: white;
            z-index: 1000; /* Keeps the button on top of other elements */
        }
    </style>

    <!-- JavaScript to handle mode toggling -->
    <script>
        function toggleMode() {
            const body = document.body;
            body.classList.toggle('dark-mode');
            if (!body.classList.contains('dark-mode')) {
                body.classList.add('light-mode');
            } else {
                body.classList.remove('light-mode');
            }
        }
    </script>
</head>
<body class="light-mode">
    <button class="toggle-button" onclick="toggleMode()">Toggle Light/Dark Mode</button>
</body>
</html>

This code gives you full control over the appearance of your pages, allowing you to switch between light and dark themes with ease while offering custom color options for a more personalized look.

• Change the font text and code text of the website:

  To customize the fonts, locate the font settings within the ‘theme’ section and update the text and code font to your chosen fonts.

  If you’re curious about how the website’s appearance can change, go ahead and click the buttons below. Each button represents a different theme. See how the magic of fonts transforms your browsing experience! 😊

Arial Times New Roman Verdana Georgia Courier New Calibri Impact Roboto

Customizing the font styles for regular text and code enhances the readability and visual appeal of your site. You can specify these fonts in the ‘theme’ section under font settings by providing the font family names. In this website, the font for the code is chosen to be the default ‘Ubuntu Mono’, while the regular font text is chosen to be ‘Playwrite Deutschland Grundschrift’.

If you are considering changing the font for your website’s text and code, this website link [4] showcases a variety of options. You can choose the fonts that best suit your desired aesthetic for the website. 😊

• Change the color of the font text of the website:

  In the theme configuration, add or modify the text_color attribute and set it to your desired font color value.

  If you’re curious about how the website’s appearance can change, go ahead and click the buttons below. Each button represents a different theme. See how the magic of fonts transforms your browsing experience! 😊

Red Green Blue Purple Orange Black Pink Brown Cyan Magenta Yellow Teal Lime Indigo Grey Gold Silver Maroon

This is your website content. Feel free to add more elements!

The choice of font color significantly impacts the readability and aesthetic appeal of your website’s text content. By carefully selecting text colors that complement the overall design and are easily readable against the background color, you can enhance the user experience

• Change the icon and favicon of the website:

  In the ‘theme’ configuration, find the logo attribute and set its value to the path of your new icon in the ‘images’ file. Additionally, specify the favicon attribute with the path to your favicon in the ‘images’ file.

Favicon

Icon

The logo or icon of your website is a visual representation of your brand. By setting the logo attribute in the ‘theme’ configuration to the path of your logo file, you update the site’s branding to reflect your unique identity. Additionally, the favicon attribute allows you to set a small icon that appears in the browser tab next to the site name, enhancing your site’s professional appearance. In this website, the logo is chosen to be ‘masks-theater’ because it resonates with my artistic inspiration and creative vision.

If you are looking to enhance your website’s visual appeal, consider exploring this website link [5]. It showcases a variety of options for both icons and favicons, allowing you to choose the ones that best align with your desired aesthetic. 😊

• Put emojis in the website:

  To add emojis to your website, include them directly in your Markdown content or configuration files by copying and pasting the desired emoji character. You can also try clicking on your keyboard: Windows key + V to open the clipboard, and you’ll find a variety of emoji categories to choose from. 😊

Emojis can be a fun and expressive addition to your website. Simply copy the desired emoji character from an emoji picker or website and paste it where you want it to appear in your content. For example, you can add an emoji in a Markdown file like this:

# Welcome to My Site! 😃

If the desired emojis are not available, consider visiting this website [6], which showcases multiple emoji styles, including those from Apple, Google, and Windows. 😆😎

Benefits: By modifying the website name, customizing the theme, adjusting the palette, adding social icons, and applying extensions, you create a unique and professional online presence that reflects your personal brand while also enhancing your development workflow.

Reference

• [1] - Git Bash
• [2] - Visual Studio Code (VS Code)
• [3] - Material for MkDocs
• [4] - Google Fonts
• [5] - Fontawesome
• [6] - Webfx (Emojis)

---

Last update: September 17, 2024