✨ Add about page and custom css

tanmayc07 · Jan 1, 2024 · 48ed5b2 · 48ed5b2
1 parent 4d9fade
commit 48ed5b2
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 6 deletions.
diff --git a/assets/css/extended/home-info.css b/assets/css/extended/home-info.css
@@ -0,0 +1,23 @@
+.home-info {
+    align-items: center;
+    text-align: justify;
+}
+
+.home-info img {
+    margin-bottom: 1%;
+    border-radius: 50%;
+}
+
+.header {
+    border-bottom: 1px solid #2e2e2e
+}
+
+::selection {
+    color: #444452;
+    background: #7bff00;
+}
+
+.name-highlight-a {
+    color: #000000;
+    background: #7bff00;
+}
diff --git a/content/about.md b/content/about.md
@@ -0,0 +1,25 @@
+--- 
+title: ABOUT
+layout: single
+# description:
+
+showReadingTime: false
+---
+
+> “We are what we repeatedly do. Excellence, then, is not an act, but a habit.” ―Aristotle
+
+I'm a computer programmer currently pursuing my Master's in Computer Science from SUNY Binghamton University. Previously I completed
+my Bachelor's in Computer Engineering from University of Mumbai. 
+
+I'm passionate about building software programs and dabbling with new technologies to create user-focused and result-driven applications.
+
+## Technical Skills
+
+| Programming Languages | Web Development        | Data                     | Tools & Others                        |
+|-----------------------|------------------------|--------------------------|-----------------------------          |
+| C                     | Django                 | MySQL                    | Git, GitHub                           |
+| Python                | Flask                  | MongoDB                  | Docker                                |
+| Java                  | Express.js             | PostgreSQL               | Heroku                                |
+| Haskell               | HTML, CSS, JavaScript  | Pandas, NumPy            | Linux, Bash scripting                 |
+| GoLang                | React.js, Bootstrap    | Matplotlib               | RESTful APIs                          |
+
diff --git a/hugo.yaml b/hugo.yaml
@@ -5,16 +5,37 @@ theme: ["PaperMod"]
 
 enableEmoji: true
 
+menu:
+  main:
+    - identifier: home
+      name: home
+      url: /
+      weight: 10
+    - identifier: about
+      name: about
+      url: /about
+      weight: 20
+
+
 params:
   defaultTheme: auto
-  profileMode:
-    enabled: true
-    # title: "<Title>" # optional default will be site title
-    subtitle: "Computer Programmer"
+  homeInfoParams:
+    Title: 👋🏻 Hi there!
+    Content: "I'm <a href=\"/about\"><span class=\"name-highlight-a\">Tanmay</span></a> and it's good to have you here!"
+    # imageUrl: "https://i.ibb.co/hBxzX1y/DSC-0101.jpg"
     imageUrl: "https://media1.giphy.com/media/Bzzb92NKwUOj0FjQOd/giphy.gif?cid=ecf05e47mqaevucni02y58st0860bthng1roofds5nawno3u&ep=v1_gifs_search&rid=giphy.gif&ct=g" # optional
     imageTitle: "Random Programming gif" # optional
-    imageWidth: 150 # custom size
-    imageHeight: 120 # custom size
+    imageWidth: 300 # custom size
+    imageHeight: 200 # custom size
+
+  # profileMode:
+  #   enabled: true
+  #   title: "👋🏻 Hi, I'm Tanmay!" # optional default will be site title
+  #   subtitle: "Computer Programmer"
+  #   imageUrl: "https://media1.giphy.com/media/Bzzb92NKwUOj0FjQOd/giphy.gif?cid=ecf05e47mqaevucni02y58st0860bthng1roofds5nawno3u&ep=v1_gifs_search&rid=giphy.gif&ct=g" # optional
+  #   imageTitle: "Random Programming gif" # optional
+  #   imageWidth: 300 # custom size
+  #   imageHeight: 200 # custom size
     # buttons:
     #   - name: Archive
     #     url: "/archive"

diff --git a/layouts/partials/home_info.html b/layouts/partials/home_info.html
@@ -0,0 +1,43 @@
+{{- with site.Params.homeInfoParams }}
+<article class="first-entry home-info">
+    {{- if .imageUrl -}}
+        {{- $img := "" }}
+        {{- if not (urls.Parse .imageUrl).IsAbs }}
+            {{- $img = resources.Get .imageUrl }}
+        {{- end }}
+        {{- if $img }}
+            {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
+            {{- if hugo.IsExtended -}}
+                {{- $processableFormats = $processableFormats | append "webp" -}}
+            {{- end -}}
+            {{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
+            {{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
+                {{- if (not (and (not .imageHeight) (not .imageWidth))) }}
+                    {{- $img = $img.Resize (printf "%dx%d" .imageWidth .imageHeight) }}
+                {{- else if .imageHeight }}
+                    {{- $img = $img.Resize (printf "x%d" .imageHeight) }}
+                {{ else if .imageWidth }}
+                    {{- $img = $img.Resize (printf "%dx" .imageWidth) }}
+                {{ else }}
+                    {{- $img = $img.Resize "150x150" }}
+                {{- end }}
+            {{- end }}
+            <img draggable="false" src="{{ $img.Permalink }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}"
+                height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
+        {{- else }}
+        <img draggable="false" src="{{ .imageUrl | absURL }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}"
+            height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
+        {{- end }}
+    {{- end }}
+    <header class="entry-header">
+        <h1>{{ .Title | markdownify }}</h1>
+    </header>
+    <div class="entry-content">
+        <p>{{ .Content | safeHTML }}</p>
+        <!-- <p>Click on about to know more.</p> -->
+    </div>
+    <footer class="entry-footer">
+        {{ partial "social_icons.html" (dict "align" site.Params.homeInfoParams.AlignSocialIconsTo) }}
+    </footer>
+</article>
+{{- end -}}