diff options
| -rw-r--r-- | src/index.html | 73 | ||||
| -rw-r--r-- | src/style.css | 176 |
2 files changed, 249 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..0887d8a --- /dev/null +++ b/src/index.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Firstname Lastname | Psychology CV</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + + <header class="container"> + <h1>Firstname Lastname</h1> + <p class="subtitle">Psychology Student / Researcher</p> + </header> + + <main class="container"> + + <section class="card"> + <h2>About</h2> + <p>[Short professional summary placeholder]</p> + </section> + + <section class="card"> + <h2>Education</h2> + <div class="item"> + <h3>University Name</h3> + <span class="date">20XX – 20XX</span> + <p>BSc / MSc in Psychology</p> + </div> + </section> + + <section class="card"> + <h2>Experience</h2> + <div class="item"> + <h3>Role Title</h3> + <span class="date">20XX – Present</span> + <p>[Description]</p> + </div> + </section> + + <section class="card"> + <h2>Research Interests</h2> + <ul> + <li>[Cognitive Psychology]</li> + <li>[Behavioral Neuroscience]</li> + <li>[Mental Health]</li> + </ul> + </section> + + <section class="card"> + <h2>Skills</h2> + <ul class="skills"> + <li>[SPSS]</li> + <li>[Python]</li> + <li>[Data Analysis]</li> + <li>[Writing]</li> + </ul> + </section> + + <section class="card"> + <h2>Contact</h2> + <p>Email: [email@example.com]</p> + <p>LinkedIn: [link]</p> + </section> + + </main> + + <footer class="container"> + <p>© 20XX Firstname Lastname</p> + </footer> + +</body> +</html> diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..528b0c3 --- /dev/null +++ b/src/style.css @@ -0,0 +1,176 @@ +/* Hide scrollbar but allow scrolling */ +body { + overflow: auto; + scrollbar-width: none !important; /* Firefox */ + -ms-overflow-style: none !important; /* IE/Edge */ +} + +body::-webkit-scrollbar { + display: none !important; /* Chrome/Safari */ +} + + + +/* Catppuccin Latte inspired palette */ +:root { + --base: #eff1f5; + --mantle: #e6e9ef; + --text: #4c4f69; + --subtext: #6c6f85; + --accent: #f4b8e4; + --accent-strong: #ea76cb; + --border: #dce0e8; +} + +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + background: var(--base); + color: var(--text); + line-height: 1.6; +} + +/* Layout */ +.container { + max-width: 800px; + margin: auto; + padding: 2rem 1.5rem; +} + +/* Header */ +header { + margin-bottom: 2rem; +} + +h1 { + font-size: 2rem; + font-weight: 600; +} + +.subtitle { + color: var(--subtext); + margin-top: 0.25rem; +} + +/* Card sections */ +.card { + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(6px); + border: 1px solid var(--border); + border-radius: 14px; + padding: 1.2rem 1.2rem; + margin-bottom: 1.5rem; + + transition: all 0.25s ease; +} + +/* Subtle hover lift */ +.card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); + border-color: var(--accent); +} + +/* Section titles */ +h2 { + font-size: 1.1rem; + margin-bottom: 0.6rem; + color: var(--accent-strong); + position: relative; +} + +/* Accent underline */ +h2::after { + content: ""; + display: block; + width: 40px; + height: 3px; + background: var(--accent); + border-radius: 2px; + margin-top: 4px; +} + +/* Items */ +.item { + margin-bottom: 0.8rem; +} + +h3 { + font-size: 1rem; + font-weight: 600; +} + +.date { + font-size: 0.8rem; + color: var(--subtext); +} + +/* Lists */ +ul { + list-style: none; +} + +ul li { + margin-bottom: 0.3rem; + position: relative; + padding-left: 1rem; +} + +/* Custom bullet */ +ul li::before { + content: "•"; + position: absolute; + left: 0; + color: var(--accent-strong); +} + +/* Skills */ +.skills { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.skills li { + background: var(--mantle); + padding: 0.3rem 0.6rem; + border-radius: 999px; + font-size: 0.8rem; + transition: all 0.2s ease; +} + +/* Skill hover */ +.skills li:hover { + background: var(--accent); + color: white; +} + +/* Footer */ +footer { + text-align: center; + font-size: 0.75rem; + color: var(--subtext); + margin-top: 1rem; +} + +/* Subtle fade-in */ +body { + animation: fadeIn 0.6s ease; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } +} |