/* ----- Third Party Imports ----- */
import { Link } from "react-router-dom";

/* ----- Project Imports ----- */
import "@/styles/details.css";

function Details() {
  return (
    <article className="detailsContainer">
      <section className="detailsSocialLinksContainer">
        <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
      </section>
      <section className="detailsTextContainer">
        <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
        <div className="detailsTextInnerContainer"><p className="detailsComment">Full Stack Developer</p></div>
        <div className="detailsInfoLinksContainer">
          <Link to="/expertise" className="detailsInfoLinks" >Expertise</Link>
          <Link to="/projects" className="detailsInfoLinks" >Projects</Link>
        </div>
      </section>
      <section className="detailsSocialLinksContainer">
        <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
      </section>
    </article>
  );
};

export default Details;

