159 lines
3.5 KiB
JavaScript
159 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import styled, { ThemeProvider } from 'styled-components'
|
|
import {lightTheme} from './Themes';
|
|
import { Design, Develope} from './AllSvgs';
|
|
|
|
|
|
import LogoComponent from '../subComponents/LogoComponent';
|
|
import SocialIcons from '../subComponents/SocialIcons';
|
|
import PowerButton from '../subComponents/PowerButton';
|
|
import ParticleComponent from '../subComponents/ParticleComponent';
|
|
import BigTitle from '../subComponents/BigTitlte'
|
|
|
|
//Google Analytic
|
|
import ReactGA from 'react-ga4'
|
|
|
|
const Box = styled.div`
|
|
background-color: ${props => props.theme.body};
|
|
width: 100vw;
|
|
height:100vh;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
`
|
|
|
|
const Main = styled.div`
|
|
border: 2px solid ${props => props.theme.text};
|
|
color: ${props => props.theme.text};
|
|
background-color: ${props => props.theme.body};
|
|
padding: 1rem;
|
|
width: 34vw;
|
|
height: 60vh;
|
|
z-index:3;
|
|
line-height: 1.3;
|
|
cursor: pointer;
|
|
|
|
font-family: 'Ubuntu Mono',monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
&:hover{
|
|
color: ${props => props.theme.body};
|
|
background-color: ${props => props.theme.text};
|
|
}
|
|
`
|
|
|
|
const Title = styled.h2`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: calc(1em + 1vw);
|
|
|
|
${Main}:hover &{
|
|
&>*{
|
|
fill:${props => props.theme.body};
|
|
}
|
|
}
|
|
|
|
&>*:first-child{
|
|
margin-right: 1rem;
|
|
}
|
|
`
|
|
|
|
const Description = styled.div`
|
|
color: ${props => props.theme.text};
|
|
font-size: calc(0.6em + 1vw);
|
|
padding: 0.5rem 0;
|
|
overflow: auto;
|
|
|
|
|
|
${Main}:hover &{
|
|
|
|
color:${props => props.theme.body};
|
|
|
|
}
|
|
|
|
strong{
|
|
margin-bottom: 1rem;
|
|
text-transform: uppercase;
|
|
}
|
|
ul,p{
|
|
margin-left: 2rem;
|
|
}
|
|
`
|
|
|
|
const Tools = styled.p`
|
|
height: 18vh;
|
|
overflow-x: hidden;
|
|
`
|
|
|
|
const MySkillsPage = () => {
|
|
ReactGA.send({
|
|
hitType: "skillsview",
|
|
page: "/skills",
|
|
title: "MySkills"
|
|
})
|
|
return (
|
|
<ThemeProvider theme={lightTheme}>
|
|
<Box>
|
|
|
|
<LogoComponent theme='light'/>
|
|
<SocialIcons theme='light'/>
|
|
<PowerButton />
|
|
<ParticleComponent theme='light' />
|
|
<Main>
|
|
<Title>
|
|
<Develope width={40} height={40} /> DevSecOps
|
|
</Title>
|
|
<Description>
|
|
Responsible for automating security testing and vulnerability scanning.
|
|
</Description>
|
|
<Description>
|
|
<strong>Skills</strong>
|
|
<p>
|
|
K8s, Docker, Bash, CICD, Iptables, Git, LDAP, Radius, Monitoring, Observability, Security, Network, Loadbalancer, Cloudflare
|
|
</p>
|
|
</Description>
|
|
<Description>
|
|
<strong>Tools</strong>
|
|
<Tools>
|
|
K3s, Kustomize/Helm, AWS, GCP, DO, Nginx, Apache, IIS, Treafik, Kong, Openresty, ELK, Filebeat, Terraform, Ansible, Rancher, ESXI, Proxmox, Fail2ban, DroneCI, JenkinsCI, RabbitMQ, Pihole, FreeIPA, PFsense, Vaultwarden, Hashicorp Vault, Mailcow, OpenVPN Server, ArgoCD, Sentry, Grafana/Prometheus, Istio, Harbor, Kuma Monitor, N8N, Sonarqube
|
|
</Tools>
|
|
</Description>
|
|
|
|
</Main>
|
|
<Main>
|
|
<Title>
|
|
<Develope width={40} height={40} /> Fullstack Developer
|
|
</Title>
|
|
<Description>
|
|
I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life.
|
|
</Description>
|
|
<Description>
|
|
<strong>Skills</strong>
|
|
<p>
|
|
Html, Css, Js, Bootstrap, ExpressJS, Jquery, Php, Laravel, S3, Database etc.
|
|
</p>
|
|
</Description>
|
|
<Description>
|
|
<strong>Tools</strong>
|
|
<Tools>
|
|
VScode, Github, Gitlab, Gitea, Bitbucket, MySQL, MariaDB, PostgreSQL, MSSQL, MongoDB, Redis etc.
|
|
</Tools>
|
|
</Description>
|
|
|
|
</Main>
|
|
|
|
<BigTitle text="SKILLS" top="80%" right="30%" />
|
|
|
|
</Box>
|
|
|
|
</ThemeProvider>
|
|
|
|
)
|
|
}
|
|
|
|
export default MySkillsPage
|