Personal Website

Dr. Ajay Kumar Koli \(\cdot\) 2nd SARA Bootcamp

🙄 Why Personal Website⁉️

1. Your digital presence already exists — you just don’t control it. Google your own name. Whatever comes up — a LinkedIn profile, an old social media post, someone else’s mention of you — that’s your reputation by default. A personal website lets you own that narrative instead of leaving it to algorithms and third-party platforms.

2. It’s a living portfolio that works while you sleep. Whether you’re a developer, designer, teacher, or accountant, a personal website signals seriousness. Recruiters, clients, and collaborators will look you up. A well-crafted site tells your story better than a resume ever could — and it’s available 24/7 without you having to say a word.

3. Social media platforms are rented land. Twitter, LinkedIn, Instagram — they change their rules, throttle your reach, or simply disappear. Remember MySpace? Vine? Your personal website is yours permanently. No algorithm decides who sees it. No platform can delete your account.

4. It forces you to think clearly about who you are. Writing an “About Me” page, listing your work, articulating what you believe — it’s unexpectedly clarifying. Most people never sit down and answer “what do I actually do and why does it matter?” A personal website makes you do that work.

5. The barrier is lower than ever. You don’t need to know how to code. Tools like Notion, Framer, or Squarespace mean you can have something live in an afternoon. The cost of not having one — missed opportunities, weak first impressions — far outweighs the effort.

6. It compounds over time. Every post you write, project you document, or idea you share builds a body of work. Five years from now, that archive is invaluable — to future employers, to your own growth, to people you haven’t met yet who will find you through a search.

Create
Project

Create a GitHub Repository

Copy Repo Link

Create RStudio Version Control Project

Paste GitHub URL Link here

Create
Project Files

Understanding the Project Structure

website-ajay/
├── _quarto.yml
├── index.qmd
├── about.qmd
└── styles.css

1. _quarto.yml is a Configuration file for your website.

2. index.qmd creates the homepage of your website.

3. about.qmd ia an example about page.

4. styles.css is styling your website using customs CSS.

Create _quarto.yml File

Select Text File

Change Extension

Edit _quarto.yml

project: 
  type: website

website:
  title: "Dr. Ajay Kumar Koli"

Caution

1. The file extension is .yml and the selected extension was YAML.

2. Refresh the RStudio Project to see the Build option.

Create the Homepage

Edit index.qmd

---
title: "Dr. Ajay Kumar Koli"
subtitle: "Data Science Educator <br>Co-founder of SARA"
image: images/ajay.jpeg
about:
  template: trestles
  links:
    - icon: github
      text: GitHub
      href: https://github.com/sara-institute
    - icon: linkedin
      text: LinkedIn
      href: https://www.linkedin.com/in/ajay-kumar-koli/
    - icon: twitter
      text: Twitter
      href: https://www.linkedin.com/in/ajay-kumar-koli/
---

Ajay Kumar is the Chief Data Scientist at Wengo Analytics. 
When not innovating on data platforms, Finley enjoys spending time
unicycling and playing with her pet iguana.

## Education

University of California, San Diego | San Diego, CA
PhD in Mathematics | Sept 2011 - June 2015

Macalester College | St. Paul, MN
B.A in Economics | Sept 2007 - June 2011

## Experience

Wengo Analytics | Head Data Scientist | April 2018 - present

GeoScynce | Chief Analyst | Spet 2012 - April 2018

Built-In Templates, edit index.qmd

• jolla

• trestles

• solana

• marquee

• broadside

---
about:
  template: trestles
---

Website Navigation Bar

Edit _quarto.yml

project: 
  type: website

website:
  title: "Dr. Ajay Kumar Koli"
  navbar:
    left:
      - text: "Home"
        href: index.qmd
      - text: "About"
        href: about.qmd
    tools:
      - icon: github
        href: https://github.com/koliajaykr
      - icon: linkedin
        href: https://www.linkedin.com/in/ajay-kumar-koli/
      - icon: twitter
        href: https://x.com/ajay_kolii
  page-footer: 
    left: "Copyright 2021, Norah Jones"
    right: "Made with Quarto & 💙"

🤯 Your Turn

Add an “About” Page to Your Quarto Website

💡 Hints

• Create a new file called about.qmd

• Use href: to add it to the navbar in _quarto.yml

• A clickable email link in Markdown looks like: [text](mailto:you@example.com)

✅ Answer

Step 1 - Create about.qmd

---
title: "About"
---

Hi, I'm Ajay Kumar, a data scientist based in New York.
I specialize in R, machine learning, and data visualization.
Feel free to reach out — I love connecting with like-minded people!

📧 [koliajaykumar@gmail.com](mailto:koliajaykumar@gmail.com)

✅ Answer

Step 2 - Update _quarto.yml

project:
  type: website

website:
  title: "Ajay Kumar"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: about.qmd
        text: About
        

Themes; edit _quarto.yml

format:
  html:
    theme: cosmo

theme: default # bootstrap 5 default
theme: cosmo   # cosmo bootswatch theme
theme: pandoc  # pandoc default html treatment
theme: none    # no theme css added to document

Customise Website Appearance

Customize Colors; edit _quarto.yml

“If you are using a Bootstrap theme or the Pandoc theme, there are a set of options you can provide in document metadata to customize its appearance.”

• fontcolor: The main color for text on the site.

• linkcolor: Color of the links.

• backgroundcolor: Background color of the whole site.

• monobackgroundcolor: Background color for code chunk.

Colors; edit _quarto.yml

format:
  html:
    theme: cosmo
    fontcolor: darkgreen
    linkcolor: black
    backgroundcolor: "#ECFFDC"
    monobackgroundcolor: pink

Customize Fonts; edit _quarto.yml

format:
  html:
    theme: cosmo
    fontcolor: darkgreen
    linkcolor: black
    backgroundcolor: "#ECFFDC"
    monobackgroundcolor: pink
    mainfont: "monospace"

mainfont - Sets the font-family property for the document. Also try sans-serif, serif, cursive or system-ui

Your Style/Theme using CSS

• Cascading Style Sheets (CSS) is a style sheet language.

• CSS is used for specifying the presentation and styling of a document written in a markup language such as HTML

Add Style File; edit _quarto.yml

format:
  html:
    theme: cosmo
    css: styles.css

Codes for the CSS file

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

Imagine a world where all websites are responsive

🚀 Launch Your Website

Push Your Files to GitHub

Tick First Box \(\rightarrow\) Ctrl + a \(\rightarrow\) Tick Second Box

Select Files and Click Commit

Write Commit Message and click Commit

Let it Run and Close

Branch Ahead Origin and click Push

Let it Run, Close Commit Dialog Boxes

Check GitHub Repo for Latest Updates

Open Netlify Website

Log-in using your github user-name and password.

Netlify

Add New Site \(\rightarrow\) Import an Existing Project \(\rightarrow\) Choose GitHub

Netlify

• In Publish Directory box write _site

• Deploy website-ajay \(\rightarrow\) Site deploy in progress

Site Published, Configure Site

Change Site Name

Site Thumbnail with updated URL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.