atraydixit.github.io/publications.html at main · asncd/atraydixit.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SZGFS13KK4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-SZGFS13KK4');
</script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdn.tailwindcss.com"></script>

<!-- Favicon -->
  <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="192x192" href="img/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="img/favicon/android-chrome-512x512.png">
  <link rel="icon" href="/img/favicon/favicon.ico" type="image/x-icon">


  <title>Oncko</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
   <style>
    .hidden-top {
      transform: translateY(-100%);
      transition: transform 0.3s ease-in-out;
    }

    @media (max-width: 768px) {
      #mainNavbar {
        display: none; /* Hide main navbar on small screens */
      }
    }

    /* Enforce bold text in all blue header links */
    #mainNavbar a,
    #mobileMenu a {
      font-weight: 700 !important;
    }
  </style>
</head>

<body>

 <!-- Top Bar -->
  <div id="topBar" class="bg-black w-full fixed top-0 left-0 z-50 h-32 flex justify-center items-center">
    <a href="https://www.oncko.com" class="h-auto">
      <img src="img/ONCKO-LOGO.svg" alt="onckologo" class="h-36 max-h-full w-auto">
    </a>
    <button id="menuToggle" class="text-white text-7xl absolute right-4 md:hidden" onclick="toggleMenu()">☰</button>
  </div>

  <!-- Navbar -->
  <nav id="mainNavbar" class="bg-gradient-to-r from-[#CEE444] to-[#68e9ca] w-full md:fixed md:top-32 left-0 z-40 p-4 md:flex hidden justify-evenly">
    <ul class="flex w-full justify-evenly text-2xl font-bold">
      <li><a href="https://www.oncko.com" class="text-black font-bold px-4 py-2 hover:bg-white focus:bg-white active:bg-white hover:border hover:border-black rounded-lg">Home</a></li>
    <li class="relative group">
      <a href="https://www.oncko.com/team" class="text-black font-bold px-4 py-2 hover:bg-white hover:border hover:border-black rounded-lg">Us ▾</a>
      <ul class="absolute hidden group-hover:block group-hover:border group-hover:border-black bg-white shadow-lg rounded-lg mt-1 w-40 z-50">
        <li><a href="https://www.oncko.com/team#team-section" class="block px-4 py-2 text-black hover:bg-gray-100 rounded-lg">Team</a></li>
        <li><a href="https://www.oncko.com/team#advisors-section" class="block px-4 py-2 text-black hover:bg-gray-100 rounded-lg">Advisors</a></li>
      </ul>
    </li>
      <li><a href="https://www.oncko.com/publications" class="text-black font-bold px-4 py-2 hover:bg-white hover:border hover:border-black rounded-lg">Publications</a></li>
      <li><a href="https://www.oncko.com/contact" class="text-black font-bold px-4 py-2 hover:bg-white hover:border hover:border-black rounded-lg">Contact</a></li>
    </ul>
  </nav>


  <!-- Mobile Menu -->
  <ul id="mobileMenu" class="hidden flex-col space-y-2 bg-gradient-to-r from-[#CEE444] to-[#68e9ca] p-4 fixed top-32 left-0 w-full z-[100] md:hidden" style="pointer-events: auto;">
    <li><a href="https://www.oncko.com/" class="text-black text-2xl font-bold px-2 py-2 hover:bg-white focus:bg-white active:bg-white rounded-lg block">Home</a></li>
    <li><a href="https://www.oncko.com/team" class="text-black text-2xl font-bold px-2 py-2 hover:bg-white focus:bg-white active:bg-white rounded-lg block">Team</a></li>
    <li><a href="https://www.oncko.com/contact" class="text-black text-2xl font-bold px-2 py-2 hover:bg-white focus:bg-white active:bg-white rounded-lg block">Contact</a></li>
  </ul>

<style>
  #starCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10; /* Behind content */
    width: 100%;
    height: 100%;
  }
</style>


<canvas class="filter brightness-100" id="starCanvas"></canvas>
<main class="scroll-pt-40 max-w-7xl mx-auto px-4 py-10 pt-32 md:pt-36">
    <section class="text-center mb-1">
    <div class="bg-black/0">
      <h1 id="pubs" class="scroll-mt-60 text-5xl font-bold mb-1">Our Publications</h1>
    </div>
    </section>

<div class="flex flex-wrap justify-center grid gap-6 md:grid-cols-3 lg:grid-cols-4">
      <!-- Publication Card -->
      <div class="max-w-sm bg-white/95 border-4 border-slate-500 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col">
        <img class="h-48 w-full object-contain border-b border-slate-500" src="img/perturbseq.png" alt="Publication 1" class="w-full object-contain">
        <div class="p-4 flex flex-col h-full">
          <h3 class="text-xl text-slate-700 font-semibold mb-2">Perturb-seq</h3>
          <p class="text-sm text-gray-500 mb-4"><u>Dixit</u>, Parnas,....Regev</p>
          <p class="text-sm text-gray-700 mb-4">Massive perturbation + scRNA-seq screens. Limited combo scale</p>
          <a href="https://www.cell.com/cell/fulltext/S0092-8674(16)31610-5" class="text-blue-600 hover:underline font-bold mt-auto">Read More</a>
        </div>
      </div>
      <!-- Repeat the card for other publications -->
        <div class="max-w-sm  bg-white/95 border-4 border-slate-500 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col">
         <img class="h-48 w-full object-contain border-b border-slate-500" src="img/shuffle.png" alt="Publication 2" class="w-full object-contain">
        <div class="p-4 flex flex-col h-full">
             <h3 class="text-xl text-slate-700 font-semibold mb-2">Shuffle-seq</h3>
          <p class="text-sm text-gray-500 mb-4"><u>Dixit</u>, Feldman, Kuksenko, Regev</p>
          <p class="text-sm text-gray-700 mb-4">Combo screen tech scalable to 1B</p>
          <a href="https://www.biorxiv.org/content/10.1101/861443v1" class="text-blue-600 hover:underline font-bold mt-auto">Read More</a>
        </div>
      </div>


      <!-- Add more publication cards here -->
      <div class="max-w-sm bg-white/95 border-4 border-slate-500 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col">
        <img class="h-48 w-full object-contain border-b border-slate-500" src="img/multidrug.png" alt="Publication 3" class="w-full object-contain">
        <div class="p-4 flex flex-col h-full">
          <h3 class="text-xl text-slate-700 font-semibold mb-2">Multi-drug toxicity</h3>
          <p class="text-sm text-gray-500 mb-4">Anastopoulos...<u>Dixit</u></p>
          <p class="text-sm text-gray-700 mb-4">Predict combo toxicity using real world patient data</p>
          <a href="https://www.mdpi.com/1660-4601/18/5/2600" class="text-blue-600 hover:underline font-bold mt-auto">Read More</a>
        </div>
      </div>

      <!-- Add more publication cards here -->
      <div class="max-w-sm bg-white/95 border-4 border-slate-500 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col">
        <img class="h-48 w-full object-contain border-b border-slate-500" src="img/crisprxresistance.png" alt="Publication 4" class="w-full object-contain">
        <div class="p-4 flex flex-col h-full">
          <h3 class="text-xl text-slate-700 font-semibold mb-2">Combo cancer cures</h3>
          <p class="text-sm text-gray-500 mb-4"><u>Palmer</u>...Sorger</p>
          <p class="text-sm text-gray-700 mb-4">Successful cancer cures have low cross resistance in vitro</p>
          <a href="https://elifesciences.org/articles/50036" class="text-blue-600 hover:underline font-bold mt-auto">Read More</a>

        </div>
      </div>
    </div>
  </main>
</main>

  <script src="script.js"></script>
    <script>
    function toggleMenu() {
      document.getElementById("mobileMenu").classList.toggle("hidden");
    }

    let lastScrollTop = 0;
    window.addEventListener("scroll", function() {
      let topBar = document.getElementById("topBar");
      let scrollTop = window.scrollY || document.documentElement.scrollTop;

      topBar.classList.remove("hidden-top");

      lastScrollTop = scrollTop;
    });
  </script>
</body>
</html>