Mrinmayi Kulkarni, Ph.D.

(she/her)

Behavioural and Data Scientist

This website!

Building a personal website and portfolio

This website has been a long time coming. In grad school, my friends and I had tried to put together a blog. The point was to document the inscrutable errors we had encountered in the various tools we used for analysing behavioural and brain imaging data, and our solutions and hacks for them. We put together a bunch of content in a Google Doc. But life happened, and we never go around to converting it into a blog.

The idea

As I was working on various projects in my postdoc, I started to see that research studies have many different aspects. One person might be interested in the research results, another might want to know about the background literature and study development, and a third might be curious about the technical aspects like the statistical analyses. Additionally, during the pandemic, I realised that scientists have the responsibility to share not only scientific findings, but also the scientific process with the general public in a way that doesn't require them to have a PhD.

Over time, the idea of this blog evolved, and instead of focusing only on errors and problems, I decided to use it as a platform to share the process and the findings of my research.

Shift in mindset: From static to interactive

I have a lot of experience writing scientific articles and delivering talks to scientific and non-scientific audiences. But these are specific kinds of content delivery. Scientific articles need to be written in a certain kind of language, and be organised in a specific way. Talks offer the opportnity for interactivity, but you, as the speaker, can control how the audience's attention is directed.

A web app is a different kind of beast. You lose control over how the user is going to navigate the content, and have to use UX tricks to guide their attention based on their agenda.

At the same time, an advantage of a web app is that all the information need not be presented in one go. The reader can click around, hover, and interact with the content to opt-in to receive the information. This has been the hardest thing to embrace, and then leverage. It still doesn't come naturally. I start by putting all the content of an article on the page before figuring out what information can be hidden behind XXXX. Then it takes many iterations and rounds of feedback from Sid before a project is ready to meet the world.

Putting the projects together

This was arguably, the most important section of the website. In my vision for this section I had three main requirements:

๐Ÿ—‚๏ธ

Modular structure: Information about a project should be broken up into separate articles - each addressing a different aspect of the research - so that the reader can focus on the aspect that was most interesting to them.

๐Ÿง‘๐Ÿฝโ€๐Ÿ”ฌ

Customisable information consumption: Each article describing a research project should have a technical version and a non-technical one. The reader should be able to choose how they want to consume the information. If you're a data-scientist without a ton of background about the cognitive neuroscience of memory, you can read the technical version of stats article, and the non-technical version of the study background.

๐Ÿ’ช๐Ÿฝ

Flexible setup: It should be easy for me to add new and different kinds of projects in the future.

Organisation of the Projects folder
๐Ÿ“ app
๐Ÿ“ Projects
๐Ÿ“„ page.tsx
๐Ÿ“ Articles
๐Ÿ“ [slug]
๐Ÿ“„ page.tsx
All articles are located within subfolders in the Articles folder. Articles are writen in .mdx files. MDX files offer the ease of writing in simple markdown format without having to bother with HTML code. At the same time, they offer toe flexibility of importing React components that allowed me to build interactivity. All assets required for a given article (illustrations, data, plots) are co-localised within the corresponding subfolder.
Organisation of the Articles folder
๐Ÿ“ Articles
๐Ÿ“ mem-control-study
๐Ÿ“„ sci.mdx
๐Ÿ“„ non-sci.mdx
๐Ÿ“„ ExperimentalDesign.tsx
...
๐Ÿ“ mem-control-results
๐Ÿ“„ sci.mdx
๐Ÿ“„ non-sci.mdx
๐Ÿ“„ EyemovementsData.json
๐Ÿ“„ EyemovementsBar.tsx
...

https://www.youtube.com/watch?v=qPsY4AKFlnM

My tech stack

Animationframer-motion
Plottingrecharts
ContentMDX
Styling & UITailwind CSS ยท Tailwind Typography ยท MUI ยท Base UI
HostingHetzner
FrameworkNext.js ยท React ยท TypeScript

Resources I found helpful when learning

Videos

Articles and tutorials