update

2024-09-06 14:36:02 +07:00 · 2024-09-06 14:36:02 +07:00 · 42000b10a9
commit 42000b10a9
parent b3a9700bc7
18 changed files with 73 additions and 77 deletions
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@ -1,17 +1,17 @@
 {
  "files": {
    "main.css": "/static/css/main.58462fbc.css",
-    "main.js": "/static/js/main.01b097bd.js",
+    "main.js": "/static/js/main.3e4ff154.js",
    "static/media/u-said-it-v13-1167.mp3": "/static/media/u-said-it-v13-1167.becd66496be9c81ddf9d.mp3",
    "static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg": "/static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.8ca90014fb6ce5980110.jpg",
    "static/media/spaceman.png": "/static/media/spaceman.5ec7fcfa9a803ead726c.png",
    "static/media/profile-img.png": "/static/media/profile-img.5d5f6af9aa98aaa4efc6.png",
    "index.html": "/index.html",
    "main.58462fbc.css.map": "/static/css/main.58462fbc.css.map",
-    "main.01b097bd.js.map": "/static/js/main.01b097bd.js.map"
+    "main.3e4ff154.js.map": "/static/js/main.3e4ff154.js.map"
  },
  "entrypoints": [
    "static/css/main.58462fbc.css",
-    "static/js/main.01b097bd.js"
+    "static/js/main.3e4ff154.js"
  ]
 }
--- a/build/favicon.ico
+++ b/build/favicon.ico
--- a/build/index.html
+++ b/build/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"/><title>Thanapat Portfolio DevSecOps</title><script defer="defer" src="/static/js/main.01b097bd.js"></script><link href="/static/css/main.58462fbc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"/><title>Thanapat Portfolio DevSecOps</title><script defer="defer" src="/static/js/main.3e4ff154.js"></script><link href="/static/css/main.58462fbc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/build/static/js/main.01b097bd.js.map
+++ b/build/static/js/main.01b097bd.js.map
--- a/build/static/js/main.3e4ff154.js
+++ b/build/static/js/main.3e4ff154.js
--- a/build/static/js/main.3e4ff154.js.LICENSE.txt
+++ b/build/static/js/main.3e4ff154.js.LICENSE.txt
--- a/build/static/js/main.3e4ff154.js.map
+++ b/build/static/js/main.3e4ff154.js.map
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.js
+++ b/src/App.js
@ -7,7 +7,7 @@ import GlobalStyle from "./globalStyles";
 //Components
 import Main from "./components/Main";
 import AboutPage from "./components/AboutPage";
-import BlogPage from "./components/BlogPage";
+import ExperimentationPage from "./components/ExperimentationPage";
 import WorkPage from "./components/WorkPage";
 import MySkillsPage from "./components/MySkillsPage";
 import SoundBar from "./subComponents/SoundBar";
@ -33,7 +33,7 @@ function App() {

            <Route path="/about" element={<AboutPage />} />

-            <Route path="/blog" element={<BlogPage />} />
+            <Route path="/experimentation" element={<ExperimentationPage />} />

            <Route path="/work" element={<WorkPage />} />

--- a/src/components/ExperimentationComponent.js
+++ b/src/components/ExperimentationComponent.js
@ -75,8 +75,8 @@ const Item = {
  },
 };

-const BlogComponent = (props) => {
-  const { name, tags, date, imgSrc, link } = props.blog;
+const ExperimentationComponent = (props) => {
+  const { name, tags, date, imgSrc, link } = props.experimentation;
  return (
    <Container variants={Item}>
      <Box target="_blank" href={`${link}`}>
@ -93,4 +93,4 @@ const BlogComponent = (props) => {
  );
 };

-export default BlogComponent;
+export default ExperimentationComponent;
--- a/src/components/ExperimentationPage.js
+++ b/src/components/ExperimentationPage.js
@ -5,8 +5,8 @@ import LogoComponent from '../subComponents/LogoComponent'
 import SocialIcons  from '../subComponents/SocialIcons'
 import PowerButton  from '../subComponents/PowerButton'

-import {Blogs} from '../data/BlogData';
-import BlogComponent from './BlogComponent'
+import {Experimentations} from '../data/ExperimentationData';
+import ExperimentationComponent from './ExperimentationComponent'
 import AnchorComponent from '../subComponents/Anchor'
 import BigTitle from "../subComponents/BigTitlte"
 import { motion } from 'framer-motion'
@ -56,7 +56,7 @@ const container = {
  
  }

-const BlogPage = () => {
+const ExperimentationPage = () => {

    const [numbers, setNumbers] = useState(0);

@ -84,17 +84,17 @@ const BlogPage = () => {
 <Grid>

 {
-    Blogs.map(blog => {
-        return <BlogComponent key={blog.id} blog={blog} />
+    Experimentations.map(experimentation => {
+        return <ExperimentationComponent key={experimentation.id} experimentation={experimentation} />
    })
 }
 </Grid>

 </Center>
-<BigTitle text="BLOG" top="5rem" left="5rem" />
+<BigTitle text="EXPERIMENTATION" top="5rem" left="5rem" />
            </Container>
        </MainContainer>
    )
 }

-export default BlogPage
+export default ExperimentationPage
--- a/src/components/Main.js
+++ b/src/components/Main.js
@ -36,7 +36,7 @@ right: calc(1rem + 2vw);
 text-decoration: none;
 z-index:1;
 `
-const BLOG = styled(NavLink)`
+const EXPERIMENTATION = styled(NavLink)`
 color: ${props => props.theme.text};
 position: absolute;
 top: 50%;
@ -162,7 +162,7 @@ const Main = () => {
                    KLxWorld
                </motion.h2>
            </Contact>
-            <BLOG to="/blog">
+            <EXPERIMENTATION to="/experimentation">
                <motion.h2
                initial={{
                    y:-200,
@ -175,9 +175,9 @@ const Main = () => {
                whileHover={{scale: 1.1}}
                whileTap={{scale: 0.9}}
                >
-                    Blog
+                    Experimentation
                </motion.h2>
-            </BLOG>
+            </EXPERIMENTATION>
            <WORK to="/work" click={+click}>
                <motion.h2
                initial={{
--- a/src/components/MySkillsPage.js
+++ b/src/components/MySkillsPage.js
@ -101,13 +101,13 @@ Responsible for automating security testing and vulnerability scanning.
 <Description>
 <strong>Skills</strong>
 <p>
-    K8s, Docker, Bash, CICD, Iptables, Git, LDAP, Monitoring, Observability, Security, Network, Loadbalancer
+    K8s, Docker, Bash, CICD, Iptables, Git, LDAP, Radius, Monitoring, Observability, Security, Network, Loadbalancer, Cloudflare
 </p>
 </Description>
 <Description>
 <strong>Tools</strong>
 <p>
-K3s, Kustomize/Helm, K8s provider AWS DO, Nginx, Treafik, Kong, Openresty, ELK, Terraform, Ansible, Rancher, Proxmox, Fail2ban, DroneCI, RabbitMQ, Pihole, FreeIPA, PFsense, Vaultwarden, Hashicorp Vault, Mailcow, OpenVPN Server, ArgoCD, Sentry, Grafana/Prometheus
+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
 </p>
 </Description>

--- a/src/components/Themes.js
+++ b/src/components/Themes.js
@ -2,7 +2,7 @@

 export const lightTheme = {

-    body:"#FCF6F4",
+    body:"#BEBBD6",
    text:"#000000",
    fontFamily:"'Source Sans Pro', sans-serif",
    bodyRgba : "190, 187, 214",
@ -12,8 +12,8 @@ export const lightTheme = {
 export const DarkTheme = {

    body:"#000000",
-    text:"#FCF6F4",
+    text:"#BEBBD6",
    fontFamily:"'Source Sans Pro', sans-serif",
-    textRgba : "252, 246, 244",
+    textRgba : "190, 187, 214",
    bodyRgba:"0,0,0",
 }
--- a/src/components/WorkPage.js
+++ b/src/components/WorkPage.js
@ -24,7 +24,7 @@ const Box = styled.div`
 const Main = styled(motion.ul)`
  position: fixed;
  top: 12rem;
-  left: calc(10rem + 15vw);
+  left: calc(1rem + 15vw);
  height: 40vh;
  display: flex;

--- a/src/data/ExperimentationData.js
+++ b/src/data/ExperimentationData.js
@ -1,6 +1,6 @@
-// blog data
+// experimentation data

-export const Blogs = [
+export const Experimentations = [
    {
        id:1,
        name:"Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations",
--- a/src/data/WorkData.js
+++ b/src/data/WorkData.js
@ -3,61 +3,49 @@
 export const Work = [
    {
        id:1,
-        name:"Agency Landing Page",
-        description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.",
-        tags:["react","gsap","styledComponents"],
-        
-        demo:"https://agency-website-eta.vercel.app/",
-        github:"https://github.com/codebucks27/Agency-website"
+        name:"DevOps Engineer",
+        subname:"#AzureComputer",
+        description:"Build and configure delivery environments supporting CD/CI tools using an Agile delivery methodology.",
+        tags:["k8s","docker","rancher","harbor","jenkins","monitoring","bash script","sonarqube","elk"],
+        demo:"https://klxhub.com/",
+        github:"https://git.klxhub.com"
    },
    {
        id:2,
-        name:"Job listing website",
-        description:"A Job listing website build in ReactJS. With searching and filtering functionalities.",
-        tags:["react","sass"],
-        
-        demo:"http://react-job-listing-website.codebucks27.vercel.app/",
-        github:"https://github.com/codebucks27/react-job-listing-website"
+        name:"DevSecOps Engineer",
+        subname:"#Conicle",
+        description:"Ensure compliance with operational risk standard ( Network,Firewall,Logging,Monitoring ).",
+        tags:["k8s","docker","racher","aws","digitalocean","argocd","fail2ban","iptables","freeipa","openvpn","vault","kustomize","helm","ansible","terraform","openvpn","elk","cloudflare","linux"],
+        demo:"https://klxhub.com/",
+        github:"https://git.klxhub.com"
        
    },
    {
        id:3,
-        name:"Dev.to Clone",
-        description:"A clone of Dev.to build using ReactJS. With realtime fetching of articles from dev.to using API.",
-        tags:["react","api","sass"],
-        
-        demo:"http://devto-clone-codebucks27.vercel.app/",
-        github:"https://github.com/codebucks27/devto-clone"
+        name:"Engineer",
+        subname:"#Jasmin 3BB",
+        description:"Monitor,maintenance and install physical server in datacenter.",
+        tags:["html","js","php","radius","pfsense","cacti","datacenter","linux","oracle","iptables","esxi","proxmox","f5","k3d","swarm"],
+        demo:"https://klxhub.com/",
+        github:"https://git.klxhub.com"
    },
    {
        id:4,
-        name:"Sidebar Menu",
-        description:"A cool looking sidebar menu build using ReactJS and styledComponents.It has really smooth animations.",
-        tags:["react","styledComponents","react-router"],
-        
-        demo:"https://react-sidebar.vercel.app/",
-        github:"https://github.com/codebucks27/react-sidebar"
-       
+        name:"FullStack Developer",
+        subname:"#Ibusiness Co.,Ltd.",
+        description:"Design and implement project base.",
+        tags:["html","css","js","jquery","php","laravel","iis"],
+        demo:"https://klxhub.com/",
+        github:"https://git.klxhub.com"
    },{
        id:5,
-        name:"Todo App(React + Redux)",
-        description:"A todo app build using Redux-toolkit and framer-motion for smooth animations.",
-        tags:["react","redux","framer-motion"],
-        
-        demo:"http://react-redux-todo-app-git-main-codebucks27.vercel.app/",
-        github:"https://github.com/codebucks27/React-Redux-Todo-App"
-        
-    },
-    {
-        id:6,
-        name:"Responsive Navigation Menu",
-        description:"A reponsive navbar menu component in ReactJS with react-router functionalities. Built from scratch.",
-        tags:["react","react-router","css"],
-        
-        demo:"http://react-responsive-navbar-codebucks27.vercel.app/",
-        github:"https://github.com/codebucks27/React-responsive-navbar"
-        
-    },
+        name:"Backend Developer",
+        subname:"#BRN Enterprise",
+        description:"Design and implement golf platform system product base.",
+        tags:["nginx","pm2","gcp","expressjs","cloudflare"],
+        demo:"https://klxhub.com/",
+        github:"https://git.klxhub.com"    
+    }
    
  
 ] 
--- a/src/subComponents/Card.js
+++ b/src/subComponents/Card.js
@ -27,9 +27,14 @@ border: 1px solid ${props => props.theme.text};

 }
 `
+
+const MainTitle = styled.div``
+
 const Title = styled.h2`
 font-size: calc(1em + 0.5vw);
 `
+const SubTitle = styled.h4`
+`

 const Description = styled.h2`
 font-size: calc(0.8em + 0.3vw);
@ -97,11 +102,14 @@ const Item = {

 const Card = (props) => {

-    const {id, name, description, tags, demo, github} = props.data;
+    const {id, name, subname, description, tags, demo, github} = props.data;

    return (
        <Box key={id} variants={Item}>
+            <MainTitle>
                <Title>{name}</Title>
+                <SubTitle>{subname}</SubTitle>
+            </MainTitle>
            <Description>
                {description}
            </Description>