Use the new portrait on About and crop it to a circle (#112)

The About photo was a 960x540 landscape selfie, so it read as a snapshot
rather than an author portrait. Replace it with a square studio shot
(400x400, 17 KB) and render it as a circle.

Markdown images take no class, so the image is now an <img> tag with a
.profile-photo class. The repo had no stylesheet of its own — the theme
supplied /assets/main.css — so add assets/main.scss that imports minima
and appends the one rule. object-fit: cover keeps the face centred if a
future photo is not square.

Co-authored-by: Jaysinh Shukla <jaysinhshukla@Jaysinhs-MacBook-Pro-2.local>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: 3 people

about.md

@@ -4,7 +4,8 @@ title: About
 permalink: /about/
 ---
 
-![my_image]({{ site.url}}{{ site.baseurl }}/assets/images/my_profile_picture.jpg)
+<img class="profile-photo" src="{{ site.url }}{{ site.baseurl }}/assets/images/my_profile_picture.jpg" alt="Jaysinh Shukla">
+
 
 
 I am **Jaysinh Shukla**, a Software Engineer at Amazon. For more than ten years I have

assets/images/my_profile_picture.jpg

@@ -0,0 +1,16 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import "minima";
+
+// The About page portrait. `cover` keeps the face centred whatever aspect
+// ratio the source photo has, so the circle never squashes it.
+.profile-photo {
+  display: block;
+  margin: 0 auto $spacing-unit;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  object-fit: cover;
+}