Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature]Updated-Devops-hero-image-&-created-Docker-Page #176

Merged
merged 2 commits into from
Oct 2, 2023
Merged

[Feature]Updated-Devops-hero-image-&-created-Docker-Page #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a44f969
Updated-Devops-hero-image-&-created-Docker-Page
ghOst-vedant Oct 2, 2023
dde2fce
Merge branch 'master' into master
ghOst-vedant Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -46,18 +47,16 @@ function App() {
<Route path='resources' element={ <Resources /> } />
<Route path='webd' element={<Web /> } />
<Route path='cp' element={<CompProg /> } />

<Route path='dataScience' element={<DataScience /> } />

<Route path='arvr' element={<ARVR/>} />
<Route path='android' element={<Android/>} />
<Route path="flutter" element={<Flutter/>} />
<Route path='aiml' element={<AIML/>} />

<Route path='html' element={ <HTML /> } />
<Route path='js' element={ <Javascript /> } />
<Route path='frontend-framework' element={ <FrontEndFramework /> } />
<Route path='devops' element={ <DevOps /> } />
<Route path='docker' element={<DOCKER/>} />
<Route path='Blockchain' element={ <Blockchain /> } />
<Route path='*' element={ <NotFound /> } />
</Route>
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/AllResources/Devops.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export const DevOps = () => {
</div>
<img
class="lg:w-2/5 md:w-1/2 object-contain object-center rounded-lg md:mt-0 mt-12"
src="https://static.vecteezy.com/system/resources/previews/019/153/003/original/3d-minimal-programming-icon-coding-screen-web-development-concept-laptop-with-a-coding-screen-and-a-coding-icon-3d-illustration-png.png"
src="https://cdni.iconscout.com/illustration/premium/thumb/male-developer-looking-for-devops-7154205-5805807.png?f=webp"
alt="step"
/>
</div>
Expand Down
227 changes: 227 additions & 0 deletions src/Pages/AllResources/devopsALL/docker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<Section>
<Navbar />
<Container>
<section className="text-white body-font">
<div className="mx-auto flex px-2 mt-8 mb-4 items-center justify-center flex-col">
<img
className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-contain object-center rounded"
alt="hero"
src="https://img.freepik.com/free-vector/port-concept-illustration_114360-7335.jpg?w=1480&t=st=1696258059~exp=1696258659~hmac=449086836074036e755fbc9c803c7e04d489da420cab2125f416cc76e1ffbc9f"
/>
<div className="text-center lg:w-full w-full">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
DOCKER
</h1>
<p className="mb-8 leading-relaxed text-justify">
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.
</p>
</div>
</div>
{/* <-------------------------------Topics Section ----------------------------------------------> */}
<h2 className="mb-2 text-lg font-semibold text-white">
Topics you need to cover:
</h2>
<ul className="flex flex-wrap m-2">
{topics.map((front) => {
return (
<li className="p-2 lg:w-max md:w-1/2" key={front.title}>
<div className="h-full flex items-center border-gray-200 border px-4 py-2 rounded-lg hover:scale-105 transition-all">
<div className="flex items-center gap-3">
<label htmlFor={front.storage} className="text-white title-font font-bold text-xl cursor-pointer">{front.title}</label>
<input
type="checkbox"
id={front.storage}
checked={jstopicsChecked[front.storage]}
onChange={() => handleCheckboxChange(front.storage)}
className="w-4 h-4"
/>
</div>
</div>
</li>
);
})}
</ul>
{/* <-----------------------------------------------RESOURCES SECTION---------------------------------------------------> */}
<section className="text-white body-font">
<div className=" px-0 py-14 mx-auto">
<div className="flex flex-col text-left w-full mb-2">
<h1 className="text-xl font-bold title-font mb-4 text-white-900 tracking-widest">
Resources:
</h1>
</div>
<ul className="grid lg:grid-cols-2 grid-cols-1 gap-4">
{resources.map((resource) => {
return (
<li className="lg:w-full bg-black/20 p-4 rounded-xl hover:scale-[102%] transition-all duration-200 ease-in-out" key={resource.title}>
<div className="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img
alt="team"
className="flex-shrink-0 rounded-lg w-48 h-48 object-contain sm:mb-0 mb-4"
src={resource.image}
/>
<div className="text-left flex-grow sm:pl-8">
<Link to={resource.link} target={"_blank"}>
<h2 className="title-font font-medium text-xl pb-1 text-white underline underline-offset-2">
{resource.title}
</h2>
</Link>

<h3 className="text-white mb-3">{resource.type}</h3>
</div>
</div>
</li>
);
})}
</ul>
</div>
</section>
</section>
</Container>
</Section>
<Footer />
</>
);
};

const resources = [
{
title: "DOCKER - Docs",
image: "https://hsf-training.github.io/hsf-training-docker/fig/Docker_logo.png",
type: "Documentation",
link: "https://docs.docker.com/",
},
{
title: "DockerLabs - Getting Started with Docker",
image: "https://raw.githubusercontent.com/collabnix/dockerlabs/master/images/dockerlabs.jpeg",
type: "Documentation",
link: "https://dockerlabs.collabnix.com/",
},
{
title: "DOCKER in 100 seconds",
image: "https://i.ytimg.com/vi/Gjnup-PuquQ/maxresdefault.jpg",
type: "Youtube video",
link: "https://www.youtube.com/watch?v=Gjnup-PuquQ",
},
{
title: "Docker Tutorial for Beginners",
image: "https://i.ytimg.com/vi/pTFZFxd4hOI/maxresdefault.jpg",
type: "Youtube video",
link: "https://www.youtube.com/watch?v=pTFZFxd4hOI",
},
{
title: "DOCKER - Cheat Sheet",
image: "https://user-images.githubusercontent.com/313480/210130087-62a755f7-499c-4f5a-a91c-9151ac82417e.png",
type: "Cheat Sheet",
link: "https://dockerlabs.collabnix.com/docker/cheatsheet/",
},
{
title: "The DOCKER Handbook",
image: "https://www.freecodecamp.org/news/content/images/2020/07/docker-handbook-preview.png",
type: "Documentation",
link: "https://www.freecodecamp.org/news/the-docker-handbook/",
},
{
title: "Introduction to Docker",
image: "https://res.cloudinary.com/practicaldev/image/fetch/s--sA57fKnT--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/i/a0gvmzph343m9wvjys6h.png",
type: "Youtube video",
link: "https://www.youtube.com/watch?v=3c-iBn73dDE",
},
{
title: "Docker for the Absolute Beginner - Hands On - DevOps",
image: "https://img-c.udemycdn.com/course/750x422/3490000_d298_2.jpg",
type: "Course",
link: "https://www.udemy.com/course/learn-docker/",
},
];

const topics = [
{ title: "Introduction to Containers", storage: "introduction-to-containers" },
{ title: "Docker Architecture", storage: "docker-architecture" },
{ title: "Docker Installation", storage: "install-docker" },
{ title: "Docker Images", storage: "docker-images" },
{ title: "Docker Containers", storage: "docker-containers" },
{ title: "Docker Compose", storage: "docekr-compose" },
{ title: "Container Orchestration", storage: "container-orchestration" },
{ title: "Docker Networking", storage: "docker-networking" },
{ title: "Docker Volumes and Storage", storage: "docker-volume-storage" },
{ title: "Docker Security", storage: "docker-security" },
{ title: "Docker Registry and Repository", storage: "docker-registry-repository" },
{ title: "Docker in CI/CD", storage: "docker-ci-cd" },
{ title: "Monitoring and Logging", storage: "docker-monitor-log" },
{ title: "Scaling and Load Balancing", storage: "docker-scale-load-balance" },
];
Loading