Skip to content

Commit f1d5129

Browse files
ritamtbsilvaritamtbsilva
committed
update working version
1 parent 2f2614c commit f1d5129

2 files changed

Lines changed: 52 additions & 121 deletions

File tree

‎README.md‎

Lines changed: 51 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,122 @@
11
# Disease Transcriptomics Lab — Website
22

3-
> Built with [Claude Sonnet 4.6](https://www.anthropic.com/claude) (Anthropic).
4-
> All scientific content and logos belong to the Disease Transcriptomics Lab.
5-
6-
---
7-
8-
## Overview
9-
103
Static website for the **Disease Transcriptomics Lab** at NOVA Medical School, Lisbon.
11-
Hosted on **GitHub Pages** at `https://diseasetranscriptomicslab.github.io` (or a custom domain).
4+
Hosted on **GitHub Pages** at [`https://nmoraislab.github.io`](https://nmoraislab.github.io).
125

136
---
147

15-
## File Architecture
8+
## File structure
169

1710
```
1811
nmoraislab.github.io/
1912
│
20-
├── index.html ← Shell: nav + section placeholders + footer
21-
│ (do not put content here — edit sections/ instead)
13+
├── index.html ← Shell: nav, section placeholders, funding block, footer
14+
│ (edit section content in sections/ instead)
2215
├── css/
2316
│ └── styles.css ← All design tokens, layout, and component styles
24-
│
2517
├── js/
26-
│ └── main.js ← Section loader · Nav · Animations · Bluesky feed
18+
│ └── main.js ← Section loader · nav · animations · Bluesky feed
2719
│
28-
├── sections/ ← ★ EDIT CONTENT HERE ★
20+
├── sections/ ← ★ Edit content here ★
2921
│ ├── hero.html ← Hero / landing section
30-
│ ├── about.html ← About the lab + lab photo
22+
│ ├── about.html ← About the lab + graphical abstract
3123
│ ├── team.html ← PI card + team member cards
3224
│ ├── software.html ← Web apps, R packages, tools in development
33-
│ ├── publications.html ← Selected publications list
34-
│ ├── news.html ← Social follow buttons (Bluesky feed is auto-loaded)
25+
│ ├── publications.html ← Selected publications (year-grouped timeline)
26+
│ ├── news.html ← Social buttons; Bluesky feed is auto-loaded
27+
│ ├── outreach.html ← Science communication games
3528
│ ├── alumni.html ← Former lab members
3629
│ └── location.html ← Address + OpenStreetMap embed
3730
│
38-
└── assets/
39-
├── logos/
40-
│ ├── logo-icon.png ← DNA icon (white on transparent) — nav + footer
41-
│ └── logo-full-dark.png ← Full logo (white on transparent) — hero
42-
└── photos/ ← Team photos (add here, reference in team.html)
31+
├── assets/
32+
│ ├── logos/
33+
│ │ ├── logo-icon.png ← DNA icon (white on transparent) — nav + footer
34+
│ │ ├── logo-icon-black.png ← Same icon inverted — favicon on light-mode tabs
35+
│ │ ├── logo-full-dark.png ← Full logo (white on transparent) — hero
36+
│ │ └── funding/ ← Funder logos (EMBO, FCT, BIOMICS, EU flag)
37+
│ └── photos/ ← Team + group photos
38+
│
39+
└── games/
40+
└── monster-scientists.html ← Outreach game (bilingual EN/PT)
4341
```
4442

4543
---
4644

47-
## How It Works
45+
## How it works
4846

49-
`index.html` is a **shell** — it contains only the navigation, placeholder `<div>`s, and the footer. When the page loads, `js/main.js` fetches each `sections/*.html` file over HTTP and injects it into the matching placeholder. This keeps every section independently editable.
47+
`index.html` is a shell containing only the nav, empty `<div>` placeholders, a static funding block, and the footer. On page load, `js/main.js` fetches each `sections/*.html` file and injects it into its placeholder — keeping every section independently editable without touching `index.html`.
5048

5149
---
5250

53-
### ⚠ Local preview — you must use an HTTP server
51+
## Local preview
5452

5553
> **Opening `index.html` directly in your browser will show a blank page.**
56-
> Browsers block `fetch()` on `file://` for security. This is expected behaviour.
57-
58-
**To preview the site locally:**
59-
60-
1. Open a **Terminal** (on Mac: Spotlight → "Terminal")
61-
2. Navigate to the site folder:
62-
```bash
63-
cd /path/to/nmoraislab.github.io
64-
```
65-
3. Start a local server:
66-
```bash
67-
python3 -m http.server 8000
68-
```
69-
4. Open **[http://localhost:8000](http://localhost:8000)** in your browser
70-
71-
If you see a yellow banner at the top of the page, you opened the file directly — follow the instructions in the banner.
54+
> Browsers block `fetch()` on `file://`. You need a local HTTP server.
7255
73-
> **On GitHub Pages (HTTPS), everything works automatically** — no server needed after pushing.
56+
```bash
57+
cd /path/to/diseasetranscriptomicslab.github.io
58+
python3 -m http.server 8000
59+
```
7460

75-
---
61+
Then open **[http://localhost:8000](http://localhost:8000)**. A yellow banner appears automatically if you've opened the file directly.
7662

7763
---
7864

79-
## How to Edit Content
80-
81-
Open the relevant file in `sections/`, make your changes, then commit and push.
65+
## Editing content
8266

8367
| File | What to edit |
8468
|---|---|
85-
| `sections/team.html` | Add/remove team members, update names, emails, roles, ORCID, social links, bios |
69+
| `sections/team.html` | Add/remove members, update names, roles, emails, bios, fun facts, social links |
70+
| `sections/publications.html` | Add papers grouped by year |
8671
| `sections/software.html` | Add tools, update links and descriptions |
87-
| `sections/publications.html` | Add papers (newest first) |
88-
| `sections/alumni.html` | Add former members (newest departure first) |
89-
| `sections/about.html` | Lab description, replace lab photo placeholder |
72+
| `sections/alumni.html` | Add former members (most recent departure first) |
73+
| `sections/outreach.html` | Add/update science communication games |
74+
| `sections/about.html` | Lab description, graphical abstract |
9075
| `sections/hero.html` | Headline, tagline, affiliation badges |
91-
| `sections/news.html` | Social button URLs (Bluesky/LinkedIn/X); Bluesky feed is automatic |
92-
| `sections/location.html` | Address text, map pin coordinates |
76+
| `sections/news.html` | Social button URLs (Bluesky feed is automatic) |
77+
| `sections/location.html` | Address text, map pin |
78+
| `index.html` | Funding logos (static block near the footer) |
9379

9480
### Adding a team member
9581

9682
Copy any `.member-card` block in `sections/team.html` and update:
9783
- Name, flag emoji, role badge
98-
- Bio text (`.member-bio`)
99-
- Research interests (`.member-interests`)
84+
- Bio (`.member-bio`), research interests (`.member-interests`), fun fact (`.member-fun-fact`)
10085
- Email `href` and display text
101-
- Social links: ORCID, LinkedIn, Bluesky, GitHub (use `href="#"` to hide unused ones)
102-
- Photo: replace `<div class="member-photo-placeholder">XX</div>` with `<img src="assets/photos/firstname-lastname.jpg" />`
86+
- Social links (ORCID, LinkedIn, Bluesky, GitHub — use `href="#"` to hide unused ones)
87+
- Photo: replace `<div class="member-photo"><img src="..." /></div>` with your image path
88+
89+
Photos are automatically cropped to a consistent `5/4` aspect ratio — any size works.
10390

10491
### Adding a publication
10592

106-
Copy a `.pub-item` block in `sections/publications.html` and update the year, title, DOI link, authors, journal, and tags.
93+
Publications are grouped by year. Copy a `.pub-paper` block inside the matching `.pub-year-papers` container (or copy a full `.pub-year-group` block to start a new year). Keep years in reverse chronological order.
10794

10895
### Adding an alumni entry
10996

110-
Add an `<li class="alumni-item">` to the list in `sections/alumni.html`:
97+
Add an `<li class="alumni-item">` in `sections/alumni.html`:
11198
```html
11299
<li class="alumni-item">
113100
<a href="https://linkedin.com/in/..." target="_blank" rel="noopener">Full Name</a>
114101
<span class="alumni-meta">· Role · (2021–2025)</span>
115102
</li>
116103
```
117-
Keep entries ordered by most recent departure date.
118-
119-
---
120-
121-
## Bluesky Live Feed
122-
123-
The News section automatically fetches and displays the 6 most recent posts from `@nmoraislab.bsky.social` using the **public AT Protocol API** — no account or API key required.
124-
125-
- Posts include images when present (single, pair, or grid layout)
126-
- Reposts are filtered out (original posts only)
127-
- To change the account, edit the `HANDLE` constant at the top of `loadBlueskyFeed()` in `js/main.js`
128-
129-
---
130-
131-
## Design Tokens
132-
133-
To retheme the site, edit the CSS variables at the top of `css/styles.css`:
134-
135-
```css
136-
:root {
137-
--navy: #0D1B2A; /* dark background, headings */
138-
--teal: #0D9488; /* accent colour */
139-
--teal-light: #14B8A6; /* hover states */
140-
--slate: #64748B; /* secondary text */
141-
--fog: #F0F4F8; /* alternate section bg */
142-
}
143-
```
144104

145105
---
146106

147-
## Deploying to GitHub Pages
107+
## Bluesky feed
148108

149-
1. Push the repository to GitHub.
150-
2. Go to **Settings → Pages → Source → Deploy from branch → main → / (root)**.
151-
3. The site is live at `https://YOUR_ORG.github.io` within ~2 minutes.
152-
153-
### Custom domain
154-
155-
Create a `CNAME` file in the repository root containing your domain:
156-
```
157-
lab.nmoraislab.org
158-
```
159-
Add DNS **A records** pointing to GitHub's IPs:
160-
```
161-
185.199.108.153
162-
185.199.109.153
163-
185.199.110.153
164-
185.199.111.153
165-
```
166-
And a **CNAME record**: `www` → `YOUR_ORG.github.io`.
167-
168-
Enable **Enforce HTTPS** in GitHub → Settings → Pages.
109+
The News section automatically fetches the most recent posts from `@nmoraislab.bsky.social` via the public AT Protocol API (no key required). Reposts are filtered out. To change the account, edit the `HANDLE` constant at the top of `loadBlueskyFeed()` in `js/main.js`.
169110

170111
---
171112

172-
## Updating the Site
173-
174-
After any edit, commit and push to `main`. GitHub Pages redeploys automatically within ~60 seconds.
113+
## Deploying
175114

176-
For non-Git users: use the **GitHub web editor** (click a file → pencil icon ✏ → edit → Commit changes).
177-
178-
---
115+
Push to `main` — GitHub Pages redeploys automatically within ~60 seconds.
179116

180-
## Credits
117+
**First-time setup:** Settings → Pages → Source → Deploy from branch → `main` → `/ (root)`.
181118

182-
- Website built with **Claude Sonnet 4.6** (Anthropic, 2025)
183-
- Fonts: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) + [DM Sans](https://fonts.google.com/specimen/DM+Sans) via Google Fonts
184-
- Map: [OpenStreetMap](https://www.openstreetmap.org) (free, no API key)
185-
- Social feed: [AT Protocol public API](https://docs.bsky.app) (free, no key)
186-
- Hosting: [GitHub Pages](https://pages.github.com)
187-
- Icons: inline SVG (Simple Icons for brand logos)
188-
- Lab logo: Disease Transcriptomics Lab
119+
For non-Git users: edit any file on GitHub (click it → pencil icon ✏ → Commit changes).
189120

190121
---
191122

‎sections/outreach.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ <h3 class="outreach-card-title">Monster Scientists</h3>
7171

7272
<div class="outreach-card-body">
7373
<h3 class="outreach-card-title">Árvore Inteligente</h3>
74-
<p class="outreach-card-subtitle">The Á.I. in AI &nbsp;·&nbsp; Decision Trees</p>
74+
<p class="outreach-card-subtitle"> Decision Trees</p>
7575

7676
<p class="outreach-card-desc">
7777
How does TikTok know exactly what video you want to watch next?

0 commit comments

Comments
 (0)