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

22
src/components/Details.jsx
View File

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

15
src/styles/details.css
View File

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