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

basic front page styling

Browse Source
This commit is contained in:
II-Paulus-II 2024-03-06 14:33:35 +00:00
parent 7fa3e01bb3
commit 73e97496d0
3 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/linkedin.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

17
src/components/Details.jsx
View File

@ -5,11 +5,18 @@ import "@/styles/details.css";
function Details() {
return (
<article className="detailsContainer">
<h1 className="detailsTitle">Paul Hughes</h1>
<a className="detailsLinks" href="#tech">Technologies</a>
<a className="detailsLinks" href="#projects">Projects</a>
<a href="https://github.com/II-Paulus-II" ><img className="detailsSocialLinks" src="/github.webp" alt="github" /></a>
<a href="https://www.linkedin.com/in/paul-andrew-hughes/" ><img className="detailsSocialLinks" src="/linkedin.webp" alt="linkedin" /></a>
<div 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>
<div className="detailsInfoLinksContainer">
<a className="detailsInfoLinks" href="#tech">Tech</a>
<a className="detailsInfoLinks" href="#projects">Projects</a>
</div>
</article>
);
};

41
src/styles/details.css
View File

@ -1,21 +1,44 @@
.detailsContainer {
padding: 3rem;
justify-content: center;
align-items: center;
min-height: 100vh;
color: white;
display: flex;
flex-direction: row;
gap: 1rem;
}
.detailsTextContainer {
display: flex;
flex-direction: column;
gap: 1rem;
}
.detailsTitle {
font-size: 4rem;
}
.detailsProfileImage {
.detailsComment {
font-size: 2.5rem;
}
.detailsLinks {
.detailsInfoLinksContainer {
display: flex;
flex-direction: column;
}
.detailsSocialLinks {
.detailsInfoLinks {
font-size: 1.5rem;
}
.detailsSocialLinksContainer {
display: flex;
flex-direction: column;
gap: 1rem;
}
.detailsSocialLinksImg {
max-width: 4rem;
height: 100%;
}