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:w-1/2 mb-4 md:mb-0">
<img
@ -15,11 +11,7 @@ import Www from "./www.astro";
<h1 class="text-4xl font-bold mb-4">About Phil</h1>
<h2 class="text-2xl font-semibold mb-4">Developer of all sorts</h2>
<div class="my-6">
<Www />
</div>
<div class="text-lg text-justify mb-8 space-y-6">
<div class="text-lg text-justify space-y-6">
<p>
I got into computer science by creating websites, learning about
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 -->
<a
href="https://twitter.com/philippeloctaux"
@ -16,7 +18,11 @@
<span class="hidden sm:inline">Twitter</span>
</div>
</a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Telegram -->
<a
href="https://t.me/philippeloctaux"
@ -34,7 +40,11 @@
<span class="hidden sm:inline">Telegram</span>
</div>
</a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Mastodon -->
<a
rel="me"
@ -53,7 +63,11 @@
<span class="hidden sm:inline">Mastodon</span>
</div>
</a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- GitHub -->
<a
href="https://github.com/x4m3"
@ -71,7 +85,11 @@
<span class="hidden sm:inline">GitHub</span>
</div>
</a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- LinkedIn -->
<a
href="https://linkedin.com/in/philippeloctaux"
@ -89,7 +107,11 @@
<span class="hidden sm:inline">LinkedIn</span>
</div>
</a>
</div>
</div>
<div class="w-full h-auto md:w-auto">
<div class="text-center">
<!-- Email -->
<a
href="/email"
@ -114,3 +136,5 @@
</div>
</a>
</div>
</div>
</div>

4
src/pages/index.astro
View file

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