diff --git a/src/App.js b/src/App.js index 892acb7a..446f6f00 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import styled from "styled-components"; import AllEvents from "./Pages/AllEvents/AllEvents"; import { Web } from "./Pages/AllResources/Web"; import { HTML } from "./Pages/AllResources/webALL/html"; +import { DOCKER } from "./Pages/AllResources/devopsALL/docker"; import { CompProg } from "./Pages/AllResources/CompProg"; import { Javascript } from "./Pages/AllResources/webALL/javascript"; import AllTeams from "./Pages/AllTeams/AllTeams"; @@ -46,18 +47,16 @@ function App() { } /> } /> } /> - } /> - } /> } /> } /> } /> - } /> } /> } /> } /> + } /> } /> } /> diff --git a/src/Pages/AllResources/Devops.js b/src/Pages/AllResources/Devops.js index 77049d70..68fb4379 100644 --- a/src/Pages/AllResources/Devops.js +++ b/src/Pages/AllResources/Devops.js @@ -202,7 +202,7 @@ export const DevOps = () => { step diff --git a/src/Pages/AllResources/devopsALL/docker.jsx b/src/Pages/AllResources/devopsALL/docker.jsx new file mode 100644 index 00000000..49e71a2a --- /dev/null +++ b/src/Pages/AllResources/devopsALL/docker.jsx @@ -0,0 +1,227 @@ +import React, { useEffect, useState } from "react"; +import styled from "styled-components"; +import Footer from "../../../components/Footer/Footer"; +import Navbar from "../../../components/Navbar/Navbar"; +import { Link } from "react-router-dom"; + +const Section = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + display: flex; + ${ + "" /* background-color: rgb(9, 9, 121); + background-repeat: no-repeat; + background: linear-gradient( + 262deg, + rgba(9, 9, 121, 1) 0%, + rgba(2, 0, 36, 1) 1% + ); */ + } + background-color: #010116; + ${ + "" /* background-repeat: no-repeat; + background: no-repeat url("./img/bg.jpg"); */ + } +`; + +const Container = styled.div` + scroll-snap-align: center; + width: 1400px; + padding-top: 100px; + @media only screen and (max-width: 768px) { + width: 90vw; + overflow-y: scroll; + flex-direction: column; + + justify-content: space-between; + } +`; + +export const DOCKER = () => { + const [jstopicsChecked, setJsTopicsChecked] = useState({ + syntax: false, + dom: false, + fetch: false, + async: false, + event: false, + promises: false, + classes: false, + array: false, + hoisting: false, + closure: false, + }); + + const handleCheckboxChange = (topic) => { + setJsTopicsChecked({ + ...jstopicsChecked, + [topic]: !jstopicsChecked[topic], + }); + }; + + useEffect(() => { + localStorage.setItem("jstopicsChecked", JSON.stringify(jstopicsChecked)); + }, [jstopicsChecked]); + + useEffect(() => { + const storedTopicsChecked = localStorage.getItem("jstopicsChecked"); + if (storedTopicsChecked) { + setJsTopicsChecked(JSON.parse(storedTopicsChecked)); + } + }, []); + + return ( + <> +
+ + +
+
+ hero +
+

+ DOCKER +

+

+ Docker is a platform that utilizes containers, lightweight and self-contained packages, to develop, package, and run applications consistently across different environments. It comprises components like Docker containers (isolated runtime instances), Docker images (snapshots of containers), a Docker Engine (core management tool), Dockerfiles (instructions for building images), Docker registries (storage and sharing), and Docker Compose (multi-container app management). Docker simplifies deployment, making it popular in DevOps for its consistent, portable, and efficient application management capabilities, although it's worth noting that alternative containerization technologies like Kubernetes and containerd also exist and can be used in conjunction with or instead of Docker, depending on specific needs. Docker's popularity has led to a vast ecosystem of pre-built images and tools that extend its functionality, making it easier to integrate Docker into various development and deployment workflows. It has become a standard tool for many software development and IT operations teams and is widely used in industries ranging from web development to data science. +

+
+
+ {/* <-------------------------------Topics Section ----------------------------------------------> */} +

+ Topics you need to cover: +

+
    + {topics.map((front) => { + return ( +
  • +
    +
    + + handleCheckboxChange(front.storage)} + className="w-4 h-4" + /> +
    +
    +
    • + ); + })} +
+ {/* <-----------------------------------------------RESOURCES SECTION---------------------------------------------------> */} +
+
+
+

+ Resources: +

+
+
    + {resources.map((resource) => { + return ( +
  • +
    + team +
    + +

    + {resource.title} +

    + + +

    {resource.type}

    +
    +
    +
    • + ); + })} +
+
+
+
+ +
+