foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Add header component

Browse source
This commit is contained in:
Foster Hangdaan 2023-07-26 16:34:06 -04:00
parent 748c8cfa91
commit c3e9daadcb
Signed by: foster
GPG key ID: E48D7F49A852F112
5 changed files with 50 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
_components/header.tsx Normal file
View file

@ -0,0 +1,18 @@
export interface Props {
heading: string;
subheading?: string;
}
export default function(props: Props) {
return (
<header className="page-header">
<h1>{ props.heading }</h1>
<div className="separator">
<span className="outer-outline"/>
<span className="icon">󱀝</span>
<span className="outer-outline"/>
</div>
<p className="subheading">{ props.subheading }</p>
</header>
)
}

3
_includes/layouts/main.tsx
View file

@ -1,4 +1,4 @@
export default function({ title, children, comp }) {
export default function({ title, header, children, comp }) {
return (
<html>
<head>
@ -10,6 +10,7 @@ export default function({ title, children, comp }) {
<body>
{comp.navbar()}
<div className="main-content">
{ comp.header(header) }
{ children }
</div>
</body>

20
_includes/styles/base.scss
View file

@ -79,11 +79,31 @@ pre {
}
.page-header {
margin-bottom: 2rem;
text-align: center;
h1 {
background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subheading {
font-style: italic;
}
.separator {
margin: 1rem 0;
span {
display: inline-block;
vertical-align: middle;
}
.outer-outline {
width: 45%;
border: 1px solid var(--color-black);
}
.icon {
font-size: 2rem;
color: var(--color-black);
}
}
}
@for $i from 1 to 3 {

15
index.tsx
View file

@ -1,3 +1,8 @@
export const header = {
heading: "Hi! My name is Foster",
subheading: "Congratulations, stranger. You have found the personal website of Foster Hangdaan.",
};
const gpgFingerprint = `
pub ed25519/E48D7F49A852F112 2023-07-14 [SC]
Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112
@ -7,16 +12,6 @@ uid Foster Hangdaan <foster@hangdaan.email>
export default function() {
return (
<>
<header className="page-header">
<h1>Hi! My name is Foster</h1>
</header>
<hr/>
<section>
<p>
Congratulations, stranger.
You have found the personal website of Foster Hangdaan.
</p>
</section>
<section>
<h2 id="about"> About</h2>
<p>I am a software developer, open-source enthusiast, lover of pizza, renegade of funk and many more.</p>

12
resume.tsx
View file

@ -1,12 +1,13 @@
export const title = "Resume - Foster Hangdaan";
export const header = {
heading: "Resume",
subheading: <>Download a copy of my resume <a href="">here</a>.</>,
};
export default function() {
return (
<>
<header className="page-header">
<h1>Resume</h1>
</header>
<hr/>
<section>
<h2>Experience</h2>
<ul>
@ -19,9 +20,6 @@ export default function() {
<li>Placeholder</li>
</ul>
</section>
<section>
<p>Download a copy of my resume here.</p>
</section>
</>
);
}