biocomplex.github.io/join-the-lab.html at main · BioComplex/biocomplex.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join the Lab — BioComplex Lab</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <nav>
        <div class="nav-container">
            <div class="nav-brand">
                <a href="index.html"><img src="Images/logo.png" alt="BioComplex Lab"></a>
            </div>
            <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
                <span></span><span></span><span></span>
            </button>
            <ul class="nav-menu">
                <li><a href="index.html"         class="nav-link">Home</a></li>
                <li><a href="research.html"       class="nav-link">Research</a></li>
                <li><a href="latest-news.html"    class="nav-link">Latest News</a></li>
                <li><a href="collaborators.html"  class="nav-link">Collaborators</a></li>
                <li><a href="projects.html"       class="nav-link">Projects</a></li>
                <li><a href="about-us.html"       class="nav-link">About Us</a></li>
                <li><a href="join-the-lab.html"   class="nav-cta">Join the Lab</a></li>
            </ul>
        </div>
    </nav>
</header>

<div class="page-header">
    <div class="section-inner">
        <h1>Join <em>the Lab</em></h1>
        <p>We are always looking for curious, motivated researchers to join our team.</p>
    </div>
</div>

<!-- ── WHY JOIN ── -->
<section class="section section-tint">
    <div class="section-inner fade-in">
        <div class="two-col">
            <div>
                <span class="section-label">Why BioComplex?</span>
                <h2 class="section-heading">A place to do <em>bold science</em></h2>
                <p class="section-subtext">
                    We are an inclusive, collaborative, and supportive research environment.
                    We value curiosity, rigour, and creativity — and we believe great science
                    comes from diverse teams working on meaningful problems.
                </p>
                <p style="color:var(--gray); font-size:0.95rem; line-height:1.8;">
                    Lab members receive mentorship tailored to their career goals, opportunities
                    to present at national and international conferences, and access to
                    computational resources and collaborative networks worldwide.
                </p>
            </div>
            <div class="col-blob">Photo / Illustration</div>
        </div>
    </div>
</section>

<!-- ── OPEN POSITIONS ── -->
<section class="section section-white">
    <div class="section-inner fade-in">
        <span class="section-label">Open Positions</span>
        <h2 class="section-heading">Current <em>openings</em></h2>

        <div class="mt-md">
            <div class="position-card">
                <span class="position-type">PhD Position</span>
                <h3>PhD Studentship: [Project Title Placeholder]</h3>
                <p>
                    Description of this PhD position, including the research focus, required
                    background, funding details, and start date. Replace this placeholder with
                    the actual position description. Include any specific eligibility criteria
                    (e.g., nationality restrictions if funded by a specific body).
                </p>
                <a href="#" class="btn-cta">Apply Now</a>
            </div>

            <div class="position-card">
                <span class="position-type">Postdoctoral Position</span>
                <h3>Postdoctoral Research Associate: [Project Title Placeholder]</h3>
                <p>
                    Description of this postdoctoral position, including the research focus,
                    required skills, contract duration, and salary. Replace with actual details.
                    Specify the deadline for applications and how to apply.
                </p>
                <a href="#" class="btn-cta">Apply Now</a>
            </div>
        </div>
    </div>
</section>

<!-- ── GENERAL ENQUIRIES ── -->
<section class="section section-tint">
    <div class="section-inner fade-in">
        <span class="section-label">General Enquiries</span>
        <h2 class="section-heading">Don't see a position? <em>Get in touch.</em></h2>

        <p class="section-subtext">
            We welcome speculative enquiries from talented candidates at all levels.
            If you are interested in joining the lab, please send a short email to
            <a href="mailto:contact@biocomplex.lab" style="color:var(--pink); font-weight:500;">contact@biocomplex.lab</a>
            with the following:
        </p>

        <div class="research-cards">
            <div class="research-card">
                <div class="research-card-icon">📄</div>
                <h3>Your CV</h3>
                <p>A concise curriculum vitae summarising your academic background,
                   skills, and relevant experience.</p>
            </div>
            <div class="research-card">
                <div class="research-card-icon">✉️</div>
                <h3>A Short Statement</h3>
                <p>A paragraph (no more than half a page) describing why you want to
                   join the BioComplex Lab and what research you'd like to pursue.</p>
            </div>
            <div class="research-card">
                <div class="research-card-icon">🔗</div>
                <h3>Contact Details</h3>
                <p>Names and contact details of two or three referees who can speak
                   to your research potential and character.</p>
            </div>
        </div>
    </div>
</section>

<!-- ── CTA ── -->
<section class="section section-dark cta-section">
    <div class="section-inner">
        <span class="section-label">Start Your Application</span>
        <h2 class="section-heading">Ready to join <em>BioComplex?</em></h2>
        <p class="section-subtext">
            Reach out to us. We look forward to hearing from you.
        </p>
        <a href="mailto:contact@biocomplex.lab" class="btn-cta">Contact Us</a>
    </div>
</section>

<footer>
    <img src="Images/logo.png" alt="BioComplex Lab">
    <span>© 2026 BioComplex Lab, University of Exeter</span>
    <div class="footer-social">
        <a href="#" aria-label="LinkedIn"><img src="Images/icons/square-linkedin-brands-solid.png" alt="LinkedIn"></a>
        <a href="#" aria-label="BlueSky"><img src="Images/icons/square-bluesky-brands-solid.png" alt="BlueSky"></a>
    </div>
</footer>

<script>
    const toggle = document.querySelector('.nav-toggle');
    const menu   = document.querySelector('.nav-menu');
    toggle.addEventListener('click', () => {
        const open = menu.classList.toggle('nav-open');
        toggle.setAttribute('aria-expanded', open);
    });
    const observer = new IntersectionObserver(
        entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
        { threshold: 0.08 }
    );
    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
</body>
</html>