rework profile

2022-02-13 17:21:31 +01:00
parent e44bce0b8d
commit 5009d9682d
3 changed files with 107 additions and 6 deletions
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -14,6 +14,18 @@
  margin-bottom: 2rem
 }

+.mb-3 {
+  margin-bottom: 0.75rem
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem
+}
+
+.mt-1 {
+  margin-top: 0.25rem
+}
+
 .inline-block {
  display: inline-block
 }
@ -30,6 +42,18 @@
  display: contents
 }

+.h-full {
+  height: 100%
+}
+
+.h-36 {
+  height: 9rem
+}
+
+.w-36 {
+  width: 9rem
+}
+
 .flex-grow {
  flex-grow: 1
 }
@ -38,6 +62,10 @@
  flex-direction: column
 }

+.items-center {
+  align-items: center
+}
+
 .justify-end {
  justify-content: flex-end
 }
@ -58,6 +86,10 @@
  border-radius: 0.375rem !important
 }

+.rounded-full {
+  border-radius: 9999px
+}
+
 .border-2 {
  border-width: 2px
 }
@ -111,6 +143,11 @@
  line-height: 1.75rem
 }

+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem
+}
+
 .font-extrabold {
  font-weight: 800
 }
@ -124,11 +161,23 @@
  color: rgb(23 23 23 / var(--tw-text-opacity))
 }

+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity))
+}
+
 .\!no-underline {
  -webkit-text-decoration-line: none !important;
          text-decoration-line: none !important
 }

+@media (prefers-color-scheme: dark) {
+  .dark\:text-neutral-400 {
+    --tw-text-opacity: 1;
+    color: rgb(163 163 163 / var(--tw-text-opacity))
+  }
+}
+
@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row
--- a/content/_index.md
+++ b/content/_index.md
@ -7,16 +7,39 @@ description: "This is adr1enbe4udou1n blog."
 A 🧔🌍💻 aka senior web developer @Bretagne 🇫🇷
 {{< /lead >}}

-Hi folks, I'm a french web lover actually working [@Cesson-Sévigné](https://fr.wikipedia.org/wiki/Cesson-S%C3%A9vign%C3%A9), mastering `Laravel` and `ASP.NET Core` with `C#` as main backend frameworks, as well as `Vue 3` associated with `Typescript` and [`Composition API`](https://vuejs.org/guide/extras/composition-api-faq.html) on frontend side. Use preferably utility-first CSS framework as `Tailwind` / `Windi CSS`, but also comfortable with `Sass` with **BEM** implementation.
+Hi folks, I'm a web lover actually working [@Cesson-Sévigné](https://fr.wikipedia.org/wiki/Cesson-S%C3%A9vign%C3%A9), mastering :

-I love develop proper API design following `DDD` + `Hexa` principles if applicable. In addition to above `.NET` and `PHP` backend stacks, I'm also confident with [`Nest.js`](https://nestjs.com/) associated to [`MikroORM`](https://mikro-orm.io/) (*Typescript*), [`FastAPI`](https://fastapi.tiangolo.com/) with [`SQLAlchemy`](https://www.sqlalchemy.org/) (*Python*), and [`Spring Boot`](https://spring.io/projects/spring-boot) with `Hibernate` as main JPA implementation (*Java*).
+* [`ASP.NET Core`](https://docs.microsoft.com/fr-fr/aspnet/core/?view=aspnetcore-6.0) with `C#` and [`Laravel`](https://laravel.com/) as main backend frameworks
+* [`Vue 3`](https://vuejs.org/) associated with [`Typescript`](https://www.typescriptlang.org/) and [`Composition API`](https://vuejs.org/guide/extras/composition-api-faq.html) on frontend side
+* *Utility-first CSS frameworks* as [`Tailwind`](https://tailwindcss.com/) / [`Windi CSS`](https://windicss.org/), but also comfortable with [`Sass`](https://sass-lang.com/) with **BEM** implementation

-I encourage `TDD` or at least proper **integration tests** on any backend frameworks, following `AAA` aka *Arrange Act Assert* principle. Mastering `PHPUnit` or [`Pest`](https://pestphp.com/) for *PHP*, `xUnit.net` with [`Fluent Assertions`](https://github.com/fluentassertions/fluentassertions) for *.NET Core*, `JUnit` with [`REST Assured`](https://rest-assured.io/) for *Spring Boot*, `Jest` and `pytest` on respective *NodeJS* end *Python* stacks.
+I can develop proper API design following `DDD` + `Hexa` principles if applicable. In addition to above `.NET` and `PHP` backend stacks, I'm also confident with :

-Fully embracing app containerization with `Docker`, from local, staging to production, I push to use properly configured `CI/CD` whenever is possible in order to enforce continuous automatized testing, linting and coding standard at many languages ([`ESLint`](https://eslint.org/), [`Prettier`](https://prettier.io/), [`PHP CS fixer`](https://cs.symfony.com/), [`PHPStan`](https://github.com/phpstan/phpstan), [`Black`](https://black.readthedocs.io/en/stable/), [`mypy`](http://mypy-lang.org/), [`Google Java Format`](https://github.com/google/google-java-format), [`Spotless`](https://github.com/diffplug/spotless), and so on...).
+* [`Nest.js`](https://nestjs.com/) associated to [`MikroORM`](https://mikro-orm.io/) (*Typescript*),
+* [`FastAPI`](https://fastapi.tiangolo.com/) with [`SQLAlchemy`](https://www.sqlalchemy.org/) (*Python*),
+* [`Spring Boot`](https://spring.io/projects/spring-boot) with `Hibernate` as main JPA implementation (*Java*).

-Mastering installations of properly configured `Docker Swarm` clusters, with [`GitLab`](https://about.gitlab.com/) or [`Gitea`](https://gitea.io/) coupled with [`Drone CI`](https://www.drone.io/) as both *self-hosted CI/CD* solutions, [`Traefik`](https://traefik.io/traefik/) as cloud proxy and [`Portainer`](https://www.portainer.io/) as simple GUI for containers management. Use managed `PostgreSQL` and `MySQL` as main **SGBD**, as well as `Redis` as high performance cache/sessions manager.
+I encourage `TDD` or at least proper **integration tests** on any backend frameworks, following `AAA` aka *Arrange Act Assert* principle :

-I use [`Loki`](https://grafana.com/oss/loki/), [`Prometheus`](https://prometheus.io) and [`Jaeger`](https://www.jaegertracing.io/) as respective *logging*, *metrics* and *tracing* tools, all combined to [`Grafana`](https://grafana.com) as perfect GUI dashboard builder for *Ops*. I mainly use [`K6`](https://k6.io/) and [`Locust`](https://locust.io/) as main *load testing tools*. Have some experiences with many mid-range cloud providers as [Digital Ocean](https://www.digitalocean.com/), [Hetzner](https://www.hetzner.com/), [OVH](https://www.ovhcloud.com/), [Scaleway](https://www.scaleway.com/).
+* `PHPUnit` or [`Pest`](https://pestphp.com/) for *PHP*,
+* `xUnit.net` with [`Fluent Assertions`](https://github.com/fluentassertions/fluentassertions) for *.NET Core*,
+* `JUnit` with [`REST Assured`](https://rest-assured.io/) for *Spring Boot*,
+* `Jest` and `pytest` on respective *NodeJS* end *Python* stacks.
+
+Fully embracing app containerization with `Docker`, from local, staging to production, I push to use properly configured `CI/CD` whenever is possible in order to enforce **continuous automatized testing, linting and coding standard** at many languages ([`ESLint`](https://eslint.org/), [`Prettier`](https://prettier.io/), [`PHP CS fixer`](https://cs.symfony.com/), [`PHPStan`](https://github.com/phpstan/phpstan), [`Black`](https://black.readthedocs.io/en/stable/), [`mypy`](http://mypy-lang.org/), [`Google Java Format`](https://github.com/google/google-java-format), [`Spotless`](https://github.com/diffplug/spotless), and so on...).
+
+Mastering installations of properly configured `Docker Swarm` clusters with next containerized tools :
+
+* [`GitLab`](https://about.gitlab.com/) or [`Gitea`](https://gitea.io/) coupled with [`Drone CI`](https://www.drone.io/) as both *self-hosted CI/CD* solutions,
+* [`Traefik`](https://traefik.io/traefik/) as main cloud proxy with automatic service discovery and SSL configuration
+* [`Portainer`](https://www.portainer.io/) as simple GUI for containers management.
+* [`Loki`](https://grafana.com/oss/loki/), [`Prometheus`](https://prometheus.io) and [`Jaeger`](https://www.jaegertracing.io/) as respective *logging*, *metrics* and *tracing* tools
+* [`Grafana`](https://grafana.com) as perfect GUI dashboard builder for *Ops*.
+
+I use managed [`PostgreSQL`](https://www.postgresql.org/), [`MySQL`](https://www.mysql.com/fr/), and `MSSQL` as main **SGBD**, as well as `Redis` for high performance cache/sessions management.
+
+For *load testing*, I can write scenarios for both [`K6`](https://k6.io/) and [`Locust`](https://locust.io/), coupled with proper time series DB as [`InfluxDB`](https://www.influxdata.com/) and `Grafana` as visualization tool. For advanced application performance analysis, I tend to use [`OpenTelemetry`](https://opentelemetry.io/) as collection tools for proper metrics that can be exposed to `Prometheus`, and tracing, ready to export into `Jaeger`.
+
+Have some experiences with many mid-range cloud providers as [Digital Ocean](https://www.digitalocean.com/), [Hetzner](https://www.hetzner.com/), [OVH](https://www.ovhcloud.com/), [Scaleway](https://www.scaleway.com/).

 See some of [my open sourced works]({{< ref "works" >}} "Okami101 Works").
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@ -0,0 +1,29 @@
+<article class="flex flex-col items-center {{ if not .Site.Params.homepage.showRecent }}
+    h-full
+  {{ end }}">
+    <header class="flex flex-col items-center mb-8">
+        {{ with .Site.Author.image }}
+        {{ $authorImage := resources.Get . }}
+        {{ if $authorImage }}
+        {{ $authorImage := $authorImage.Fill "288x288" }}
+        <img class="mb-2 rounded-full w-36 h-36" width="144" height="144" alt="Author"
+            src="{{ $authorImage.RelPermalink }}" />
+        {{ end }}
+        {{ end }}
+        <h1 class="text-4xl font-extrabold">
+            {{ .Site.Author.name | default .Site.Title }}
+        </h1>
+        {{ with .Site.Author.headline }}
+        <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
+            {{ . }}
+        </h2>
+        {{ end }}
+        <div class="mt-1 text-2xl">
+            {{ partialCached "author-links.html" . }}
+        </div>
+    </header>
+    <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
+</article>
+<section>
+    {{ partial "recent-articles.html" . }}
+</section>