phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

www: responsive grid, removed from whoami

Browse source
This commit is contained in:
Philippe Loctaux 2023-05-19 14:19:11 +02:00
parent 8ad1551948
commit e0413f82fe
3 changed files with 127 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/whoami.astro
View file

@ -1,7 +1,3 @@
---
import Www from "./www.astro";
---
<div class="md:flex md:flex-row-reverse items-center"> <div class="md:flex md:flex-row-reverse items-center">
<div class="md:w-1/2 mb-4 md:mb-0"> <div class="md:w-1/2 mb-4 md:mb-0">
<img <img
@ -15,11 +11,7 @@ import Www from "./www.astro";
<h1 class="text-4xl font-bold mb-4">About Phil</h1> <h1 class="text-4xl font-bold mb-4">About Phil</h1>
<h2 class="text-2xl font-semibold mb-4">Developer of all sorts</h2> <h2 class="text-2xl font-semibold mb-4">Developer of all sorts</h2>
<div class="my-6"> <div class="text-lg text-justify space-y-6">
<Www />
</div>
<div class="text-lg text-justify mb-8 space-y-6">
<p> <p>
I got into computer science by creating websites, learning about I got into computer science by creating websites, learning about
the Linux kernel and administrating servers. the Linux kernel and administrating servers.

26
src/components/www.astro
View file

@ -1,4 +1,6 @@
<div> <div class="grid grid-cols-3 lg:grid-cols-6 gap-4 place-content-center">
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Twitter --> <!-- Twitter -->
<a <a
href="https://twitter.com/philippeloctaux" href="https://twitter.com/philippeloctaux"
@ -16,7 +18,11 @@
<span class="hidden sm:inline">Twitter</span> <span class="hidden sm:inline">Twitter</span>
</div> </div>
</a> </a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Telegram --> <!-- Telegram -->
<a <a
href="https://t.me/philippeloctaux" href="https://t.me/philippeloctaux"
@ -34,7 +40,11 @@
<span class="hidden sm:inline">Telegram</span> <span class="hidden sm:inline">Telegram</span>
</div> </div>
</a> </a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Mastodon --> <!-- Mastodon -->
<a <a
rel="me" rel="me"
@ -53,7 +63,11 @@
<span class="hidden sm:inline">Mastodon</span> <span class="hidden sm:inline">Mastodon</span>
</div> </div>
</a> </a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- GitHub --> <!-- GitHub -->
<a <a
href="https://github.com/x4m3" href="https://github.com/x4m3"
@ -71,7 +85,11 @@
<span class="hidden sm:inline">GitHub</span> <span class="hidden sm:inline">GitHub</span>
</div> </div>
</a> </a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- LinkedIn --> <!-- LinkedIn -->
<a <a
href="https://linkedin.com/in/philippeloctaux" href="https://linkedin.com/in/philippeloctaux"
@ -89,7 +107,11 @@
<span class="hidden sm:inline">LinkedIn</span> <span class="hidden sm:inline">LinkedIn</span>
</div> </div>
</a> </a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Email --> <!-- Email -->
<a <a
href="/email" href="/email"
@ -113,4 +135,6 @@
<span class="hidden sm:inline">Email</span> <span class="hidden sm:inline">Email</span>
</div> </div>
</a> </a>
</div>
</div>
</div> </div>

4
src/pages/index.astro
View file

@ -2,6 +2,7 @@
import Footer from "../components/footer.astro"; import Footer from "../components/footer.astro";
import Hero from "../components/hero.astro"; import Hero from "../components/hero.astro";
import Whoami from "../components/whoami.astro"; import Whoami from "../components/whoami.astro";
import Www from "../components/www.astro";
--- ---
<html lang="en"> <html lang="en">
@ -15,6 +16,9 @@ import Whoami from "../components/whoami.astro";
<Hero /> <Hero />
<main class="container mx-auto px-4 py-16"> <main class="container mx-auto px-4 py-16">
<Whoami /> <Whoami />
<div class="my-16">
<Www />
</div>
</main> </main>
<Footer /> <Footer />
</body> </body>