Skip to content

Commit 64c2517

Browse files
ritamtbsilvaritamtbsilva
committed
lab group photo not showing up
1 parent 47a163a commit 64c2517

11 files changed

Lines changed: 552 additions & 1526 deletions

File tree

‎README.md‎

Lines changed: 138 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,192 @@
1-
# NMorais Lab — Disease Transcriptomics Lab Website
1+
# Disease Transcriptomics Lab — Website
22

3-
> **Built with the assistance of [Claude Sonnet 4.6](https://www.anthropic.com/claude) by Anthropic.**
4-
> The initial codebase, structure, and design were generated and refined using Claude Sonnet 4.6 as a senior web development assistant. All scientific content and logos belong to the NMorais Lab.
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.
55
66
---
77

88
## Overview
99

10-
A static, single-repository website for the **Disease Transcriptomics Lab (NMorais Lab)** at NOVA Medical School, Lisbon. Designed to be hosted on **GitHub Pages** with a custom domain.
10+
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).
1112

1213
---
1314

1415
## File Architecture
1516

1617
```
17-
nmoraislab/
18-
│
19-
├── index.html ← Main entry point — assembles all sections via <script> includes
18+
nmoraislab.github.io/
2019
│
20+
├── index.html ← Shell: nav + section placeholders + footer
21+
│ (do not put content here — edit sections/ instead)
2122
├── css/
22-
│ └── styles.css ← All design tokens, layout, and component styles
23+
│ └── styles.css ← All design tokens, layout, and component styles
2324
│
2425
├── js/
25-
│ └── main.js ← Navigation, scroll animations, mobile menu
26+
│ └── main.js ← Section loader · Nav · Animations · Bluesky feed
2627
│
27-
├── sections/
28-
│ ├── hero.html ← Hero / landing section
29-
│ ├── about.html ← About the lab + mission
30-
│ ├── team.html ← PI card + team member cards ← EDIT TEAM HERE
31-
│ ├── software.html ← Web apps + software tools ← EDIT TOOLS HERE
32-
│ ├── publications.html ← Selected publications list ← EDIT PUBS HERE
33-
│ └── news.html ← Social media feed widget ← EDIT NEWS HERE
28+
├── sections/ ← ★ EDIT CONTENT HERE ★
29+
│ ├── hero.html ← Hero / landing section
30+
│ ├── about.html ← About the lab + lab photo
31+
│ ├── team.html ← PI card + team member cards
32+
│ ├── 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)
35+
│ ├── alumni.html ← Former lab members
36+
│ └── location.html ← Address + OpenStreetMap embed
3437
│
3538
└── assets/
36-
└── logos/
37-
├── logo-icon.png ← DNA icon (white, transparent bg) — used in nav
38-
└── logo-full-dark.png ← Full logo (white text, transparent bg) — used in hero
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)
3943
```
4044

4145
---
4246

43-
## How to Edit Content (No Coding Required)
47+
## How It Works
48+
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.
50+
51+
---
52+
53+
### ⚠ Local preview — you must use an HTTP server
54+
55+
> **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.
72+
73+
> **On GitHub Pages (HTTPS), everything works automatically** — no server needed after pushing.
74+
75+
---
76+
77+
---
78+
79+
## How to Edit Content
4480

45-
Each section lives in its own file inside `/sections/`. Open the relevant file in any text editor (Notepad, TextEdit, VS Code) and look for the `<!-- EDIT ... HERE -->` comments.
81+
Open the relevant file in `sections/`, make your changes, then commit and push.
4682

4783
| File | What to edit |
4884
|---|---|
49-
| `sections/team.html` | Add/remove team member cards, update names, emails, roles, social links |
50-
| `sections/software.html` | Add new tools, update links, change descriptions |
51-
| `sections/publications.html` | Add publications in reverse chronological order |
52-
| `sections/news.html` | Paste your Curator.io / Elfsight social feed embed code |
53-
| `sections/about.html` | Update lab description, replace lab photo |
54-
| `sections/hero.html` | Edit headline and hero tagline |
85+
| `sections/team.html` | Add/remove team members, update names, emails, roles, ORCID, social links, bios |
86+
| `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 |
90+
| `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 |
93+
94+
### Adding a team member
95+
96+
Copy any `.member-card` block in `sections/team.html` and update:
97+
- Name, flag emoji, role badge
98+
- Bio text (`.member-bio`)
99+
- Research interests (`.member-interests`)
100+
- 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" />`
103+
104+
### Adding a publication
105+
106+
Copy a `.pub-item` block in `sections/publications.html` and update the year, title, DOI link, authors, journal, and tags.
107+
108+
### Adding an alumni entry
109+
110+
Add an `<li class="alumni-item">` to the list in `sections/alumni.html`:
111+
```html
112+
<li class="alumni-item">
113+
<a href="https://linkedin.com/in/..." target="_blank" rel="noopener">Full Name</a>
114+
<span class="alumni-meta">· Role · (2021–2025)</span>
115+
</li>
116+
```
117+
Keep entries ordered by most recent departure date.
55118

56119
---
57120

58-
## Hosting on GitHub Pages (Recommended)
59-
60-
### Step 1 — Create a repository
61-
1. Go to [github.com](https://github.com) and create a **new repository**.
62-
2. Name it `nmoraislab.github.io` (for a root URL) **or** any name like `website` (the site will be at `yourusername.github.io/website`).
63-
3. Set visibility to **Public**.
64-
65-
### Step 2 — Upload the files
66-
Upload the entire folder contents (all files and folders) to the repository root.
67-
Or use Git:
68-
```bash
69-
git init
70-
git add .
71-
git commit -m "Initial lab website"
72-
git remote add origin https://github.com/YOUR_ORG/nmoraislab.github.io.git
73-
git push -u origin main
74-
```
121+
## Bluesky Live Feed
75122

76-
### Step 3 — Enable GitHub Pages
77-
1. Go to **Settings → Pages**.
78-
2. Under *Source*, select **Deploy from a branch → main → / (root)**.
79-
3. Click **Save**. Your site will be live at `https://YOUR_ORG.github.io` within ~2 minutes.
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.
80124

81-
### Step 4 — Connect a custom domain (e.g. `lab.nmoraislab.org`)
82-
1. In the repository root, create a file named exactly `CNAME` containing just your domain:
83-
```
84-
lab.nmoraislab.org
85-
```
86-
2. In your DNS provider, add these **A records** pointing to GitHub's servers:
87-
```
88-
185.199.108.153
89-
185.199.109.153
90-
185.199.110.153
91-
185.199.111.153
92-
```
93-
3. Also add a **CNAME record**: `www` → `YOUR_ORG.github.io`
94-
4. Back in GitHub → Settings → Pages → Custom domain, enter `lab.nmoraislab.org` and enable **Enforce HTTPS**.
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
95132

96-
DNS propagation takes up to 48 hours. After that, HTTPS is automatic via Let's Encrypt.
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+
```
97144

98145
---
99146

100-
## Social Feed (News Section)
147+
## Deploying to GitHub Pages
148+
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
101154

102-
The news section is designed to host a **Curator.io** embed (free tier supports ~25 posts).
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`.
103167

104-
1. Sign up at [curator.io](https://curator.io)
105-
2. Connect your **LinkedIn Company page** and/or **Bluesky** account
106-
3. Create a feed, style it to match the site (teal/white palette)
107-
4. Copy the two-line embed code and paste it into `sections/news.html`
108-
Look for: `<!-- PASTE CURATOR.IO EMBED CODE HERE -->`
168+
Enable **Enforce HTTPS** in GitHub → Settings → Pages.
109169

110170
---
111171

112172
## Updating the Site
113173

114-
After any edit, simply **commit and push** to the `main` branch on GitHub. Pages re-deploys automatically within ~60 seconds.
174+
After any edit, commit and push to `main`. GitHub Pages redeploys automatically within ~60 seconds.
115175

116-
For non-Git users: use the **GitHub web editor** (click any file → pencil icon ✏️ → edit → Commit changes).
176+
For non-Git users: use the **GitHub web editor** (click a file → pencil icon ✏ → edit → Commit changes).
117177

118178
---
119179

120180
## Credits
121181

122-
- Website generated with **Claude Sonnet 4.6** (Anthropic, 2025)
182+
- Website built with **Claude Sonnet 4.6** (Anthropic, 2025)
123183
- Fonts: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) + [DM Sans](https://fonts.google.com/specimen/DM+Sans) via Google Fonts
124-
- Social feed: [Curator.io](https://curator.io)
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)
125186
- Hosting: [GitHub Pages](https://pages.github.com)
126-
- Lab logo design: NMorais Lab
187+
- Icons: inline SVG (Simple Icons for brand logos)
188+
- Lab logo: Disease Transcriptomics Lab
127189

128190
---
129191

130-
*NMorais Lab · Disease Transcriptomics · NOVA Medical School · GIMM · Lisbon, Portugal*
192+
*Disease Transcriptomics Lab · NOVA Medical School · Lisboa, Portugal*

‎assets/photos/group_photo.jpeg‎

3.08 MB
Loading

‎css/styles.css‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -356,31 +356,22 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
356356

357357
.lab-photo-wrap {
358358
width: 100%;
359+
height: 420px; /* controls how tall the photo strip appears */
359360
border-radius: var(--radius);
360361
overflow: hidden;
361-
aspect-ratio: 16/7;
362-
background: linear-gradient(135deg, #e0eeec 0%, #c8e0db 100%);
363-
border: 2px dashed var(--border);
364-
display: flex;
365-
align-items: center;
366-
justify-content: center;
367-
flex-direction: column;
368-
gap: .75rem;
369-
color: var(--slate);
370-
text-align: center;
371-
padding: 2rem;
372362
}
373363

374-
/* When you add a real photo, it renders as a full-width img */
375364
.lab-photo-wrap img {
376365
width: 100%;
377366
height: 100%;
378-
object-fit: cover;
379-
border-radius: 0;
367+
object-fit: cover; /* crops to fill — no stretching */
368+
object-position: center; /* centre the crop; change to "top" if needed */
369+
display: block;
380370
}
381371

382-
.lab-photo-wrap svg { width: 44px; height: 44px; opacity: .35; }
383-
.lab-photo-wrap p { font-size: .85rem; line-height: 1.5; }
372+
@media (max-width: 640px) {
373+
.lab-photo-wrap { height: 260px; }
374+
}
384375

385376
.about-text { display: flex; flex-direction: column; gap: 1rem; }
386377
.about-text p { color: #374151; font-size: 1rem; line-height: 1.8; }
@@ -714,6 +705,7 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
714705
background: var(--navy);
715706
color: var(--white);
716707
border-color: var(--navy);
708+
align-self: flex-start; /* prevent full-column stretch */
717709
}
718710
.tool-link.launch:hover { background: var(--teal); border-color: var(--teal); }
719711

@@ -1012,6 +1004,19 @@ footer {
10121004
}
10131005
.bsky-follow-btn:hover { opacity: .85; color: white; }
10141006

1007+
/* Bluesky post images */
1008+
.bsky-images { margin: .6rem 0 .25rem; border-radius: 8px; overflow: hidden; }
1009+
.bsky-img-single img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; display: block; }
1010+
.bsky-img-double,
1011+
.bsky-img-grid {
1012+
display: grid;
1013+
gap: 2px;
1014+
}
1015+
.bsky-img-double { grid-template-columns: 1fr 1fr; }
1016+
.bsky-img-grid { grid-template-columns: 1fr 1fr; }
1017+
.bsky-img-double img,
1018+
.bsky-img-grid img { width: 100%; height: 150px; object-fit: cover; display: block; }
1019+
10151020
/* ----------------------------------------------------------------
10161021
MAP / LOCATION SECTION
10171022
---------------------------------------------------------------- */

0 commit comments

Comments
 (0)