From 441f7c06eea9d72aa134d2a71a66670a1206b461 Mon Sep 17 00:00:00 2001 From: saiminh Date: Wed, 18 Oct 2023 12:55:03 +0200 Subject: [PATCH] service page content changes --- src/lib/components/Faq.svelte | 18 ++++++++-------- src/lib/styles/global.scss | 6 +++--- src/routes/service/+page.svelte | 32 ++++++++++++----------------- src/routes/work/[slug]/+page.svelte | 4 +++- 4 files changed, 27 insertions(+), 33 deletions(-) diff --git a/src/lib/components/Faq.svelte b/src/lib/components/Faq.svelte index 89bcaf2..f6b9a2b 100644 --- a/src/lib/components/Faq.svelte +++ b/src/lib/components/Faq.svelte @@ -76,18 +76,17 @@ padding: 0; margin-bottom: 0; transition: margin-bottom .3s ease-out; - } - details[open] { - margin-bottom: 1em; + margin-bottom: .1em; } summary { + background-color: rgba(0,0,0,0.1); display: block; cursor: url('/pointer.svg'), auto; position: relative; z-index: 1; line-height: 1.2; font-size: 1em; - padding: 0.5em 0 0.5em 1.5em; + padding: 0.5em 0 0.5em 1.75em; &::-webkit-details-marker { display:none; @@ -96,7 +95,7 @@ &:before, &:after { content: ''; position: absolute; - left: 0; + left: .5em; top: 1em; width: 17px; height: 2px; @@ -111,20 +110,19 @@ } :global(summary em) { font-weight: 800; - color: var(--color-highlight); } // details[open] summary, :global(details.is-open summary) { - + background-color: rgba(0,0,0,0.1); &:before { transition: all .2s ease-in-out; transform: rotate(0deg); } } .faq-content { - border-left: 1px solid; - margin-left: 8px; - padding: 1em 0 0 calc(1.5em - 8px); + border-top: 1px solid var(--color-bg); + background-color: rgba(0,0,0,0.05); + padding: 1em 1em 1em 1.75em; position: relative; z-index: 1; font-size: 1em; diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss index 3a375c6..99cbc24 100644 --- a/src/lib/styles/global.scss +++ b/src/lib/styles/global.scss @@ -17,13 +17,11 @@ } } -body { - cursor: url('/cursor.svg'), auto; -} a:hover, input:hover, button:hover { cursor: url('/pointer.svg'), auto; } body { + cursor: url('/cursor.svg'), auto; font-family: stratos, sans-serif; font-size: var(--font-size-p); padding: 0; @@ -31,6 +29,8 @@ body { background-color: var(--color-bg); color: var(--color-text); min-height: 100svh; + max-width: 100vw; + overflow-x: hidden; } // body:after { // content: ''; diff --git a/src/routes/service/+page.svelte b/src/routes/service/+page.svelte index 2caf87f..162ced7 100644 --- a/src/routes/service/+page.svelte +++ b/src/routes/service/+page.svelte @@ -74,7 +74,7 @@

FAQs

-

My primary goal is simple: bring your ideas to life. My websites are often fun, bold and full of interesting interaction.

+

My primary goal is simple: bring your ideas to life. My websites are often fun, bold and full of interesting interaction, but always functional and user-friendly.

Projects I worked on include:

  • Marketing websites
    • @@ -85,24 +85,26 @@
-

As a frontend developer, I'm not your guy for the intricate machinery that powers colossal enterprise web applications. Put simply, I can't whip up an Amazon or a TikTok from the ground up.

-

Moreover, my moral code is steadfast. Requests involving, but not confined to, promoting weapons manufacturers or propagating conspiracy theories won't find a home with me. I must politely decline such propositions.

+

As a frontend developer, I'm not your guy for the intricate machinery that powers colossal enterprise web applications. Put simply, I can't whip up an Amazon or a TikTok from the ground up...

+

Moreover, my moral code is steadfast. Requests involving, but not confined to, promoting weapons manufacturers or propagating conspiracy theories won't find a home with me. I must politely decline such propositions.

 - +

A web browser understands only HTML, CSS, and Javascript. Mastery of these is the bedrock for crafting top-notch web applications.

-

Among the popular modern Javascript frameworks, I have experience with React and Svelte. In terms of meta frameworks I have so far used NextJS, SvelteKit, Eleventy, and Astro.

-

On the server-side, I found myself using languages such as PHP, Perl, and Python.

+

Among the popular modern Javascript frameworks, I have experience with React and Svelte. In terms of meta frameworks I have so far used NextJS, SvelteKit, Eleventy, Jekyll and Astro. I have some experience using Typescript as well.

+

On the server-side, I have used languages such as PHP, Perl, and Python.

If you don't know any of the above, I can serve as your counsel, steering you toward the optimal solution for your project's specific goals.

-

Should you have a standing website, yearning for expansion, toss me the code, and we'll unravel the possibilities together.

+

Should you have a standing website, yearning for expansion, toss me the code, and I'll let you know my recommendations.

Sometimes, the most fitting framework is none at all. I crafted some elegant, straightforward websites in the raw embrace of HTML, CSS, and JS.

 -

I've worked with various Content Management Systems — the likes of WordPress, Strapi, Builder, Magento, and Shopify. Each carries its own set of virtues and vices.

-

Let's talk about the folks responsible for constructing and upkeeping your content. Only then can we jointly discern the optimal solution.

+

I've worked with various Content Management Systems — WordPress, Strapi, Builder, Shopify (and potentially others I can't recall). Each one has pros and cons.

+

Let's talk about/with the folks responsible for constructing and upkeeping your content. Only then can we find the optimal solution.

+

If a website is updated only sporadically, we could save the cost and labour involved in deploying a CMS and go without.

+

In this case we could for example agree on on-demand updates done by me, or alternatively define a simpler solution. (Some website content could be updated through Google Sheets for example, or a quick intro to editing content on github could be feasible)

 -

Search Engine Optimisation (SEO) is a collaborative effort between the developers of a website and the content creators. I can definitely provide the technical baseline for all content and metadata (eg page descriptions or manifests) to be accessible to search engines.

+

Search Engine Optimisation (SEO) is a collaborative effort between the developers of a website and the content creators. I can definitely provide the technical baseline for all content and metadata (eg page descriptions and titles) to be accessible to search engines.

However, the ranking of Search Results depends on many factors, and the biggest one is by far the quality of the content. If your content strategy is sound and attracts many users, resulting in other reputable pages linking to yours, that's when you'll surely climb the ladders on Google & Co's results.

 @@ -145,14 +147,6 @@
- @@ -212,6 +206,7 @@ } .faqs { margin-top: 2em; + width: 100%; @media screen and (min-width: 768px) { margin-top: 0; @@ -235,7 +230,6 @@ } em { font-weight: 800; - color: var(--color-highlight); } ul li { margin-bottom: .75em; diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index c4e246f..f7a626b 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -261,7 +261,7 @@ overflow: hidden; padding: 0 0 1em 0; z-index: 1; - opacity: 0.75; + // opacity: 0.75; perspective: 250px; perspective-origin: center bottom; @media screen and (min-width: 768px) { @@ -305,6 +305,7 @@ background-color: var(--color-highlight); height: 100%; aspect-ratio: 140/84; + background-color: var(--color-text); width: auto; margin: 0; @media screen and (min-width: 768px) { @@ -312,6 +313,7 @@ } & :global(img), video { + opacity: 0.85; width: 100%; height: 100%; object-position: left top;