diff --git a/src/components/AboutMeEntry.tsx b/src/components/AboutMeEntry.tsx new file mode 100644 index 0000000..dc30448 --- /dev/null +++ b/src/components/AboutMeEntry.tsx @@ -0,0 +1,26 @@ +import React, {FunctionComponent} from "react"; + +type Props = { + title: string + url: string + description: string +} + +export const AboutMeEntry: FunctionComponent<Props> = (props: Props) => { + return ( + <div className="feature col"> + <a href={props.url}> + <div + className="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> + <i className="bi bi-github"></i> + </div> + </a> + <div className="feature col align-items-center justify-content-center"> + <h3 className="fs-2 text-body-emphasis">{props.title}</h3> + </div> + <p> + {props.description} + </p> + </div> + ) +} diff --git a/src/components/Github.tsx b/src/components/Github.tsx new file mode 100644 index 0000000..077726f --- /dev/null +++ b/src/components/Github.tsx @@ -0,0 +1,11 @@ +import {AboutMeEntry} from "@/components/AboutMeEntry"; +import {FunctionComponent} from "react"; + + +export const Github: FunctionComponent<any> = () => { + return <AboutMeEntry + url="https://github.com/pgrondek" + title="Github" + description="My main public git repository" + /> +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8f1d5f7..cd05754 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,5 @@ import 'bootstrap/dist/css/bootstrap.css' +import {Github} from "@/components/Github"; export default function Home() { return ( @@ -6,29 +7,9 @@ export default function Home() { <div className="container"> <h2 className="pb-2 border-bottom">My stuff</h2> <div className="row g-4 py-5 row-cols-1 row-cols-lg-3"> - <div className="feature col"> - <a href="https://github.com/pgrondek"> - <div - className="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> - <i className="bi bi-github"></i> - </div> - </a> - <div className="feature col align-items-center justify-content-center"> - <h3 className="fs-2 text-body-emphasis">Github</h3> - </div> - <p> - My main public git repositories with notable repos: - <ul> - <li><a href="https://github.com/pgrondek/ansible">ansible</a> - playbook for my homelab</li> - <li><a href="https://github.com/pgrondek/Prusa-Firmware">Prusa-Firmware</a> - slightly modified firmware for my 3d printer</li> - <li><a href="https://github.com/pgrondek/dwm">dwm</a> - my customized version of dwm</li> - </ul> - </p> - - </div> + <Github/> </div> </div> - </main> ) }