simon/floter.design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

service page content changes

Browse source
This commit is contained in:
saiminh 2023-10-18 12:55:03 +02:00
parent 1ff3cb595c
commit 441f7c06ee
4 changed files with 27 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/Faq.svelte
View file

@ -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;

6
src/lib/styles/global.scss
View file

@ -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: '';

32
src/routes/service/+page.svelte
View file

@ -74,7 +74,7 @@
<div class="faqs">
<h3>FAQs</h3>
<Faq summary="What kind of websites <em>do you</em> create?">
<p>My primary goal is simple: bring your ideas to life. My websites are often fun, bold and full of interesting interaction.</p>
<p>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.</p>
<p>Projects I worked on include:</p>
<ul>
<li>Marketing websites</li>
@ -85,24 +85,26 @@
</ul>
</Faq>
<Faq summary="What kind of websites <em>do you not</em> create?">
<p>As a <em>frontend</em> 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.</p>
<p>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.</p>
<p>As a <em>frontend</em> 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...</p>
<p>Moreover, my moral code is steadfast. Requests involving, but not confined to, promoting <em>weapons manufacturers or propagating conspiracy theories</em> won't find a home with me. I must politely decline such propositions.</p>
</Faq>
<Faq summary="Which technologies and frameworks do you use/support?">
<Faq summary="Which <em>tech stack</em> do you use/support?">
<p>A web browser understands only <em>HTML, CSS, and Javascript.</em> Mastery of these is the bedrock for crafting top-notch web applications.</p>
<p>Among the popular modern Javascript frameworks, I have experience with <em>React and Svelte</em>. In terms of meta frameworks I have so far used <em>NextJS, SvelteKit, Eleventy, and Astro.</em></p>
<p>On the server-side, I found myself using languages such as <em>PHP, Perl, and Python.</em> </p>
<p>Among the popular modern Javascript frameworks, I have experience with <em>React and Svelte</em>. In terms of meta frameworks I have so far used <em>NextJS, SvelteKit, Eleventy, Jekyll and Astro.</em> I have some experience using <em>Typescript</em> as well.</p>
<p>On the server-side, I have used languages such as <em>PHP, Perl, and Python.</em> </p>
<p>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.</p>
<p>Should you have a standing website, yearning for expansion, toss me the code, and we'll unravel the possibilities together.</p>
<p>Should you have a standing website, yearning for expansion, toss me the code, and I'll let you know my recommendations.</p>
<p>Sometimes, the most fitting framework is none at all. I crafted some elegant, straightforward websites in the raw embrace of HTML, CSS, and JS.</p>
</Faq>
<Faq summary="Which <em>Content Management System</em> (CMS) do you recommend?">
<p>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.</p>
<p>Let's talk about the folks responsible for constructing and upkeeping your content. Only then can we jointly discern the optimal solution.</p>
<p>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.</p>
<p>Let's talk about/with the folks responsible for constructing and upkeeping your content. Only then can we find the optimal solution.</p>
<p>If a website is updated only sporadically, we could save the cost and labour involved in deploying a CMS and go without.</p>
<p>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)</p>
</Faq>
<Faq summary="Are your websites <em>SEO-optimised?</em>">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</Faq>
<Faq summary="Are your websites compliant with <em>Data Protection & Privacy Laws</em> (a.k.a. 'Cookie laws')?">
@ -145,14 +147,6 @@
</div>
</div>
</section>
<!-- <section>
<h2>Full service</h2>
<div class="service-content">
<ul class="bullets">
<li><em>All of the above</em></li>
</ul>
</div>
</section> -->
</div>
</article>
@ -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;

4
src/routes/work/[slug]/+page.svelte
View file

@ -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;