Paulus/paulus.casa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some better styling for front section

Browse Source
This commit is contained in:
II-Paulus-II 2024-03-06 15:51:37 +00:00
parent 73e97496d0
commit 8befb291be
2 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Details.jsx
View File

@ -5,18 +5,20 @@ import "@/styles/details.css";
function Details() {
return (
<article className="detailsContainer">
<div className="detailsSocialLinksContainer">
<section className="detailsSocialLinksContainer">
<a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
<a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
</div>
<div className="detailsTextContainer">
<h2 className="detailsTitle">Paul Hughes</h2>
<p className="detailsComment">Full Stack Developer</p>
</div>
</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">
<a className="detailsInfoLinks" href="#tech">Tech</a>
<a className="detailsInfoLinks" href="#projects">Projects</a>
</div>
</section>
<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>
</article>
);
};

15
src/styles/details.css
View File

@ -5,7 +5,7 @@
color: white;
display: flex;
flex-direction: row;
gap: 1rem;
gap: 2rem;
}
.detailsTextContainer {
@ -14,6 +14,13 @@
gap: 1rem;
}
.detailsTextInnerContainer {
height: 5rem;
display: flex;
justify-content: center;
align-items: center:
}
.detailsTitle {
font-size: 4rem;
}
@ -24,7 +31,9 @@
.detailsInfoLinksContainer {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-evenly;
align-items: space-evenly;
}
.detailsInfoLinks {
@ -34,7 +43,7 @@
.detailsSocialLinksContainer {
display: flex;
flex-direction: column;
gap: 1rem;
transform: translateY(-4rem);
}
.detailsSocialLinksImg {