ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add github stats

Browse source
This commit is contained in:
Ayo 2022-09-24 20:15:54 +02:00
parent a3cb91cff8
commit 9c950c4f9c
3 changed files with 137 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
package-lock.json generated
View file

@ -8,7 +8,8 @@
"name": "@example/basics", "name": "@example/basics",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"astro": "^1.2.6" "astro": "^1.2.6",
"astro-github-stats": "^0.1.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -970,6 +971,14 @@
"npm": ">=6.14.0" "npm": ">=6.14.0"
} }
}, },
"node_modules/astro-github-stats": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.0.tgz",
"integrity": "sha512-efL18Mt2ITbYWFVy28XGFNemju2TPBMZ+BGw6N3zCf2OO0whtO7Kz6bsoploARqO5PzeyAxPMk52U9SNdQ1QWw==",
"peerDependencies": {
"astro": "^1.0.0"
}
},
"node_modules/bail": { "node_modules/bail": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -6534,6 +6543,12 @@
"zod": "^3.17.3" "zod": "^3.17.3"
} }
}, },
"astro-github-stats": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.0.tgz",
"integrity": "sha512-efL18Mt2ITbYWFVy28XGFNemju2TPBMZ+BGw6N3zCf2OO0whtO7Kz6bsoploARqO5PzeyAxPMk52U9SNdQ1QWw==",
"requires": {}
},
"bail": { "bail": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",

3
package.json
View file

@ -11,6 +11,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^1.2.6" "astro": "^1.2.6",
"astro-github-stats": "^0.1.0"
} }
} }

241
src/pages/index.astro
View file

@ -2,146 +2,143 @@
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro"; import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import GithubStats from "astro-github-stats";
--- ---
<Layout title="Ayo Ayco | Software Engineer + Web Developer"> <Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main> <main>
<section class="highlighted-section"> <section class="highlighted-section">
<div class="highlighted-section__content"> <div class="highlighted-section__content">
<h1 title="Ayo Ayco | Software Engineer + Web Developer"> <h1 title="Ayo Ayco | Software Engineer + Web Developer">
<span class="heavy-text">Ayo</span>Ayco <span class="heavy-text">Ayo</span>Ayco
</h1> </h1>
<ul role="list"> <ul role="list">
<li>👨🏻‍💻 Software Extraordinaire</li> <li>👨🏻‍💻 Software Extraordinaire</li>
<li>🕵🏻‍♂️ Frontend Detective Consultant</li> <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
<li>📚 BS Computer Science</li> <li>📚 BS Computer Science</li>
</ul> </ul>
<a href="/now" class="now-wrapper"> <a href="/now" class="now-wrapper">
<span class="now-label">Now</span> <span class="now-label">Now</span>
<span class="status">Settling in The Netherlands &rarr;</a> <span class="status">Settling in The Netherlands &rarr;</span>
</a> </a>
</div> </div>
</section> </section>
<section class="cards-section"> <section class="cards-section">
<ul role="list" class="cards-section__grid"> <ul role="list" class="cards-section__grid">
<Card <Card
href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing" href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
title="CV / Resume" title="CV / Resume"
body="Download and peruse my skills and experience." body="Download and peruse my skills and experience."
/> />
<Card <Card
href="https://github.com/ayoayco" href="https://github.com/ayoayco"
title="Github" title="Github"
body="See my public projects over at Github. ❤️" body="See my public projects over at Github. ❤️"
/> />
<Card <Card
href="/social" href="/social"
title="Social" title="Social"
body="Explore a galaxy of my social accounts." body="Explore a galaxy of my social accounts."
/> />
<Card <Card
href="https://blog.ayco.io/" href="https://blog.ayco.io/"
title="Blog" title="Blog"
body="Read my articles on technology, productivity, and life in general." body="Read my articles on technology, productivity, and life in general."
/> />
</ul> </ul>
<Footer /> <GithubStats username="ayoayco" />
</section> <Footer />
</main> </section>
</main>
</Layout> </Layout>
<style> <style>
h1 { h1 {
margin: 0; margin: 0;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
h1 span.heavy-text { h1 span.heavy-text {
font-weight: 900; font-weight: 900;
color: white; color: white;
} }
.highlighted-section__content { .highlighted-section__content {
margin: auto; margin: auto;
padding: 1em; padding: 1em;
max-width: var(--content-width); max-width: var(--content-width);
font-weight: bold; font-weight: bold;
font-size: x-large; font-size: x-large;
color: var(--color-bg); color: var(--color-bg);
line-height: 1.6; line-height: 1.6;
} }
.now-wrapper { .now-wrapper {
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 40px; border-radius: 40px;
padding: 8px 4px; padding: 8px 4px;
font-weight: normal; font-weight: normal;
color: white; color: white;
font-size: small; font-size: small;
text-decoration: none; text-decoration: none;
} }
.now-label { .now-label {
border-radius: 40px; border-radius: 40px;
background-color: rgba(0,0,0,0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 4px 8px; padding: 4px 8px;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
} }
.status { .status {
padding-right: 4px; padding-right: 4px;
} }
.highlighted-section { .highlighted-section {
background: var(--ayo-gradient); background: var(--ayo-gradient);
background-size: 500% 500%; background-size: 500% 500%;
background-color: var(--); background-color: var(--);
animation: pulse 15s ease-in-out infinite; animation: pulse 15s ease-in-out infinite;
box-shadow: 0 8px 8px -4px lightblue; box-shadow: 0 8px 8px -4px lightblue;
} }
.highlighted-section__content ul { .highlighted-section__content ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.highlighted-section code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.highlighted-section code { .cards-section {
font-size: 0.875em; margin: auto;
border: 0.1em solid var(--color-border); padding: 1em;
border-radius: 4px; max-width: var(--content-width);
padding: 0.15em 0.25em; }
}
.cards-section { .cards-section__grid {
margin: auto; display: grid;
padding: 1em; grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
max-width: var(--content-width); gap: 1rem;
} padding: 0;
}
.cards-section__grid { @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
display: grid; .highlighted-section__content ul li {
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); font-size: 14px;
gap: 1rem; font-weight: bold;
padding: 0;
} }
}
@media only screen @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
and (min-device-width: 280px) .highlighted-section__content ul li {
and (max-device-width: 653px) { font-size: 20px;
.highlighted-section__content ul li { font-weight: bold;
font-size: 14px;
font-weight: bold;
}
}
@media only screen
and (min-device-width: 360px)
and (max-device-width: 812px) {
.highlighted-section__content ul li {
font-size: 20px;
font-weight: bold;
}
} }
}
</style> </style>