Merge pull request #10 from estepankevich/adapt_backlins_and_toc

adapt design, change photo

Author: estepankevich

content/index.md

@@ -5,16 +5,22 @@ date: 2024-11-15
 
 <h2>Welcome to my personal website and digital garden !</h2>
 <div class="welcome">
-<img src="/static/og-image.png" alt="My Photo"/>
-<p>
-My name is Evgeny. I’m passionate about data science, mathematics, and philosophy. 
-<br/> <br/>
-This site is a collection of my thoughts, notes, in-depth articles and projects I’ve worked on or found inspiring over the years. What started as a simple digital repository has evolved into a multilingual mix of English, French, and Russian content. I hope you find something here that sparks your curiosity or inspires your own explorations.
-<br/> <br/>
-In my free time I enjoy running🏃, climbing🧗, and playing the piano🎹.
-</p>
+  <div class="image-container">
+    <img src="/static/og-image.jpeg" alt="My Photo"/>
+    <p class="portrait-credit">Portrait Credit: <a href="https://www.deviantart.com/butjok/art/Best-friend-188254432">butjok 2010 &copy;</a></p>
+  </div>
+  <div class="text-container">
+    <p>
+      My name is Evgeny. I’m passionate about data science, mathematics, and philosophy. 
+      <br/> <br/>
+      This site is a collection of my thoughts, notes, in-depth articles and projects I’ve worked on or found inspiring over the years. What started as a simple digital repository has evolved into a multilingual mix of English, French, and Russian content. I hope you find something here that sparks your curiosity or inspires your own explorations.
+      <br/> <br/>
+      In my free time I enjoy running🏃, climbing🧗, and playing the piano🎹.
+    </p>
+  </div>
 </div>
 
+
 This site is a living project and is always evolving. Here's how it's organized:  
 - [🌍 Blog](/🌍-Blog) - A curated selection of my longer-form writing and reflections  
 - [🌐 Topics](/🌐-Topics) - Pages that organize my notes by subject  

quartz.config.ts

@@ -70,7 +70,7 @@ const config: QuartzConfig = {
       }),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
-      Plugin.TableOfContents(),
+      Plugin.TableOfContents({ collapseByDefault: true }),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
       Plugin.Latex({ renderEngine: "katex" }),

quartz.layout.ts

@@ -34,10 +34,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
-    Component.MobileOnly(Component.TableOfContents({ 
-      showByDefault: false, 
-      collapseByDefault: true
-    }))
+    Component.TableOfContents()
   ],
   left: [
     Component.PageTitle(),
@@ -50,12 +47,6 @@ export const defaultContentPageLayout: PageLayout = {
     Component.Search(),
     Component.Darkmode(),
     Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents({ 
-      showByDefault: false, 
-      collapseByDefault: true
-    }))
-  ],
-  afterBody: [
     Component.BacklinksCustom()
   ]
 }

quartz/components/Head.tsx

@@ -121,9 +121,9 @@ export default (() => {
     const path = url.pathname as FullSlug
     const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
 
-    const iconPath = joinSegments(baseDir, "static/icon.png")
+    const iconPath = joinSegments(baseDir, "static/icon.jpeg")
 
-    const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.png`
+    const ogImageDefaultPath = `https://${cfg.baseUrl}/static/og-image.jpeg`
     // "static/social-images/slug-filename.md.webp"
     const ogImageGeneratedPath = `https://${cfg.baseUrl}/${fileDir.replace(
       `${ctx.argv.output}/`,

quartz/static/icon.jpeg

@@ -56,21 +56,37 @@ article > ul:first-child {
 }
 
 .welcome {
-  display: flex;
-  justify-content: center;
-}
-
-.welcome p,img {
-    padding: 10px;
-    padding-left: 0;
-}
-
-.welcome img {
-    max-width: 30%;
+    display: flex;
+    gap: 20px; /* Space between the image and text */
+  }
+  
+  .image-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 30%; /* Adjust as needed */
+  }
+  
+  .image-container img {
+    max-width: 100%;
     height: auto;
     object-fit: contain;
     object-position: top;
-}
+  }
+  
+  .portrait-credit {
+    font-size: 0.8rem;
+    color: #8e8888;
+    text-align: center;
+    margin-top: -15px;
+  }
+  
+  .text-container {
+    max-width: 60%; /* Adjust as needed */
+  }
+  
+  .text-container p {
+    line-height: 1.6; /* Improve readability */
+  }
 
 .recent-ul {
     padding: 0;

quartz/static/icon.png

@@ -146,7 +146,7 @@ export const defaultImage: SocialImageOptions["imageStructure"] = (
   const useSmallerFont = title.length > fontBreakPoint
 
   // Setup to access image
-  const iconPath = `https://${cfg.baseUrl}/static/icon.png`
+  const iconPath = `https://${cfg.baseUrl}/static/icon.jpeg`
   return (
     <div
       style={{