languages & tools overview

cheatsheet.css

@@ -113,6 +113,45 @@ html {
 .github button:hover {
     color: #00bcd4;
 }
+/* ------------------------------------Overview-----------------------------------------*/
+.overview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: auto;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 90%;
+    padding: 2rem;
+    border: 2px solid;
+    border-radius: 20px;
+    box-shadow: 0.125rem 0.625rem 0.625rem rgb(0, 0, 0);
+    background-color: #F5F5F7;
+}
+
+.overview img {
+    height: 100px;
+}
+
+.overview .logo {
+    display: flex;
+    gap: 2rem;
+}
+
+.overview h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+}
+
+.overview p {
+    font-size: 2rem;
+    padding: 0 2rem;
+}
+
+
 
 /* -------------------------------------Masonry layout-----------------------------------------*/
 .container {
@@ -141,8 +180,6 @@ html {
     grid-row: span 10; 
 }
 
-/* -------------------------------------Masonry layout-----------------------------------------*/
-
 .box:hover {
     transform: translateY(-10px);
 }

databases/dbms.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/dbms.png" alt="dbms">
+        <h1>DBMS - Overview</h1>
+    </div>
+    <p>A Database Management System (DBMS) is software that manages databases and allows users to create, retrieve, update, and delete data in an organized and secure manner. It provides an interface for interacting with the database, ensuring data consistency, integrity, and security. DBMSs can be categorized into types like relational (RDBMS), NoSQL, hierarchical, and object-oriented. Popular examples include MySQL, PostgreSQL, MongoDB, and Oracle. DBMSs support various features like query processing, indexing, transaction management, and backup to ensure efficient and reliable data storage and retrieval.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

databases/mongodb.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/mongoDB.png" alt="mongodb">
+        <h1>MongoDB - Overview</h1>
+    </div>
+    <p>MongoDB is a NoSQL, document-oriented database that stores data in flexible, JSON-like format (BSON). Unlike traditional relational databases, MongoDB doesn't use tables or rows but collections and documents, allowing for dynamic schema and easy scalability. It is known for its high performance, horizontal scalability, and ease of use, making it ideal for handling large volumes of unstructured or semi-structured data. MongoDB is widely used in modern web applications, real-time analytics, and big data projects. It also supports features like indexing, replication, and aggregation for complex queries and data management.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

databases/postgre.html

@@ -24,7 +24,15 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/postgre.png" alt="postgresql">
+        <h1>PostgreSQL - Overview</h1>
+    </div>
+    <p>
+        PostgreSQL is an open-source, object-relational database management system (ORDBMS) known for its robustness, scalability, and compliance with SQL standards. It supports advanced features such as complex queries, foreign keys, triggers, and multi-version concurrency control (MVCC) for handling concurrent data access. PostgreSQL is highly extensible, allowing users to define custom data types, functions, and operators. It is widely used for web applications, data warehousing, and enterprise-level solutions, offering strong support for ACID transactions, data integrity, and security.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

databases/sql.html

@@ -24,7 +24,15 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/sql-logo.png" alt="sql">
+        <h1>SQL - Overview</h1>
+    </div>
+    <p>
+        SQL (Structured Query Language) is a standardized programming language used to manage and manipulate relational databases. It allows users to perform tasks like querying data, updating records, inserting new data, and deleting existing data. SQL is used to interact with relational Database Management Systems (RDBMS) like MySQL, PostgreSQL, and Oracle. Common SQL commands include SELECT, INSERT, UPDATE, DELETE, JOIN, and GROUP BY. SQL enables efficient data retrieval, management, and manipulation with support for complex queries, indexing, and transactions.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

devops/docker.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/Docker_logo_logos-512.webp" alt="docker">
+        <h1>Docker - Overview</h1>
+    </div>
+    <p>Docker is an open-source platform for automating the deployment, scaling, and management of applications in lightweight, portable containers. Containers package an application and its dependencies, ensuring it runs consistently across different environments. Docker simplifies development, testing, and production workflows by providing isolation, scalability, and easy version control. It is widely used in DevOps and microservices architectures for streamlining development and deployment processes.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

devops/git.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/Git-Icon-1788C.png" alt="git">
+        <h1>Git - Overview</h1>
+    </div>
+    <p>Git is a distributed version control system that tracks changes in code, enabling collaboration among developers. It allows branching, merging, and version history, with local repositories for offline work and remote syncing. Git is known for its speed, scalability, and flexibility, making it popular in software development.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

frameworks/angular.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/Angular_full_color_logo.svg.png" alt="angular">
+        <h1>Angular - Overview</h1>
+    </div>
+    <p>Angular is a comprehensive, open-source front-end web framework developed by Google for building dynamic, single-page web applications. It uses TypeScript, a superset of JavaScript, and provides a wide range of built-in tools and features, such as two-way data binding, dependency injection, and modular architecture. Angular supports building complex applications with reusable components and services, and it also includes features for routing, forms, HTTP requests, and testing. It is widely used for developing large-scale enterprise applications.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

frameworks/react.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/React-icon.svg.png" alt="react">
+        <h1>React - Overview</h1>
+    </div>
+    <p>React is a popular JavaScript library for building user interfaces, primarily for single-page applications. Developed by Facebook, React allows developers to create reusable UI components and manage the state of dynamic applications efficiently. It uses a virtual DOM to improve performance by minimizing direct manipulation of the actual DOM. React is widely used in web development due to its flexibility, scalability, and strong community support.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

frameworks/vue.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/Vue.js_Logo_2.svg.png" alt="vue">
+        <h1>Vue - Overview</h1>
+    </div>
+    <p>Vue.js is a progressive JavaScript framework used for building user interfaces, particularly single-page applications. It is designed to be incrementally adoptable, allowing developers to integrate it into projects gradually. Vue provides a simple and flexible approach to building reactive UIs with features like two-way data binding, component-based architecture, and a virtual DOM for improved performance. Vue is known for its ease of use, clear documentation, and strong community support, making it popular for both small and large-scale web applications.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/c.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/C_Logo.png" alt="c">
+        <h1>C - Overview</h1>
+    </div>
+    <p>C is a general-purpose, procedural programming language developed by Dennis Ritchie in 1972 at Bell Labs. Known for its efficiency and control, C is widely used for system programming, embedded systems, and applications requiring direct hardware interaction. Its simplicity, portability, and extensive use in operating systems like UNIX have made it a foundational language in computer science. C supports structured programming, low-level memory manipulation, and is often used as a base for learning other programming languages.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/cpp.html

@@ -24,7 +24,15 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/C++_logo.png" alt="c++">
+        <h1>C++ - Overview</h1>
+    </div>
+    <p>
+        C++ is a general-purpose, object-oriented programming language developed by Bjarne Stroustrup in 1983. It is an extension of C, adding features like classes, inheritance, and polymorphism. C++ is widely used for system software, game development, high-performance applications, and applications requiring real-time processing due to its efficiency and control over hardware resources.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/cs.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/C++_logo.png" alt="c#">
+        <h1>C# - Overview</h1>
+    </div>
+    <p>C# is a modern, object-oriented programming language developed by Microsoft as part of the .NET framework. Designed for simplicity, scalability, and performance, C# is commonly used for developing Windows applications, web services, and games (using Unity). It combines the power of C++ with the ease of Java, supporting features like garbage collection, type safety, and rich libraries.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/css.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/css-logo.png" alt="css">
+        <h1>CSS - Overview</h1>
+    </div>
+    <p>CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML content. It defines the visual appearance of web pages, including elements like colors, fonts, spacing, and positioning. CSS allows for responsive and aesthetically pleasing designs across various devices and screen sizes.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/html.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/HTML5_logo_and_wordmark.svg.png" alt="html">
+        <h1>HTML - Overview</h1>
+    </div>
+    <p>HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content using elements like headings, paragraphs, links, and images. HTML works with CSS and JavaScript to build modern, interactive websites and is the foundation of web development.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/java.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/java-logo-1.png" alt="java">
+        <h1>Java - Overview</h1>
+    </div>
+    <p>Java is a versatile, object-oriented programming language known for its "Write Once, Run Anywhere" capability. Developed by James Gosling in 1995, it compiles code into platform-independent bytecode that runs on any Java Virtual Machine. Popular for its simplicity, security, and robustness, Java is widely used for enterprise, desktop, web, and mobile applications.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/javascript.html

@@ -24,7 +24,15 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/javascript.png" alt="javascript">
+        <h1>Javascript - Overview</h1>
+    </div>
+    <p>
+        JavaScript is a high-level, dynamic programming language primarily used for creating interactive and dynamic content on websites. It enables functionalities like form validation, animations, and real-time updates without reloading the page. JavaScript runs in the browser and can also be used on the server-side (via Node.js), making it essential for modern web development.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/markdown.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/markdown-icon.webp" alt="markdown">
+        <h1>Markdown - Overview</h1>
+    </div>
+    <p>Markdown is a lightweight markup language used to format plain text. It is designed to be easy to read and write, allowing users to create formatted documents using simple symbols for headings, lists, links, images, and more. Markdown is widely used for writing documentation, README files, and content on platforms like GitHub and blogging websites, as it can be easily converted into HTML for web publishing.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/php.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/php.png" alt="php">
+        <h1>PHP - Overview</h1>
+    </div>
+    <p>PHP is a server-side scripting language primarily used for web development. It is designed to create dynamic and interactive websites by embedding code into HTML. PHP is widely used for building content management systems (CMS) like WordPress, as well as e-commerce sites and web applications. Known for its simplicity, flexibility, and integration with databases like MySQL, PHP is a foundational tool in web development.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/python.html

@@ -24,7 +24,14 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+    <div class="overview">
+        <div class="logo">
+            <img src="../images/python-logo.png" alt="python">
+            <h1>Python - Overview</h1>
+        </div>
+        <p>Python is a versatile, high-level programming language created by Guido van Rossum in 1991. Known for its simplicity and readability, it supports multiple paradigms, including procedural, object-oriented, and functional programming. Python is widely used in web development, data science, AI, and automation, making it one of the most popular languages today.</p>
+    </div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">

languages/ruby.html

@@ -24,7 +24,15 @@
             </div>
         </div>        
     </header>
-
+<!----------------------------Overview---------------------------------------->
+<div class="overview">
+    <div class="logo">
+        <img src="../images/Ruby_logo.png" alt="ruby">
+        <h1>Ruby - Overview</h1>
+    </div>
+    <p>
+        Ruby is an object-oriented, dynamic programming language known for its simplicity and productivity. Created by Yukihiro Matsumoto in the mid-1990s, Ruby emphasizes readability and ease of use. It is widely used for web development, especially with the Ruby on Rails framework, which promotes convention over configuration. Ruby is favored for its elegant syntax and ability to rapidly build scalable applications.</p>
+</div>
 <!----------------------------Main Content---------------------------------------->
 
     <div class="container">