mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-02 03:36:44 +02:00
Unify page function style
This commit is contained in:
GitHub
parent
ec4002ccf7
commit
ee74c99773
3 changed files with 165 additions and 158 deletions
|
|
@ -36,7 +36,7 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function DonatePage(props) {
|
const DonatePage = (props) => {
|
||||||
const [amount, setAmount] = useState(5);
|
const [amount, setAmount] = useState(5);
|
||||||
const { t } = useI18next();
|
const { t } = useI18next();
|
||||||
const { path } = React.useContext(I18nextContext);
|
const { path } = React.useContext(I18nextContext);
|
||||||
|
|
@ -126,7 +126,7 @@ function DonatePage(props) {
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
DonatePage.propTypes = {
|
DonatePage.propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function ThankYouPage(props) {
|
const ThankYouPage = (props) => {
|
||||||
const { site } = props.data;
|
const { site } = props.data;
|
||||||
|
|
||||||
let contactEmail = site.siteMetadata.contactEmail;
|
let contactEmail = site.siteMetadata.contactEmail;
|
||||||
|
|
@ -46,7 +46,7 @@ function ThankYouPage(props) {
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ThankYouPage.propTypes = {
|
ThankYouPage.propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
|
|
|
||||||
|
|
@ -54,8 +54,10 @@ export const query = graphql`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class IndexPage extends React.Component {
|
const IndexPage = (props) => {
|
||||||
componentDidMount() {
|
React.useEffect(() => {
|
||||||
|
if (typeof window === "undefined") return;
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: [
|
targets: [
|
||||||
"." + styles.profileCard + " > span",
|
"." + styles.profileCard + " > span",
|
||||||
|
|
@ -81,162 +83,167 @@ class IndexPage extends React.Component {
|
||||||
duration: 250,
|
duration: 250,
|
||||||
easing: "easeInOutCirc",
|
easing: "easeInOutCirc",
|
||||||
});
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
let meta = props.data.site.siteMetadata;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
||||||
|
<section className={styles.heroSection}>
|
||||||
|
<div className={styles.profile + " profile"}>
|
||||||
|
<div
|
||||||
|
data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)",
|
||||||
|
}}
|
||||||
|
className={styles.profileImage + " lazy"}
|
||||||
|
></div>
|
||||||
|
<div className={styles.profileImageDummy}></div>
|
||||||
|
<div className={styles.profileCard}>
|
||||||
|
<span className={styles.hello}>
|
||||||
|
<Trans>homeHello</Trans>
|
||||||
|
</span>
|
||||||
|
<span className={styles.name}>Kevin Kandlbinder</span>
|
||||||
|
<span className={styles.description}>
|
||||||
|
<Trans>homeMe</Trans>{" "}
|
||||||
|
<span id="descriptionType">
|
||||||
|
<Trans>homeWebDeveloper</Trans>
|
||||||
|
</span>
|
||||||
|
.
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div className={styles.contactLinks}>
|
||||||
|
<a
|
||||||
|
className={styles.contactLink}
|
||||||
|
href={"tel:" + meta.contactPhone}
|
||||||
|
rel="me"
|
||||||
|
>
|
||||||
|
<i className="fas fa-fw fa-phone"></i>
|
||||||
|
{meta.contactPhone}
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={styles.contactLink}
|
||||||
|
href={"mailto:" + meta.contactEmail}
|
||||||
|
rel="me"
|
||||||
|
>
|
||||||
|
<i className="far fa-fw fa-envelope"></i>
|
||||||
|
{meta.contactEmail}
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={styles.contactLink}
|
||||||
|
href={meta.mapsLink}
|
||||||
|
rel="noreferrer "
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<i className="fas fa-fw fa-map-marker-alt"></i>
|
||||||
|
<Trans>homeMyLocation</Trans>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={styles.contactLink}
|
||||||
|
href={meta.contactMastodonHref}
|
||||||
|
rel="noreferrer me"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<i className="fab fa-fw fa-mastodon"></i>
|
||||||
|
{meta.contactMastodon}
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className={styles.contactLink}
|
||||||
|
href={"https://github.com/" + meta.contactGitHub}
|
||||||
|
rel="noreferrer me"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<i className="fab fa-fw fa-github"></i>
|
||||||
|
{meta.contactGitHub}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="aboutSection">
|
||||||
|
<article>
|
||||||
|
<h1>
|
||||||
|
<Trans>homeAboutMe</Trans>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
<Trans>homeAboutMeHello</Trans>
|
||||||
|
<br />
|
||||||
|
<Trans>homeAboutMeText</Trans>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<a
|
||||||
|
className={styles.creditSection}
|
||||||
|
href="https://unsplash.com/@jannikkiel"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<i className="fas fa-fw fa-camera"></i>{" "}
|
||||||
|
<Trans>homeImageCredit</Trans>
|
||||||
|
</span>
|
||||||
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<section className="featuredSection">
|
||||||
|
<article>
|
||||||
|
<h1>
|
||||||
|
<Trans>featuredProjects</Trans>
|
||||||
|
</h1>
|
||||||
|
<div className={projectStyles.projectList}>
|
||||||
|
{props.data.allProjectsJson.nodes.map((project) => {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
className={projectStyles.projectCard}
|
||||||
|
key={project.lang + "/" + project.urlname}
|
||||||
|
to={"/projects/" + project.urlname}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={projectStyles.projectCardImage}
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"url(" + project.image.childImageSharp.resize.src + ")",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={projectStyles.projectCardMeta}>
|
||||||
|
<span className={projectStyles.projectCardTitle}>
|
||||||
|
{project.name}
|
||||||
|
</span>
|
||||||
|
<span>{project.shortDescription}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<Link to="/projects" className={styles.seeMoreButton}>
|
||||||
|
<Trans>seeMore</Trans>{" "}
|
||||||
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<Link className={styles.donationSection} to="/donate">
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
<Trans>donationCatchphrase</Trans>
|
||||||
|
</span>
|
||||||
|
<i className="fas fa-fw fa-chevron-right"></i>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*class IndexPage extends React.Component {
|
||||||
|
componentDidMount() {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let meta = this.props.data.site.siteMetadata;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout title="Kevin Kandlbinder" transparentTopbar={true}>
|
|
||||||
<section className={styles.heroSection}>
|
|
||||||
<div className={styles.profile + " profile"}>
|
|
||||||
<div
|
|
||||||
data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)",
|
|
||||||
}}
|
|
||||||
className={styles.profileImage + " lazy"}
|
|
||||||
></div>
|
|
||||||
<div className={styles.profileImageDummy}></div>
|
|
||||||
<div className={styles.profileCard}>
|
|
||||||
<span className={styles.hello}>
|
|
||||||
<Trans>homeHello</Trans>
|
|
||||||
</span>
|
|
||||||
<span className={styles.name}>Kevin Kandlbinder</span>
|
|
||||||
<span className={styles.description}>
|
|
||||||
<Trans>homeMe</Trans>{" "}
|
|
||||||
<span id="descriptionType">
|
|
||||||
<Trans>homeWebDeveloper</Trans>
|
|
||||||
</span>
|
|
||||||
.
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div className={styles.contactLinks}>
|
}*/
|
||||||
<a
|
|
||||||
className={styles.contactLink}
|
|
||||||
href={"tel:" + meta.contactPhone}
|
|
||||||
rel="me"
|
|
||||||
>
|
|
||||||
<i className="fas fa-fw fa-phone"></i>
|
|
||||||
{meta.contactPhone}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className={styles.contactLink}
|
|
||||||
href={"mailto:" + meta.contactEmail}
|
|
||||||
rel="me"
|
|
||||||
>
|
|
||||||
<i className="far fa-fw fa-envelope"></i>
|
|
||||||
{meta.contactEmail}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className={styles.contactLink}
|
|
||||||
href={meta.mapsLink}
|
|
||||||
rel="noreferrer "
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<i className="fas fa-fw fa-map-marker-alt"></i>
|
|
||||||
<Trans>homeMyLocation</Trans>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className={styles.contactLink}
|
|
||||||
href={meta.contactMastodonHref}
|
|
||||||
rel="noreferrer me"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<i className="fab fa-fw fa-mastodon"></i>
|
|
||||||
{meta.contactMastodon}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className={styles.contactLink}
|
|
||||||
href={"https://github.com/" + meta.contactGitHub}
|
|
||||||
rel="noreferrer me"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<i className="fab fa-fw fa-github"></i>
|
|
||||||
{meta.contactGitHub}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section className="aboutSection">
|
|
||||||
<article>
|
|
||||||
<h1>
|
|
||||||
<Trans>homeAboutMe</Trans>
|
|
||||||
</h1>
|
|
||||||
<p>
|
|
||||||
<Trans>homeAboutMeHello</Trans>
|
|
||||||
<br />
|
|
||||||
<Trans>homeAboutMeText</Trans>
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<a
|
|
||||||
className={styles.creditSection}
|
|
||||||
href="https://unsplash.com/@jannikkiel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<i className="fas fa-fw fa-camera"></i>{" "}
|
|
||||||
<Trans>homeImageCredit</Trans>
|
|
||||||
</span>
|
|
||||||
<i className="fas fa-fw fa-chevron-right"></i>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<section className="featuredSection">
|
|
||||||
<article>
|
|
||||||
<h1>
|
|
||||||
<Trans>featuredProjects</Trans>
|
|
||||||
</h1>
|
|
||||||
<div className={projectStyles.projectList}>
|
|
||||||
{this.props.data.allProjectsJson.nodes.map((project) => {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
className={projectStyles.projectCard}
|
|
||||||
key={project.lang + "/" + project.urlname}
|
|
||||||
to={"/projects/" + project.urlname}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={projectStyles.projectCardImage}
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
"url(" +
|
|
||||||
project.image.childImageSharp.resize.src +
|
|
||||||
")",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className={projectStyles.projectCardMeta}>
|
|
||||||
<span className={projectStyles.projectCardTitle}>
|
|
||||||
{project.name}
|
|
||||||
</span>
|
|
||||||
<span>{project.shortDescription}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<Link to="/projects" className={styles.seeMoreButton}>
|
|
||||||
<Trans>seeMore</Trans>{" "}
|
|
||||||
<i className="fas fa-fw fa-chevron-right"></i>
|
|
||||||
</Link>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<Link className={styles.donationSection} to="/donate">
|
|
||||||
<div>
|
|
||||||
<span>
|
|
||||||
<Trans>donationCatchphrase</Trans>
|
|
||||||
</span>
|
|
||||||
<i className="fas fa-fw fa-chevron-right"></i>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
IndexPage.propTypes = {
|
IndexPage.propTypes = {
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue