taqi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: add current workplace and update skills

Browse Source
This commit is contained in:
Taqi Tahmid
2024-11-02 09:13:27 +02:00
parent 95ef362131
commit 731d943997
5 changed files with 71 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/components/Skills.tsx
View File

@ -1,44 +1,45 @@
import pythonIcon from "../assets/python.svg"
import bashIcon from "../assets/bash-icon.svg"
import goIcon from "../assets/go-original.svg"
import reactIcon from "../assets/react.svg"
import ansibleIcon from "../assets/ansible.svg"
import terraformIcon from "../assets/terraform-icon.svg"
import jenkinsIcon from "../assets/jenkins.svg"
import gitIcon from "../assets/git-icon.svg"
import dockerIcon from "../assets/docker-icon.svg"
import kubernetesIcon from "../assets/kubernetes.svg"
import prometheusIcon from "../assets/prometheus.svg"
import grafanaIcon from "../assets/grafana.svg"
import pythonIcon from "../assets/python.svg";
import robotIcon from "../assets/robotframework-svgrepo-com.svg";
import goIcon from "../assets/go-original.svg";
import reactIcon from "../assets/react.svg";
import ansibleIcon from "../assets/ansible.svg";
import terraformIcon from "../assets/terraform-icon.svg";
import jenkinsIcon from "../assets/jenkins.svg";
import gitIcon from "../assets/git-icon.svg";
import dockerIcon from "../assets/docker-icon.svg";
import kubernetesIcon from "../assets/kubernetes.svg";
import prometheusIcon from "../assets/prometheus.svg";
import grafanaIcon from "../assets/grafana.svg";
const Skills = () => {
const skills = [
{ name: 'Python', icon: pythonIcon},
{ name: 'Golang', icon: goIcon },
{ name: 'React', icon: reactIcon },
{ name: 'Bash', icon: bashIcon},
{ name: 'Ansible', icon: ansibleIcon},
{ name: 'Terraform', icon: terraformIcon },
{ name: 'Jenkins', icon: jenkinsIcon},
{ name: 'Git', icon: gitIcon},
{ name: 'Docker', icon: dockerIcon },
{ name: 'Kubernetes', icon: kubernetesIcon},
{ name: 'Prometheus', icon: prometheusIcon},
{ name: 'Grafana', icon: grafanaIcon},
{ name: "Python", icon: pythonIcon },
{ name: "Golang", icon: goIcon },
{ name: "React", icon: reactIcon },
{ name: "Robot Framework", icon: robotIcon },
{ name: "Ansible", icon: ansibleIcon },
{ name: "Terraform", icon: terraformIcon },
{ name: "Jenkins", icon: jenkinsIcon },
{ name: "Git", icon: gitIcon },
{ name: "Docker", icon: dockerIcon },
{ name: "Kubernetes", icon: kubernetesIcon },
{ name: "Prometheus", icon: prometheusIcon },
{ name: "Grafana", icon: grafanaIcon },
];
return (
<div>
<h1 className="text-2xl py-5 font-burtons dark:text-blue-200">Tools and Languages</h1>
<div className="grid grid-cols-4 gap-6 text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
<h1 className="text-2xl py-5 font-burtons dark:text-blue-200">
Tools and Languages
</h1>
<div className="grid grid-cols-4 gap-6 text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
{skills.map((skill) => (
<div key={skill.name} className="flex flex-col items-center">
<img src={skill.icon} alt={skill.name} className="h-10 w-10" />
<p className="mt-2 text-center">{skill.name}</p>
</div>
<div key={skill.name} className="flex flex-col items-center">
<img src={skill.icon} alt={skill.name} className="h-10 w-10" />
<p className="mt-2 text-center">{skill.name}</p>
</div>
))}
</div>
</div>
</div>
);
};