Daniel Perez - Portfolio

Overview

During the first week, I explored project management fundamentals, signed the necessary agreements, and set up my personal repository to document my Fab Academy journey. I worked through a Git tutorial, familiarized myself with version control, and created a personal webpage to showcase my assignments and final project.

Checklist

Project Management: The Illusion of Control

Project management feels like juggling flaming swords while blindfolded. It’s all about convincing yourself you’re in control, even though deep down, you know the chaos has already won. Week 1 was my dive into this delightful madness, signing agreements, setting up repositories, and trying to make sense of Git.

The detailed project planning and updates will be documented further in the Final Project section as the project progresses.

Tools I Used

Tool	Description
VS Code	Code editor used for HTML and CSS development.
Git	Version control system to track changes and manage my repository.
Terminal	Command-line interface for Git commands and repository management.
Web Browser	Used to view and test the personal site.

Git Tools

Command	Purpose
`git clone`	Cloned the repository from the Fab Academy server.
`git status`	Checked the current state of the repository.
`git add .`	Staged all changes in the repository for commit.
`git commit -m "message"`	Saved changes locally with a descriptive message.
`git push`	Pushed the committed changes to the remote repository.

GIT this, GIT that: Step-by-Step Instructions

Follow these steps to set up Git, access your repository, and make your first commit:


        # Step 1: Install Git
        # macOS
        brew install git


        # Once Git is installed, verify it's ready to go:
        git --version
        # If you see the version number, congratulations! Git is alive and well.


        # Step 2: Clone the Repository
        cd path/to/your/folder
        git clone 
        # This creates a cozy home for your project in the folder you specified.


        # Step 3: Navigate into the Repository
        cd repository-name
        # You’ve entered the magical land of your Git repository.


        # Step 4: Stage All Files
        git add .
        # This command says: "Git, prepare all my files for the next step!"

        # --- WAIT! Let’s Make Changes First ---
        # Before moving on, edit some files (like adding new HTML or fixing typos).
        # Use your favorite editor (VS Code, nano, vim, etc.) and save the changes.

        # Step 4.5: Stage Individual Files (Optional)
        git add filename.extension
        # Use this if you only want to stage a single file instead of everything.


        # Step 5: Check Git Status
        git status
        # This command lets you double-check what’s staged and what’s not.
        # It’s like asking, “Hey Git, are we good to go?”


        # Step 6: Make the First Commit
        git commit -m "Initial commit: Added basic project files"
        # You’re telling Git to remember this moment forever.


        # Step 7: Push Changes to the Remote Repository
        git push
        # Now Git takes your changes and uploads them to the cloud. Magic!

Creating My Webpage & Using Git

For my Fab Academy documentation, I decided to build my website from scratch, using a blank template instead of modifying an existing one. This approach allowed me to learn more about HTML, CSS, and Git while fully controlling my design. While it may not be the most visually polished, it is my own creation, and I can improve it over time.

Step 1: Setting Up the Basic HTML Structure

To start, I created a clean and simple HTML template with a well-structured layout. This serves as the foundation for my webpage.


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Daniel Perez - Portfolio</title>
            <link rel="stylesheet" href="assets/styles.css">
        </head>
        <body>
        </body>
        </html>

Step 2: Creating the Fixed Header & Navigation Bar

To ensure smooth navigation, I created a **fixed header** that remains visible while scrolling. This helps keep the main sections accessible at all times.


        <!-- Header with Navigation -->
        <header>
            <nav>
                <div class="nav-links">
                    <a href="#home">Home</a>
                    <a href="finalproject.html">The Big Idea</a>
                    <a href="#about-me">Who's this guy?</a>
                    <a href="#assignments">The Fun Projects</a>
                </div>
            </nav>
        </header>

Step 3: Organizing My Webpage Structure & Navigation

Since each assignment is placed in a separate HTML file, I structured my website this way to prevent long loading times. This setup ensures smoother navigation and faster access to each section. To make navigation easy, I implemented a menu system linking to each assignment, along with a Back to Top button and a structured footer.


        /daniel-perez/
        │── assets/          # CSS & JavaScript files
        │    ├── styles.css
        │    ├── script.js
        │── files/           # Files for download (STL, PDFs, etc.)
        │── images/          # All images used in the website
        │── finalproject.html # Dedicated page for my final project
        │── index.html       # Main webpage
        │── week1.html       # Weekly assignments
        │── week2.html       # Weekly assignments
        .
        .
        .
        │── week^n.html       # You get the point
        │── studentagreement.html # Minimalist standalone student agreement page

To keep easy access to different sections, I added navigation links that let users jump between sections without leaving the page.


        <!-- Back Links for Navigation -->
        <div class="back-links">
            <a href="#assignments">Back to Assignments</a> | <a href="#home">Back to Top</a>
        </div>

At the bottom of the page, I included a footer for branding and a button to return to the top dynamically.


        <!-- Footer Section -->
        <footer>
            <p>© 2025 Daniel Perez. All rights reserved.</p>
        </footer>

        <!-- Scroll-to-Top Button -->
        <button id="scroll-to-top" onclick="scrollToTop()" title="Go to top">↑</button>

        <!-- JavaScript for Scroll-to-Top -->
        <script src="assets/script.js"></script>

JavaScript for Smooth Scroll-to-Top


        // Scroll-to-Top Function
        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

Now my website remains clean, efficient, and easy to navigate, while keeping everything well-documented in a structured way!

Step 4: Setting Up Git - Initializing & Cloning the Repository

Once I had my website structure ready, it was time to set up Git to track changes and sync everything with my Fab Academy repository. The first step was to initialize Git and clone my repository.

To start tracking my files, I navigated to my local project folder and ran the following command:


        # Initialize Git inside the folder
        git init

This command sets up Git in my directory, allowing me to start version control.

Next, I cloned my Fab Academy GitLab repository to my local system:


        # Clone the remote repository
        git clone https://gitlab.fabcloud.org/academany/fabacademy/2024/labs/puebla/students/daniel-perez.git

This command creates a local copy of my online repository, ensuring that I can work on my files locally.

After cloning the repository, I replaced the default template with my own design. I carefully arranged my files into the appropriate folders:


        /danielperez-main/
        │── assets/          # CSS & JavaScript files
        │── files/           # Uploaded files (STL, ZIP, etc.)
        │── images/          # All images used in the website
        │── finalproject.html # Dedicated page for my final project
        │── index.html       # Main webpage with all assignments
        │── studentagreement.html # Minimalist standalone student agreement page

Now that everything was in place, it was time to commit my changes and push them to GitLab.

Step 5: Committing & Pushing Changes to GitLab

Once I had my files properly arranged, I used Git to track, commit, and push my changes to my repository.

Before committing, I checked which files had been modified using:


        # Check the status of tracked & untracked files
        git status

To track all changes, I used:


        # Stage all changes
        git add .

If I only wanted to stage a specific file, I could use:


        # Stage only one file
        git add index.html

Once the files were staged, I created a commit with a message describing the changes:


        # Commit changes with a message
        git commit -m "new template"

Finally, I uploaded my changes to my remote repository with:


        # Push changes to GitLab
        git push origin main

After pushing, I checked my GitLab repository to confirm that my updates were successfully uploaded.

With this, my website was now live, and I could continue making changes and updating my documentation through Git!

Week 1: Project Management