From 6f415d976036c95b9f6f463805bb5616dac06ae0 Mon Sep 17 00:00:00 2001 From: Natasha Moongrave Date: Tue, 14 Apr 2026 16:10:32 +0200 Subject: Added some basic html and css --- src/index.html | 73 ++++++++++++++++++++++++ src/style.css | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 249 insertions(+) create mode 100644 src/index.html create mode 100644 src/style.css 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 @@ + + + + + + Firstname Lastname | Psychology CV + + + + +

Firstname Lastname

Psychology Student / Researcher

+ +

About

[Short professional summary placeholder]

+ +

Education

University Name

+ 20XX – 20XX +

BSc / MSc in Psychology

+ +

Experience

Role Title

+ 20XX – Present +

[Description]

+ +

Research Interests

[Cognitive Psychology]
[Behavioral Neuroscience]
[Mental Health]

+ +

Skills

[SPSS]
[Python]
[Data Analysis]
[Writing]

+ +

Contact

Email: [email@example.com]

LinkedIn: [link]

+ +

+ + + + + 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); + } +} -- cgit v1.2.3