thanapat.t/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
KLxHunter 2024-09-06 14:36:02 +07:00
parent b3a9700bc7
commit 42000b10a9
18 changed files with 73 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build/asset-manifest.json
View File

@ -1,17 +1,17 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.58462fbc.css", "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/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/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/spaceman.png": "/static/media/spaceman.5ec7fcfa9a803ead726c.png",
"static/media/profile-img.png": "/static/media/profile-img.5d5f6af9aa98aaa4efc6.png", "static/media/profile-img.png": "/static/media/profile-img.5d5f6af9aa98aaa4efc6.png",
"index.html": "/index.html", "index.html": "/index.html",
"main.58462fbc.css.map": "/static/css/main.58462fbc.css.map", "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": [ "entrypoints": [
"static/css/main.58462fbc.css", "static/css/main.58462fbc.css",
"static/js/main.01b097bd.js" "static/js/main.3e4ff154.js"
] ]
} }

BIN
build/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

2
build/index.html
View File

@ -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>

1
build/static/js/main.01b097bd.js.map
View File

File diff suppressed because one or more lines are too long

6
build/static/js/main.01b097bd.js → build/static/js/main.3e4ff154.js
View File

File diff suppressed because one or more lines are too long

0
build/static/js/main.01b097bd.js.LICENSE.txt → build/static/js/main.3e4ff154.js.LICENSE.txt
View File

1
build/static/js/main.3e4ff154.js.map Normal file
View File

File diff suppressed because one or more lines are too long

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

4
src/App.js
View File

@ -7,7 +7,7 @@ import GlobalStyle from "./globalStyles";
//Components //Components
import Main from "./components/Main"; import Main from "./components/Main";
import AboutPage from "./components/AboutPage"; import AboutPage from "./components/AboutPage";
import BlogPage from "./components/BlogPage"; import ExperimentationPage from "./components/ExperimentationPage";
import WorkPage from "./components/WorkPage"; import WorkPage from "./components/WorkPage";
import MySkillsPage from "./components/MySkillsPage"; import MySkillsPage from "./components/MySkillsPage";
import SoundBar from "./subComponents/SoundBar"; import SoundBar from "./subComponents/SoundBar";
@ -33,7 +33,7 @@ function App() {
<Route path="/about" element={<AboutPage />} /> <Route path="/about" element={<AboutPage />} />
<Route path="/blog" element={<BlogPage />} /> <Route path="/experimentation" element={<ExperimentationPage />} />
<Route path="/work" element={<WorkPage />} /> <Route path="/work" element={<WorkPage />} />

6
src/components/BlogComponent.js → src/components/ExperimentationComponent.js
View File

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

14
src/components/BlogPage.js → src/components/ExperimentationPage.js
View File

@ -5,8 +5,8 @@ import LogoComponent from '../subComponents/LogoComponent'
import SocialIcons from '../subComponents/SocialIcons' import SocialIcons from '../subComponents/SocialIcons'
import PowerButton from '../subComponents/PowerButton' import PowerButton from '../subComponents/PowerButton'
import {Blogs} from '../data/BlogData'; import {Experimentations} from '../data/ExperimentationData';
import BlogComponent from './BlogComponent' import ExperimentationComponent from './ExperimentationComponent'
import AnchorComponent from '../subComponents/Anchor' import AnchorComponent from '../subComponents/Anchor'
import BigTitle from "../subComponents/BigTitlte" import BigTitle from "../subComponents/BigTitlte"
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
@ -56,7 +56,7 @@ const container = {
} }
const BlogPage = () => { const ExperimentationPage = () => {
const [numbers, setNumbers] = useState(0); const [numbers, setNumbers] = useState(0);
@ -84,17 +84,17 @@ const BlogPage = () => {
<Grid> <Grid>
{ {
Blogs.map(blog => { Experimentations.map(experimentation => {
return <BlogComponent key={blog.id} blog={blog} /> return <ExperimentationComponent key={experimentation.id} experimentation={experimentation} />
}) })
} }
</Grid> </Grid>
</Center> </Center>
<BigTitle text="BLOG" top="5rem" left="5rem" /> <BigTitle text="EXPERIMENTATION" top="5rem" left="5rem" />
</Container> </Container>
</MainContainer> </MainContainer>
) )
} }
export default BlogPage export default ExperimentationPage

8
src/components/Main.js
View File

@ -36,7 +36,7 @@ right: calc(1rem + 2vw);
text-decoration: none; text-decoration: none;
z-index:1; z-index:1;
` `
const BLOG = styled(NavLink)` const EXPERIMENTATION = styled(NavLink)`
color: ${props => props.theme.text}; color: ${props => props.theme.text};
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -162,7 +162,7 @@ const Main = () => {
KLxWorld KLxWorld
</motion.h2> </motion.h2>
</Contact> </Contact>
<BLOG to="/blog"> <EXPERIMENTATION to="/experimentation">
<motion.h2 <motion.h2
initial={{ initial={{
y:-200, y:-200,
@ -175,9 +175,9 @@ const Main = () => {
whileHover={{scale: 1.1}} whileHover={{scale: 1.1}}
whileTap={{scale: 0.9}} whileTap={{scale: 0.9}}
> >
Blog Experimentation
</motion.h2> </motion.h2>
</BLOG> </EXPERIMENTATION>
<WORK to="/work" click={+click}> <WORK to="/work" click={+click}>
<motion.h2 <motion.h2
initial={{ initial={{

4
src/components/MySkillsPage.js
View File

@ -101,13 +101,13 @@ Responsible for automating security testing and vulnerability scanning.
<Description> <Description>
<strong>Skills</strong> <strong>Skills</strong>
<p> <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> </p>
</Description> </Description>
<Description> <Description>
<strong>Tools</strong> <strong>Tools</strong>
<p> <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> </p>
</Description> </Description>

6
src/components/Themes.js
View File

@ -2,7 +2,7 @@
export const lightTheme = { export const lightTheme = {
body:"#FCF6F4", body:"#BEBBD6",
text:"#000000", text:"#000000",
fontFamily:"'Source Sans Pro', sans-serif", fontFamily:"'Source Sans Pro', sans-serif",
bodyRgba : "190, 187, 214", bodyRgba : "190, 187, 214",
@ -12,8 +12,8 @@ export const lightTheme = {
export const DarkTheme = { export const DarkTheme = {
body:"#000000", body:"#000000",
text:"#FCF6F4", text:"#BEBBD6",
fontFamily:"'Source Sans Pro', sans-serif", fontFamily:"'Source Sans Pro', sans-serif",
textRgba : "252, 246, 244", textRgba : "190, 187, 214",
bodyRgba:"0,0,0", bodyRgba:"0,0,0",
} }

2
src/components/WorkPage.js
View File

@ -24,7 +24,7 @@ const Box = styled.div`
const Main = styled(motion.ul)` const Main = styled(motion.ul)`
position: fixed; position: fixed;
top: 12rem; top: 12rem;
left: calc(10rem + 15vw); left: calc(1rem + 15vw);
height: 40vh; height: 40vh;
display: flex; display: flex;

4
src/data/BlogData.js → src/data/ExperimentationData.js
View File

@ -1,6 +1,6 @@
// blog data // experimentation data
export const Blogs = [ export const Experimentations = [
{ {
id:1, id:1,
name:"Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations", name:"Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations",

74
src/data/WorkData.js
View File

@ -3,61 +3,49 @@
export const Work = [ export const Work = [
{ {
id:1, id:1,
name:"Agency Landing Page", name:"DevOps Engineer",
description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.", subname:"#AzureComputer",
tags:["react","gsap","styledComponents"], 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://agency-website-eta.vercel.app/", demo:"https://klxhub.com/",
github:"https://github.com/codebucks27/Agency-website" github:"https://git.klxhub.com"
}, },
{ {
id:2, id:2,
name:"Job listing website", name:"DevSecOps Engineer",
description:"A Job listing website build in ReactJS. With searching and filtering functionalities.", subname:"#Conicle",
tags:["react","sass"], 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:"http://react-job-listing-website.codebucks27.vercel.app/", demo:"https://klxhub.com/",
github:"https://github.com/codebucks27/react-job-listing-website" github:"https://git.klxhub.com"
}, },
{ {
id:3, id:3,
name:"Dev.to Clone", name:"Engineer",
description:"A clone of Dev.to build using ReactJS. With realtime fetching of articles from dev.to using API.", subname:"#Jasmin 3BB",
tags:["react","api","sass"], 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:"http://devto-clone-codebucks27.vercel.app/", demo:"https://klxhub.com/",
github:"https://github.com/codebucks27/devto-clone" github:"https://git.klxhub.com"
}, },
{ {
id:4, id:4,
name:"Sidebar Menu", name:"FullStack Developer",
description:"A cool looking sidebar menu build using ReactJS and styledComponents.It has really smooth animations.", subname:"#Ibusiness Co.,Ltd.",
tags:["react","styledComponents","react-router"], description:"Design and implement project base.",
tags:["html","css","js","jquery","php","laravel","iis"],
demo:"https://react-sidebar.vercel.app/", demo:"https://klxhub.com/",
github:"https://github.com/codebucks27/react-sidebar" github:"https://git.klxhub.com"
},{ },{
id:5, id:5,
name:"Todo App(React + Redux)", name:"Backend Developer",
description:"A todo app build using Redux-toolkit and framer-motion for smooth animations.", subname:"#BRN Enterprise",
tags:["react","redux","framer-motion"], description:"Design and implement golf platform system product base.",
tags:["nginx","pm2","gcp","expressjs","cloudflare"],
demo:"http://react-redux-todo-app-git-main-codebucks27.vercel.app/", demo:"https://klxhub.com/",
github:"https://github.com/codebucks27/React-Redux-Todo-App" github:"https://git.klxhub.com"
}
},
{
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"
},
] ]

12
src/subComponents/Card.js
View File

@ -27,9 +27,14 @@ border: 1px solid ${props => props.theme.text};
} }
` `
const MainTitle = styled.div``
const Title = styled.h2` const Title = styled.h2`
font-size: calc(1em + 0.5vw); font-size: calc(1em + 0.5vw);
` `
const SubTitle = styled.h4`
`
const Description = styled.h2` const Description = styled.h2`
font-size: calc(0.8em + 0.3vw); font-size: calc(0.8em + 0.3vw);
@ -97,11 +102,14 @@ const Item = {
const Card = (props) => { const Card = (props) => {
const {id, name, description, tags, demo, github} = props.data; const {id, name, subname, description, tags, demo, github} = props.data;
return ( return (
<Box key={id} variants={Item}> <Box key={id} variants={Item}>
<Title>{name}</Title> <MainTitle>
<Title>{name}</Title>
<SubTitle>{subname}</SubTitle>
</MainTitle>
<Description> <Description>
{description} {description}
</Description> </Description>