Skip to content

Commit bc09f63

Browse files
TbuskTbusk
authored
feat: add and populate skills component (#12)
This PR adds: - Skill component - Skills component and populates it - Updates navbar to show large navbar items on `md` breakpoint rather than `sm` to make space for new items
2 parents 74e9ad4 + 35ed650 commit bc09f63

4 files changed

Lines changed: 121 additions & 2 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Footer from "./components/common/Footer.tsx";
66
import Experience from "./components/experience/Experience.tsx";
77
import OpenSourceContributions from "./components/open_source/OpenSourceContributions.tsx";
88
import Header from "./components/common/Header.tsx";
9+
import Skills from "./components/skills/Skills.tsx";
910

1011
export function App() {
1112

@@ -14,6 +15,7 @@ export function App() {
1415
<Header />
1516
<Homepage />
1617
<Experience />
18+
<Skills />
1719
<Education />
1820
<Projects />
1921
<OpenSourceContributions />

‎src/components/common/Header.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Header() {
1414
<div>
1515

1616
{/* Non-Mobile */}
17-
<ul className="gap-8 justify-center hidden sm:flex py-8">
17+
<ul className="gap-8 justify-center hidden md:flex py-8">
1818
<li className={navbarItemStyle}>
1919
<a href="#home">
2020
Home
@@ -25,6 +25,11 @@ export default function Header() {
2525
Experience
2626
</a>
2727
</li>
28+
<li className={navbarItemStyle}>
29+
<a href="#skills">
30+
Skills
31+
</a>
32+
</li>
2833
<li className={navbarItemStyle}>
2934
<a href="#education">
3035
Education
@@ -43,7 +48,7 @@ export default function Header() {
4348
</ul>
4449

4550
{/* Mobile */}
46-
<div className="sm:hidden flex fixed w-full h-full justify-end">
51+
<div className="md:hidden flex fixed w-full h-full justify-end">
4752
<div className="fixed pr-4 pt-2">
4853
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="bg-white p-2 rounded-full border-2 border-gray-100">
4954
<img src={hamburgerIcon} alt="Hamburger Icon" height={28}
@@ -67,6 +72,11 @@ export default function Header() {
6772
Experience
6873
</a>
6974
</li>
75+
<li className={navbarItemStyleMobile}>
76+
<a href="#skills" onClick={() => setIsMenuOpen(false)}>
77+
Skills
78+
</a>
79+
</li>
7080
<li className={navbarItemStyleMobile}>
7181
<a href="#education" onClick={() => setIsMenuOpen(false)}>
7282
Education

‎src/components/skills/Skill.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
interface SkillProps {
2+
name: string;
3+
}
4+
5+
export default function Skill(props: SkillProps) {
6+
return (
7+
<>
8+
<div className="border rounded-2xl py-1 px-3 text-md md:text-md">
9+
{props.name}
10+
</div>
11+
</>
12+
);
13+
}

‎src/components/skills/Skills.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Skill from "./Skill.tsx";
2+
3+
export default function Skills() {
4+
return (
5+
<>
6+
<div className="pb-8">
7+
<div className="text-3xl md:text-6xl py-1 md:py-4 px-2 md:px-0" id="skills">
8+
Skills
9+
</div>
10+
11+
<div className="text-xl px-2 md:px-0 font-bold">
12+
Frameworks
13+
</div>
14+
15+
<div className="flex flex-wrap gap-2 py-4 px-2 md:px-0">
16+
<Skill name="React" />
17+
<Skill name="Preact" />
18+
<Skill name="Spring" />
19+
<Skill name="Spring Boot" />
20+
<Skill name="Hibernate" />
21+
<Skill name="Apache Freemarker" />
22+
<Skill name="Tailwind CSS" />
23+
<Skill name="Bootstrap" />
24+
<Skill name="VitePress" />
25+
<Skill name="PayloadCMS" />
26+
</div>
27+
28+
<div className="text-xl px-2 md:px-0 font-bold">
29+
Languages
30+
</div>
31+
32+
<div className="flex flex-wrap gap-2 py-4 px-2 md:px-0">
33+
<Skill name="Java" />
34+
<Skill name="TypeScript" />
35+
<Skill name="JavaScript" />
36+
<Skill name="Python" />
37+
<Skill name="Vala" />
38+
<Skill name="HTML" />
39+
<Skill name="CSS" />
40+
<Skill name="Markdown" />
41+
</div>
42+
43+
<div className="text-xl px-2 md:px-0 font-bold">
44+
Databases
45+
</div>
46+
47+
<div className="flex flex-wrap gap-2 py-4 px-2 md:px-0">
48+
<Skill name="MariaDB" />
49+
<Skill name="MS SQL Server" />
50+
<Skill name="PostgreSQL" />
51+
</div>
52+
53+
<div className="text-xl px-2 md:px-0 font-bold">
54+
Tooling
55+
</div>
56+
57+
<div className="flex flex-wrap gap-2 py-4 px-2 md:px-0">
58+
<Skill name="GitHub" />
59+
<Skill name="GitHub Actions" />
60+
<Skill name="GitHub Projects" />
61+
<Skill name="Docker" />
62+
<Skill name="Docker Compose" />
63+
<Skill name="Dockerfile" />
64+
<Skill name="Git" />
65+
<Skill name="GitLab" />
66+
<Skill name="BitBucket" />
67+
<Skill name="Confluence" />
68+
69+
</div>
70+
71+
<div className="text-xl px-2 md:px-0 font-bold">
72+
Deployments
73+
</div>
74+
75+
<div className="flex flex-wrap gap-2 py-4 px-2 md:px-0">
76+
<Skill name="Hetzner" />
77+
<Skill name="On Site" />
78+
<Skill name="Google Cloud" />
79+
<Skill name="AWS" />
80+
<Skill name="GitHub Pages" />
81+
</div>
82+
83+
<div className="text-xl px-2 md:px-0 font-bold">
84+
Environments
85+
</div>
86+
87+
<div className="flex flex-wrap gap-2 pt-4 px-2 md:px-0">
88+
<Skill name="Linux" />
89+
<Skill name="Windows" />
90+
</div>
91+
</div>
92+
</>
93+
);
94+
}

0 commit comments

Comments
 (0)