Introduction
This week marks the beginning of Fabacademy and setting up the foundational website for documenting my Fab Academy journey. I’ve opted to reuse a Jekyll theme I previously crafted for my portfolio, which is both familiar and well-suited to the needs of this project.
Objectives
My objectives for the website are to streamline my documentation process but also to create a resource that is both useful and enjoyable for others:
- Streamline Creation: Simplify the process of blog and documentation creation.
- Free Hosting: Leverage free hosting services to minimize costs.
- Open-Source Tools: Utilize open-source tools for development and customization.
- Resource for Others: Design a site that serves as a helpful resource to the community.
- Tag Filtering: Implement a tagging system to organize and filter posts.
- User Experience: Ensure that the site is intuitive and enjoyable to use.
- Scalability and Modularity: Design the architecture to be scalable and modular to accommodate future expansions.
Jekyll
A robust static site generator that supports markup languages, facilitating the creation of modular and scalable websites. Particularly useful is its compatibility with GitHub Pages, which offers free hosting.
Muuri
A JavaScript library that enables dynamic grid layouts, enhancing the visual appeal and interactivity of the site.
Style: Neo-Brutalism
Design Principles
Following the Neo-Brutalist Design Guide on Behance, I aimed to embody the principles of this aesthetic through bold colors and structural elements.
Color Palette
- Orange:
#E95420
- Vibrant and energetic, capturing attention.
- Purple:
#4E00E0
- Deep and thought-provoking, ideal for highlights.
- Green:
#61DB0D
- Fresh and lively, evoking creativity.
- Teal:
#0DDBA5
- Calming yet dynamic, for balance.
- Yellow:
#DBD00D
- Bright and stimulating, ensuring visibility.
Process
- Setup and Configuration:
- Installed Jekyll using the official guide.
- Set up Git by downloading tools from git and GitHub Desktop.
- Used GitHub Desktop’s UI for cloning repositories and command line for detailed operations.
- Integration and Customization:
- Transferred files from my GitHub repository to my Fab Academy repository, ensuring not to copy the
.git
folder to avoid merge conflicts.
- Created layout templates and modular components for better design flexibility.
- Styling and Features:
- Applied Neo-Brutalist styling to CSS components based on the design guide.
- Enhanced interactivity with a code block copy button and an automatic gallery separate from the Muuri gallery.
- Development Cycle:
- Continuously tested, edited, and updated the site, using Git commands:
1
2
3
| git add .
git commit -m "description of changes"
git push
|
- This iterative process ensures that improvements are methodically documented and integrated.
Project Sketch
For a detailed visual representation of my final project, please visit the project diagram.