diff options
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 196 |
1 files changed, 172 insertions, 24 deletions
diff --git a/src/index.html b/src/index.html index 0887d8a..a747023 100644 --- a/src/index.html +++ b/src/index.html @@ -3,71 +3,219 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="Psychology student and researcher — CV and portfolio."> <title>Firstname Lastname | Psychology CV</title> + + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="style.css"> </head> <body> - <header class="container"> - <h1>Firstname Lastname</h1> - <p class="subtitle">Psychology Student / Researcher</p> + <header class="container site-header"> + <div class="avatar" aria-hidden="true"> + <!-- Replace src with a real photo (e.g. photo.jpg). Falls back to initials if image fails. --> + <img src="photo.jpg" alt="" onerror="this.style.display='none'; this.parentElement.classList.add('avatar--fallback');"> + <span class="avatar__initials">FL</span> + </div> + + <div class="site-header__text"> + <h1>Firstname Lastname</h1> + <p class="subtitle">Psychology Student & Researcher</p> + <p class="tagline">[One-line tagline — e.g. interested in cognitive development and mental-health research.]</p> + + <nav class="quick-contact" aria-label="Quick contact"> + <a href="mailto:email@example.com" class="chip"> + <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v.4l8 5 8-5V6H4zm16 2.6-7.47 4.67a1 1 0 0 1-1.06 0L4 8.6V18h16V8.6z"/></svg> + email@example.com + </a> + <a href="https://linkedin.com/in/your-handle" class="chip" target="_blank" rel="noopener"> + <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4.98 3.5a2.5 2.5 0 1 1 .02 5 2.5 2.5 0 0 1-.02-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H18.6v-5.3c0-1.27-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21H10V9z"/></svg> + LinkedIn + </a> + <a href="cv.pdf" class="chip chip--primary" download> + <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 13.6V4a1 1 0 0 1 1-1zM4 18a1 1 0 0 1 1 1v1h14v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z"/></svg> + Download CV + </a> + </nav> + </div> </header> <main class="container"> - <section class="card"> + <section class="card" id="about"> <h2>About</h2> - <p>[Short professional summary placeholder]</p> + <p>[Short professional summary — two or three sentences about your background, current focus, and what you are looking for next.]</p> </section> - <section class="card"> + <section class="card" id="education"> <h2>Education</h2> + + <div class="item"> + <div class="item__head"> + <h3>[University Name]</h3> + <span class="date">20XX – 20XX</span> + </div> + <p class="item__sub">[BSc / MSc in Psychology]</p> + <p>[Thesis title, relevant coursework, honours, GPA — whichever is worth highlighting.]</p> + </div> + <div class="item"> - <h3>University Name</h3> - <span class="date">20XX – 20XX</span> - <p>BSc / MSc in Psychology</p> + <div class="item__head"> + <h3>[Previous School]</h3> + <span class="date">20XX – 20XX</span> + </div> + <p class="item__sub">[Qualification]</p> </div> </section> - <section class="card"> + <section class="card" id="experience"> <h2>Experience</h2> + <div class="item"> - <h3>Role Title</h3> - <span class="date">20XX – Present</span> + <div class="item__head"> + <h3>[Role Title] · <span class="item__org">[Organisation]</span></h3> + <span class="date">20XX – Present</span> + </div> + <ul class="bullets"> + <li>[Responsibility or accomplishment — start with a verb.]</li> + <li>[Another point, ideally with a concrete result or number.]</li> + </ul> + </div> + + <div class="item"> + <div class="item__head"> + <h3>[Previous Role] · <span class="item__org">[Organisation]</span></h3> + <span class="date">20XX – 20XX</span> + </div> + <ul class="bullets"> + <li>[Description]</li> + </ul> + </div> + </section> + + <section class="card" id="projects"> + <h2>Projects & Research</h2> + + <div class="item"> + <div class="item__head"> + <h3>[Project / Study Title]</h3> + <span class="date">20XX</span> + </div> + <p class="item__sub">[Type — e.g. Bachelor's thesis · Research assistantship · Independent study]</p> + <p>[Short description: the research question, methods (e.g. survey, EEG, qualitative interviews), and what you found or contributed.]</p> + <p class="item__links"> + <a href="#">Read more</a> · <a href="#">Repository / materials</a> + </p> + </div> + + <div class="item"> + <div class="item__head"> + <h3>[Second Project Title]</h3> + <span class="date">20XX</span> + </div> + <p class="item__sub">[Type]</p> <p>[Description]</p> </div> </section> - <section class="card"> + <section class="card" id="publications"> + <h2>Publications & Presentations</h2> + <ol class="publications"> + <li> + <span class="pub__authors">[Lastname, F.]</span>, + <span class="pub__coauthors">& [Co-author, A.]</span> + (20XX). + <span class="pub__title">[Title of the paper or poster].</span> + <em class="pub__venue">[Journal / Conference Name]</em>, + <span class="pub__details">[vol(issue), pages]</span>. + </li> + <li> + <span class="pub__authors">[Lastname, F.]</span> + (20XX, Month). + <span class="pub__title">[Poster / talk title].</span> + <em class="pub__venue">[Conference Name]</em>, + <span class="pub__details">[City, Country]</span>. + </li> + </ol> + </section> + + <section class="card" id="interests"> <h2>Research Interests</h2> <ul> <li>[Cognitive Psychology]</li> - <li>[Behavioral Neuroscience]</li> - <li>[Mental Health]</li> + <li>[Behavioural Neuroscience]</li> + <li>[Mental Health & Wellbeing]</li> + <li>[Developmental Psychology]</li> </ul> </section> - <section class="card"> + <section class="card" id="skills"> <h2>Skills</h2> <ul class="skills"> - <li>[SPSS]</li> - <li>[Python]</li> - <li>[Data Analysis]</li> - <li>[Writing]</li> + <li>SPSS</li> + <li>R</li> + <li>Python</li> + <li>Qualitative coding</li> + <li>Experimental design</li> + <li>Academic writing</li> + <li>Literature review</li> + <li>Presentation</li> + </ul> + </section> + + <section class="card" id="languages"> + <h2>Languages</h2> + <ul class="languages"> + <li> + <span class="lang__name">[Language 1]</span> + <span class="lang__level">Native</span> + </li> + <li> + <span class="lang__name">[Language 2]</span> + <span class="lang__level">Fluent · C1</span> + </li> + <li> + <span class="lang__name">[Language 3]</span> + <span class="lang__level">Intermediate · B1</span> + </li> </ul> </section> - <section class="card"> + <section class="card" id="contact"> <h2>Contact</h2> - <p>Email: [email@example.com]</p> - <p>LinkedIn: [link]</p> + <p>Email: <a href="mailto:email@example.com">email@example.com</a></p> + <p>LinkedIn: <a href="https://linkedin.com/in/your-handle" target="_blank" rel="noopener">linkedin.com/in/your-handle</a></p> + <p>Location: [City, Country]</p> </section> </main> <footer class="container"> - <p>© 20XX Firstname Lastname</p> + <p>© <span id="year">20XX</span> Firstname Lastname</p> </footer> + <script> + // Current year in footer + document.getElementById('year').textContent = new Date().getFullYear(); + + // Subtle scroll reveal — progressive enhancement, cards stay visible if JS fails. + const cards = document.querySelectorAll('.card'); + if ('IntersectionObserver' in window) { + cards.forEach(c => c.classList.add('reveal')); + const io = new IntersectionObserver((entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + e.target.classList.add('is-visible'); + io.unobserve(e.target); + } + }); + }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); + cards.forEach(c => io.observe(c)); + } + </script> + </body> </html> |