+
-
+
Sofie Thorsen
+Software Engineer
+Stockholm, Sweden
+ +
+
+
+
+ I like coding and gaming. Maybe cooking too.
+SOFIE THORSEN
-
-
+ Software Engineer living in London.
-I like code and games. And owls. Those are cute.
-
+
+
+
-
- 
-
-
+
+
+
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index d85b72f..1c68790 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,126 +1,387 @@
+/* ================================
+ CSS Reset & Base Styles
+ ================================ */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ /* Color Palette */
+ --color-primary: #0f172a;
+ --color-secondary: #1e293b;
+ --color-accent: #3b82f6;
+ --color-accent-hover: #2563eb;
+ --color-text: #f1f5f9;
+ --color-text-muted: #94a3b8;
+ --color-border: #334155;
+
+ /* Typography */
+ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+
+ /* Spacing */
+ --space-xs: 0.5rem;
+ --space-sm: 1rem;
+ --space-md: 1.5rem;
+ --space-lg: 2rem;
+ --space-xl: 3rem;
+ --space-2xl: 4rem;
+
+ /* Transitions */
+ --transition-fast: 150ms ease;
+ --transition-base: 250ms ease;
+ --transition-slow: 400ms ease;
+}
+
html {
- height: 100%
+ font-size: 16px;
+ scroll-behavior: smooth;
}
body {
- font-family: 'Lato';
- background-color: #79bd9a;
+ font-family: var(--font-primary);
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+ color: var(--color-text);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ position: relative;
+ overflow-x: hidden;
+}
+
+/* ================================
+ Layout
+ ================================ */
+
+.container {
+ flex: 1;
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: var(--space-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ z-index: 1;
+}
+
+.hero {
+ width: 100%;
+ text-align: center;
+ animation: fadeIn 0.8s ease;
+}
+
+.hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+/* ================================
+ Gradient Orbs Background
+ ================================ */
+
+.gradient-orbs {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ pointer-events: none;
+ overflow: hidden;
+}
+
+.orb {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.4;
+ animation: float-orb 20s ease-in-out infinite;
+}
+
+.orb-1 {
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+ top: -10%;
+ left: -10%;
+ animation-delay: 0s;
+ animation-duration: 25s;
+}
+
+.orb-2 {
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
+ top: 50%;
+ right: -10%;
+ animation-delay: 5s;
+ animation-duration: 30s;
+}
+
+.orb-3 {
+ width: 450px;
+ height: 450px;
+ background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
+ bottom: -15%;
+ left: 30%;
+ animation-delay: 10s;
+ animation-duration: 28s;
+}
+
+/* ================================
+ Typography
+ ================================ */
+
+.name {
+ font-family: var(--font-display);
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
+ font-weight: 700;
+ color: var(--color-text);
+ letter-spacing: -0.02em;
+ margin-bottom: var(--space-xs);
+ background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.title {
+ font-size: clamp(1.25rem, 3vw, 1.75rem);
+ font-weight: 600;
+ color: var(--color-accent);
+ margin-bottom: var(--space-xs);
}
-h1 {
- font-size: 68px;
- color: rgba(255,255,255,1);
+.location {
+ font-size: 1.125rem;
+ color: var(--color-text-muted);
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+ justify-content: center;
}
-a {
- text-decoration:none;
- color: rgba(255,255,255,0.5);
+
+.location::before {
+ content: "📍";
}
-a:hover {
- color:white;
- text-decoration:none;
+
+.bio {
+ max-width: 600px;
+ margin: var(--space-lg) auto;
+ padding: var(--space-md);
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ backdrop-filter: blur(10px);
+}
+
+.bio p {
+ font-size: 1.125rem;
+ color: var(--color-text);
+ line-height: 1.7;
}
-p {
- color: rgba(255,255,255,1);
+
+/* ================================
+ Social Links
+ ================================ */
+
+.social-links {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: var(--space-lg);
}
-#contact img {
- margin: 0 auto;
- display: block;
+.social-links a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ color: var(--color-text-muted);
+ transition: all var(--transition-base);
+ text-decoration: none;
+ backdrop-filter: blur(10px);
}
-#container {
- z-index: 1;
- text-align: center;
- margin: 0 auto;
- position: relative;
- height: 100%;
+.social-links a:hover {
+ background: var(--color-accent);
+ border-color: var(--color-accent);
+ color: white;
+ transform: translateY(-4px);
+ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
-#imageContainer {
- z-index: -1;
+.social-links a:active {
+ transform: translateY(-2px);
}
-#footer {
- padding-top: 25px;
- padding-bottom: 25px;
- background-color: #3b8686;
- font-size: 500%;
+.social-links svg {
+ width: 20px;
+ height: 20px;
+ transition: transform var(--transition-fast);
}
-#contact {
- width: 100%;
- text-align: center;
- position: absolute;
- bottom: 0;
- left: 0;
+.social-links a:hover svg {
+ transform: scale(1.1);
}
-@font-face {
- font-family: 'Mono Social Icons Font';
- src: url('MonoSocialIconsFont-1.10.eot');
- src: url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
- url('MonoSocialIconsFont-1.10.woff') format('woff'),
- url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
- url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
- src: url('MonoSocialIconsFont-1.10.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
+/* ================================
+ Footer
+ ================================ */
+
+.site-footer {
+ text-align: center;
+ padding: var(--space-lg);
+ color: var(--color-text-muted);
+ font-size: 0.875rem;
+ border-top: 1px solid var(--color-border);
+ background: rgba(0, 0, 0, 0.2);
}
-.symbol, a.symbol:before {
- font-family: 'Mono Social Icons Font';
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- -ms-text-rendering: optimizeLegibility;
- -o-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
+/* ================================
+ Animations
+ ================================ */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
-a.symbol:before {
- content: attr(icon);
- margin-right: 0em;
- font-size: 80%;
+@keyframes float-orb {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(30px, -30px) scale(1.1);
+ }
+ 66% {
+ transform: translate(-20px, 20px) scale(0.9);
+ }
+}
+
+/* ================================
+ Responsive Design
+ ================================ */
+
+@media (max-width: 768px) {
+ .container {
+ padding: var(--space-md);
+ }
+
+ .hero-content {
+ gap: var(--space-sm);
+ }
+
+ .bio {
+ padding: var(--space-sm);
+ margin: var(--space-md) auto;
+ }
+
+ .bio p {
+ font-size: 1rem;
+ }
+
+ .social-links {
+ gap: var(--space-sm);
+ }
+
+ .social-links a {
+ width: 44px;
+ height: 44px;
+ }
+
+ .orb {
+ filter: blur(60px);
+ }
}
-a.symbol {
- font-variant: normal;
- padding: 7px 5px 3px 5px;
- color: rgba(255,255,255,0.5);
- text-decoration: none;
- -webkit-transition-timing-function: ease-out;
- -webkit-transition-duration: 500ms;
- -moz-transition-timing-function: ease-out;
- -moz-transition-duration: 500ms;
- position: relative;
+@media (max-width: 480px) {
+ .name {
+ font-size: 2rem;
+ }
+
+ .title {
+ font-size: 1.125rem;
+ }
+
+ .location {
+ font-size: 1rem;
+ }
+ .social-links a {
+ width: 40px;
+ height: 40px;
+ }
+
+ .social-links svg {
+ width: 18px;
+ height: 18px;
+ }
}
-a:hover.symbol {
- padding-top: 10px;
- color:white;
- -webkit-transition-timing-function: ease-out;
- -webkit-transition-duration: 500ms;
- -moz-transition-timing-function: ease-out;
- -moz-transition-duration: 500ms;
- position: relative;
- z-index: 99;
+
+/* ================================
+ Accessibility
+ ================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ .orb {
+ animation: none !important;
+ }
}
-#typed-cursor{
- opacity: 1;
- font-weight: 100;
- // add prefixes
- animation: blink 0.7s infinite;
+/* Focus styles for keyboard navigation */
+a:focus-visible,
+button:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 4px;
+ border-radius: 4px;
}
-@-keyframes blink{
- 0% { opacity:1; }
- 50% { opacity:0; }
- 100% { opacity:1; }
+/* ================================
+ Print Styles
+ ================================ */
+
+@media print {
+ body {
+ background: white;
+ color: black;
+ }
+
+ .social-links a {
+ border: 1px solid black;
+ }
+
+ .gradient-orbs {
+ display: none;
+ }
}
\ No newline at end of file
-
-
+
+
+
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index d85b72f..1c68790 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,126 +1,387 @@
+/* ================================
+ CSS Reset & Base Styles
+ ================================ */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ /* Color Palette */
+ --color-primary: #0f172a;
+ --color-secondary: #1e293b;
+ --color-accent: #3b82f6;
+ --color-accent-hover: #2563eb;
+ --color-text: #f1f5f9;
+ --color-text-muted: #94a3b8;
+ --color-border: #334155;
+
+ /* Typography */
+ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+
+ /* Spacing */
+ --space-xs: 0.5rem;
+ --space-sm: 1rem;
+ --space-md: 1.5rem;
+ --space-lg: 2rem;
+ --space-xl: 3rem;
+ --space-2xl: 4rem;
+
+ /* Transitions */
+ --transition-fast: 150ms ease;
+ --transition-base: 250ms ease;
+ --transition-slow: 400ms ease;
+}
+
html {
- height: 100%
+ font-size: 16px;
+ scroll-behavior: smooth;
}
body {
- font-family: 'Lato';
- background-color: #79bd9a;
+ font-family: var(--font-primary);
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+ color: var(--color-text);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ position: relative;
+ overflow-x: hidden;
+}
+
+/* ================================
+ Layout
+ ================================ */
+
+.container {
+ flex: 1;
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: var(--space-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ z-index: 1;
+}
+
+.hero {
+ width: 100%;
+ text-align: center;
+ animation: fadeIn 0.8s ease;
+}
+
+.hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+/* ================================
+ Gradient Orbs Background
+ ================================ */
+
+.gradient-orbs {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ pointer-events: none;
+ overflow: hidden;
+}
+
+.orb {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.4;
+ animation: float-orb 20s ease-in-out infinite;
+}
+
+.orb-1 {
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+ top: -10%;
+ left: -10%;
+ animation-delay: 0s;
+ animation-duration: 25s;
+}
+
+.orb-2 {
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
+ top: 50%;
+ right: -10%;
+ animation-delay: 5s;
+ animation-duration: 30s;
+}
+
+.orb-3 {
+ width: 450px;
+ height: 450px;
+ background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
+ bottom: -15%;
+ left: 30%;
+ animation-delay: 10s;
+ animation-duration: 28s;
+}
+
+/* ================================
+ Typography
+ ================================ */
+
+.name {
+ font-family: var(--font-display);
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
+ font-weight: 700;
+ color: var(--color-text);
+ letter-spacing: -0.02em;
+ margin-bottom: var(--space-xs);
+ background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.title {
+ font-size: clamp(1.25rem, 3vw, 1.75rem);
+ font-weight: 600;
+ color: var(--color-accent);
+ margin-bottom: var(--space-xs);
}
-h1 {
- font-size: 68px;
- color: rgba(255,255,255,1);
+.location {
+ font-size: 1.125rem;
+ color: var(--color-text-muted);
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+ justify-content: center;
}
-a {
- text-decoration:none;
- color: rgba(255,255,255,0.5);
+
+.location::before {
+ content: "📍";
}
-a:hover {
- color:white;
- text-decoration:none;
+
+.bio {
+ max-width: 600px;
+ margin: var(--space-lg) auto;
+ padding: var(--space-md);
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ backdrop-filter: blur(10px);
+}
+
+.bio p {
+ font-size: 1.125rem;
+ color: var(--color-text);
+ line-height: 1.7;
}
-p {
- color: rgba(255,255,255,1);
+
+/* ================================
+ Social Links
+ ================================ */
+
+.social-links {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: var(--space-lg);
}
-#contact img {
- margin: 0 auto;
- display: block;
+.social-links a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ color: var(--color-text-muted);
+ transition: all var(--transition-base);
+ text-decoration: none;
+ backdrop-filter: blur(10px);
}
-#container {
- z-index: 1;
- text-align: center;
- margin: 0 auto;
- position: relative;
- height: 100%;
+.social-links a:hover {
+ background: var(--color-accent);
+ border-color: var(--color-accent);
+ color: white;
+ transform: translateY(-4px);
+ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
-#imageContainer {
- z-index: -1;
+.social-links a:active {
+ transform: translateY(-2px);
}
-#footer {
- padding-top: 25px;
- padding-bottom: 25px;
- background-color: #3b8686;
- font-size: 500%;
+.social-links svg {
+ width: 20px;
+ height: 20px;
+ transition: transform var(--transition-fast);
}
-#contact {
- width: 100%;
- text-align: center;
- position: absolute;
- bottom: 0;
- left: 0;
+.social-links a:hover svg {
+ transform: scale(1.1);
}
-@font-face {
- font-family: 'Mono Social Icons Font';
- src: url('MonoSocialIconsFont-1.10.eot');
- src: url('MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
- url('MonoSocialIconsFont-1.10.woff') format('woff'),
- url('MonoSocialIconsFont-1.10.ttf') format('truetype'),
- url('MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
- src: url('MonoSocialIconsFont-1.10.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
+/* ================================
+ Footer
+ ================================ */
+
+.site-footer {
+ text-align: center;
+ padding: var(--space-lg);
+ color: var(--color-text-muted);
+ font-size: 0.875rem;
+ border-top: 1px solid var(--color-border);
+ background: rgba(0, 0, 0, 0.2);
}
-.symbol, a.symbol:before {
- font-family: 'Mono Social Icons Font';
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- -ms-text-rendering: optimizeLegibility;
- -o-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
+/* ================================
+ Animations
+ ================================ */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
-a.symbol:before {
- content: attr(icon);
- margin-right: 0em;
- font-size: 80%;
+@keyframes float-orb {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(30px, -30px) scale(1.1);
+ }
+ 66% {
+ transform: translate(-20px, 20px) scale(0.9);
+ }
+}
+
+/* ================================
+ Responsive Design
+ ================================ */
+
+@media (max-width: 768px) {
+ .container {
+ padding: var(--space-md);
+ }
+
+ .hero-content {
+ gap: var(--space-sm);
+ }
+
+ .bio {
+ padding: var(--space-sm);
+ margin: var(--space-md) auto;
+ }
+
+ .bio p {
+ font-size: 1rem;
+ }
+
+ .social-links {
+ gap: var(--space-sm);
+ }
+
+ .social-links a {
+ width: 44px;
+ height: 44px;
+ }
+
+ .orb {
+ filter: blur(60px);
+ }
}
-a.symbol {
- font-variant: normal;
- padding: 7px 5px 3px 5px;
- color: rgba(255,255,255,0.5);
- text-decoration: none;
- -webkit-transition-timing-function: ease-out;
- -webkit-transition-duration: 500ms;
- -moz-transition-timing-function: ease-out;
- -moz-transition-duration: 500ms;
- position: relative;
+@media (max-width: 480px) {
+ .name {
+ font-size: 2rem;
+ }
+
+ .title {
+ font-size: 1.125rem;
+ }
+
+ .location {
+ font-size: 1rem;
+ }
+ .social-links a {
+ width: 40px;
+ height: 40px;
+ }
+
+ .social-links svg {
+ width: 18px;
+ height: 18px;
+ }
}
-a:hover.symbol {
- padding-top: 10px;
- color:white;
- -webkit-transition-timing-function: ease-out;
- -webkit-transition-duration: 500ms;
- -moz-transition-timing-function: ease-out;
- -moz-transition-duration: 500ms;
- position: relative;
- z-index: 99;
+
+/* ================================
+ Accessibility
+ ================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ .orb {
+ animation: none !important;
+ }
}
-#typed-cursor{
- opacity: 1;
- font-weight: 100;
- // add prefixes
- animation: blink 0.7s infinite;
+/* Focus styles for keyboard navigation */
+a:focus-visible,
+button:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 4px;
+ border-radius: 4px;
}
-@-keyframes blink{
- 0% { opacity:1; }
- 50% { opacity:0; }
- 100% { opacity:1; }
+/* ================================
+ Print Styles
+ ================================ */
+
+@media print {
+ body {
+ background: white;
+ color: black;
+ }
+
+ .social-links a {
+ border: 1px solid black;
+ }
+
+ .gradient-orbs {
+ display: none;
+ }
}
\ No newline at end of file