From c756b4c4783da1e2c2f6f23e6911e4906298afd6 Mon Sep 17 00:00:00 2001 From: Sofie Thorsen Date: Sat, 24 Jan 2026 13:27:45 +0100 Subject: [PATCH] Redesign page --- favicon.ico | Bin 318 -> 15406 bytes index.html | 109 ++++++---- stylesheets/styles.css | 441 ++++++++++++++++++++++++++++++++--------- 3 files changed, 424 insertions(+), 126 deletions(-) diff --git a/favicon.ico b/favicon.ico index c6df057b8fee13fee9cb71713295b1034917e46b..3458fb8066e5a38067905b11e22ef6b0114946ab 100644 GIT binary patch literal 15406 zcmeHN%W@ny44hQ*0nQ<{tDJO7*^cG%Dd$`h*^VFjfE@Ex`JDXL22G#|kV6i+TCGa9 zS5+*o*B+zUY&1ZQmgT$U`{miQMds_}pC6Xxw`Ezbul3K*e_WP-<-0d;?C*bBmj8ZQ zmgn+sV{h4-?)^}KJ!e^c#lcz+q+*Pd#l#U8~+oj$4dfcv!mGJd`G-uf9o*1hC~ zo!Zyi`b06b--mPOd_dex4e9!yw*}W(Cr^eUVA%4qqp}R_Z zt@xhzfp^m$xi9mMYqxWhaX;3*o^P;rU4P8|^K%akFm@5&&U!uF<+Ve1dGA$!-1nGw zx!wx*t~-gnif_H2#m}1Wai4Tg?$vKL<4e3EzMU_z_H<56{igC>ul-ovH`gEH>)M@v zjgQ!kh#^PH}0-v_^w&$3qLUG_Z0m+u)L z`_8=|<(+e1$8U4ri%-9!-yYAs-Y;GF8Al+{~_>;?>sjCq!q({GXGBjKi2XE>F2BCKX4ywJ@a@o zf1iSWF8H$t6`p^l`gPI2*Iv}%NAZ93=V@54@HP4Wx17I8KUY~p&HSx;w^RGihsE2#Tt>p$<0Kb)zp|7Xw7xxinYFXJAd&i4ABG5*dy`-b-y z_W>R3SVP7S>-?U$Q&xrpP ze&#IR5Aq$M>ZifG_)a@_<6Z8I|EP9G_^BDr$KY>qkDM;~$6b8TPe=Q!x+{9Gv7>k3 z-Qc~oZ|^9<|GDwUUWcEz@K13+!e8Vq_TusQpTck6sr*C#%mMv;XLwn&Tsx-!te<^; zmr-b^lebwr&`{_*se8;L{P7)UOFyOdE8b^)NB$k^aC{G2U`HJ={3GmT&*Q!i?9RV? zzT;Qy&OP#1-yhYUzv3SFWjKC)w?yA0_Yr%K`x3vuV{`nD9l7lIRrf`|8TeM*Q_Va@Rl40IvB`_g1?keyM%+pR65lztT>r{Z`(t@LSIovEy^p4L`eg zLhl^&+R50#`AR$9_fOX>s#a@V=7~ zv@?^pM`%a!hx1qBf1CSKKZ4n`9_RQj{Am0Q?f5(T(*H~TYwkn8Ci?>1L+pk2RXY#i zJ7fIRJ?08`z`lte*kyRls_>h3YVRrfg`W21o-qD?2y&Odr;yHHK{ubN_q2|veRyW6 zebzL$M6urmjMd!4s4+(-Qo z`;7MQho7Da>;eCbcA)#DeRA*fQ8jC*9o0|dKJs7SCjTA$p0~tK-*N1j|AuZ>{Q|Jd W*yetX{}1sY`Sqa7&xL_|Gw?s=K@<}J literal 318 zcmZQzU<5(|0RbS%!l1#(z#zuJz@P!d0zj+)#2|4HXaJKC0wf0lZEe;Jv-Va(I0HZm JQV1w@G5|V?2)h6P diff --git a/index.html b/index.html index 35ae062..9a9993b 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,82 @@ - - + - - + + + + Sofie Thorsen - - - - - + + + + + + + + + -
-

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