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

20
_includes/styles/base.scss
View file

@ -79,11 +79,31 @@ pre {
} }
.page-header { .page-header {
margin-bottom: 2rem;
text-align: center;
h1 { h1 {
background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue)); background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -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 { @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 = ` const gpgFingerprint = `
pub ed25519/E48D7F49A852F112 2023-07-14 [SC] pub ed25519/E48D7F49A852F112 2023-07-14 [SC]
Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112 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() { export default function() {
return ( 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> <section>
<h2 id="about"> About</h2> <h2 id="about"> About</h2>
<p>I am a software developer, open-source enthusiast, lover of pizza, renegade of funk and many more.</p> <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 title = "Resume - Foster Hangdaan";
export const header = {
heading: "Resume",
subheading: <>Download a copy of my resume <a href="">here</a>.</>,
};
export default function() { export default function() {
return ( return (
<> <>
<header className="page-header">
<h1>Resume</h1>
</header>
<hr/>
<section> <section>
<h2>Experience</h2> <h2>Experience</h2>
<ul> <ul>
@ -19,9 +20,6 @@ export default function() {
<li>Placeholder</li> <li>Placeholder</li>
</ul> </ul>
</section> </section>
<section>
<p>Download a copy of my resume here.</p>
</section>
</> </>
); );
} }