# digisolutech.netlify.app > AI-friendly documentation for digisolutech.netlify.app *Complete documentation content below* # Huolettomat ja nopeat kotisivut > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## DigiSolutech: Kumppanisi Turusta Me rakennamme huipputehokkaita, hakukoneystävällisiä **kotisivuja** jotka on suunniteltu yrittäjän arkeen: - **Huolettomuus**: Me hoidamme kaiken tekniikasta päivityksiin. Sinä voit keskittyä siihen, mitä osaat parhaiten. - **Suorituskyky**: Unohda hitaat ja raskaat alustat. Rakennamme ultra-nopeita sivuja, jotka Google ja asiakkaasi huomaavat. - **Turvallisuus**: Toimitamme aina GDPR-yhteensopivia, saavutettavia (WCAG 2.1 AA) ja turvallisia sivuja. ## Palvelumme: Ratkaisut jokaiseen tarpeeseen ### Kotisivut Yrityksille Olet pienyrittäjä tai kasvuun pyrkivä keskisuuri yritys. Tarvitset kotisivun, joka on **sijoitus**, ei vain kulu. Rakennamme sivuston, joka on optimoitu myyntiin ja näkyvyyteen. Ei turhaa koodia, vain puhdasta suorituskykyä. [Siirry: Kotisivut Yrityksille](/yrityksille) ### Kotisivut Järjestöille ja Yhdistyksille Olet seura, kulttuuriyhdistys tai yleishyödyllinen järjestö. Tarvitset **turvallisen** ja **saavutettavan** sivun, joka palvelee kaikkia jäseniä. Huolehdimme, että yhdistyksesi viesti tavoittaa yleisönsä vaivatta. [Siirry: Kotisivut Yhdistyksille](/yhdistyksille) ### Kotisivut Yksityishenkilöille Tarvitset portfolion, CV:n tai blogin, joka erottuu edukseen. Rakennamme **henkilöbrändillesi**, alustan, joka on teknisesti askeleen edellä muita [Siirry: Kotisivut Yksityishenkilöille](/henkiloille) ## Miksi valita DigiSolutech? ### Aika on rahaa Jokainen sekunti, jonka sivusi latautuu, on potentiaalinen menetetty asiakas. Meidän sivumme latautuvat välittömästi. ### Vastuullisuus vakiona **[GDPR-yhteensopivuus](/gdpr)**, **[saavutettavuus](/saavutettavuus)** ja ekologinen, kevyt koodi sisältyvät aina pakettiin. ### Täydellinen tuki Et jää koskaan yksin. Muutokset ja päivitykset hoituvat nopeasti yhdellä viestillä. ## Kotisivumme Laatumittarit Nopeat, hakukoneystävälliset, turvalliset nettisivut. Emme vain väitä, me näytämme sen ### Turvallisuus A+ Toimitamme aina turvallisia sivuja. [Tarkista sivun turvallisuuta](https://securityheaders.com/?q=https%3A%2F%2Fdigisolutech.netlify.app%2F\&followRedirects=on) ### GDPR ✔️ Toimitamme aina GDPR-yhteensopivia sivuja. Nämä kriittiset ominaisuudet sisältyvät aina hintaan. [Lue lisää prosessistamme](/gdpr) ### Suorituskyky 100 Käytämme Google PageSpeed Insights todistaaksemme suorituskyvyn [Tarkista sivun nopeutta](https://pagespeed.web.dev/analysis/https-digisolutech-netlify-app/ta7lz07xob?form_factor=mobile) ### SEO A Tämän nettisivun SEO-pisteet ovat korkeampia kuin keskimääräinen pistemäärä. [Tarkista sivun SEO](https://www.seoptimer.com/digisolutech.netlify.app) ### Saavutettavuus ✔️ Toimitamme saavutettavia (WCAG 2.1 AA) sivuja.\ Wave-esteettömyysarviointityökalu antaa etusivullemme arvosanaksi 9.9/10 [Lue lisää prosessistamme](/saavutettavuus) ### Kestävä Kehitys A+ Tämä on puhtaampi kuin 95% kaikista maailman nettisivuista. [Tarkista sivun hiilijalanjälki](https://www.websitecarbon.com/website/digisolutech-netlify-app/) ### Palkinnot Virallinen 512KB-klubin jäsen | Rakennamme nopeimpia nettisivuja Turussa [Lue miten onnistuimme (en)](/512kb) ### Palkinnot Verkkosivustomme on esillä Astron esittelysivulla. [Lue lisää tästä menestyksestä (en)](/astro-showcase) ## Hinta mietityttää? Lue tämä ensin. Moni pienyrittäjä tietää, että kotisivut tarvitaan, mutta onko laatuun pakko sijoittaa? Lue oppaamme: **Miksi kotisivut maksavat enemmän kuin 200€?** [Lue lisää hinnoittelusta](/hinta) ## Asiakkaamme suosittelevat Tyytyväisyystakuu on lupauksemme, mutta meidän asiakkaamme kertovat parhaiten. Highly recommended! I am really glad that I've decided to work with DigiSolutech. They took the time to truly understand my goals. The details, creativity, and professionalism really set them apart. ### Mike Georgiou Board Game Designer · the-game-mechanics.com Excellent work on my website, highly satisfied with the quality and professionalism. ### Giorgos Riskas Founder & CEO · justgames.fi DigiSolutech thank you very much for your valuable help! Our cooperation is perfect. ### Ioannis Lambropoulos Kirkkoherra · ort.fi/turku ## Referenssit Tässä on näyte kotisivu-projekteista, jotka todistavat sitoutumisemme nopeuteen, muotoiluun ja tekniseen vakauteen. B2B Nettisivu ### The Game Mechanics The Game Mechanics -studiolle toteutettu nopea ja helppokäyttöinen B2B-portfoliosivusto. Rakennettu Astrolla ja Decap CMS:llä, jotta asiakas voi itse hallita pelilistaustaan vaivattomasti. [Lue lisää The Game Mechanics](/projects/game-mechanics) B2B Nettisivu ### Just Games Kotisivu Täysin räätälöity, salamannopea verkkosivusto helsinkiläiselle indie-pelistudiolle. Sivusto esittelee pelit näyttävästi ja tarjoaa lehdistölle ladattavat materiaalit (Press Kit) helposti. [Lue lisää Just Games Kotisivu](/projects/Just-Games) Nettisivu ### Autokorjaamo Garage21 Moderni, erittäin nopea ja responsiivinen kotisivu autokorjaamolle Kreikassa. Sivusto korvasi vanhan, rikkoutuneen sivuston ja paransi yrityksen näkyvyyttä paikallisissa hakutuloksissa. [Lue lisää Autokorjaamo Garage21](/projects/Garage21) PWA ### AI-Powered Poetry Assistant Rhyme on tekoälyä ja sanatietokantaa hyödyntävä verkkosovellus (PWA) luovaan kirjoittamiseen. Projekti esittelee turvallisen API-integraation ja modernin serverless-arkkitehtuurin. [Lue lisää AI-Powered Poetry Assistant](/projects/rhyme) PWA ### The Splitter Moderni ja helppokäyttöinen tippilaskuri, joka toimii myös ilman nettiyhteyttä. Se on progressiivinen verkkosovellus (PWA), jonka voi asentaa puhelimeen suoraan selaimesta tai sovelluskaupasta. [Lue lisää The Splitter](/projects/Splitter) Design ### Premium Hero-osio Erittäin interaktiivinen ja moderni hero-osio, joka yhdistää minimalistisen muotoilun, lasimorfismin ja 3D-animaatiot luottamusta herättäväksi ensivaikutelmaksi. [Lue lisää Premium Hero-osio](/projects/hero) ## Miten etenemme tästä? Yksinkertainen ja riskitön prosessi Projektiin ryhtyminen kanssamme on helppoa ja läpinäkyvää. Tässä on, kuinka varmistamme, että saat täydelliset **kotisivut** mahdollisimman pienellä vaivalla ### 1. Maksuton Konsultaatio Kartoitetaan tarpeesi ilman sitoumuksia. ### 2. Suunnittelu Luomme sinulle tarjouksen ja suunnittelemme etusivun. ### 3. Toteutus Me rakennamme ja testaamme. Sinä vain toimitat sisällön. ### 4. Julkaisu & Huoleton ylläpito Nautit uusista sivuistasi, me huolehdimme niiden toimivuudesta jatkossa. ## Jätä tekninen stressi taaksesi. Ota yhteyttä ja aloitetaan! Nimi \*Adam Square Sähköposti \* YrittysYritys Projektin tiedot \* \[ ]Hyväksyn, että henkilötietojani käsitellään [tietosuojakäytännön](/privacy) mukaisesti Ota yhteyttä --- # How DigiSolutech Joined the 512KB Club > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## The Big Announcement 📢 I’m thrilled to share that **DigiSolutech has been officially accepted into the prestigious 512KB Club** (Orange Team)! 🎉 In an era where the average website weighs over 2 megabytes—that’s **more than 4 times our entire site**—this recognition validates our commitment to building lightning-fast, efficient web solutions that respect users’ time, data, and the environment. But this achievement is more than just a badge of honor. It represents a fundamental philosophy about how we should be building for the web in 2025 and beyond. In this article, I’ll take you behind the scenes to show you exactly how we achieved this milestone, the technical decisions we made, and why web performance should matter to every business owner and developer. --- ## What is the 512KB Club? 🤔 Before we dive into the technical details, let’s talk about what this club actually is and why it matters. The **512KB Club** is a curated collection of performance-focused websites that have total uncompressed page sizes under 512 kilobytes. It’s organized into three tiers: - 🟢 **The Green Team** (under 100 KB) - The ultra-lightweight champions - 🟠 **The Orange Team** (100-250 KB) - The performance enthusiasts (that’s us!) - 🔵 **The Blue Team** (250-512 KB) - The balanced achievers This initiative is part of a broader movement celebrating lightweight, fast-loading websites. It’s a response to “website bloat”—the troubling trend of modern websites becoming increasingly heavy with large JavaScript frameworks, tracking scripts, high-resolution unoptimized images, and other assets that slow down loading times. ### The State of the Modern Web 📊 To understand why the 512KB Club matters, we need to look at where the web is today: - The **median desktop page weight** is around 2.2 MB - The **median mobile page weight** is around 2.0 MB - JavaScript alone often accounts for 500KB+ on many sites - Images can easily reach several megabytes if not optimized We’re delivering a full-featured business website at less than **one-quarter** the size of the average site. --- ## Why Performance Matters 💡 At DigiSolutech, we’ve always believed that exceptional web performance isn’t just about speed. It’s about **respect**. ### Respect for Your Users’ Time 🙏 **Fast-loading pages mean better engagement and conversions.** Research consistently shows that: - Pages that load in **1 second** have a conversion rate 3x higher than pages that load in 5 seconds - **53% of mobile users** abandon sites that take over 3 seconds to load - Every **100ms delay** in page load time can reduce conversion rates by 7% When your site loads instantly, you’re telling your users: _“I value your time. I respect that you’re busy. Here’s the information you need, right now.”_ ### Respect for Your Users’ Data 📱 **Lighter sites consume less bandwidth**, which is crucial for mobile users or people in regions with limited connectivity. Consider this: - A 512KB site uses **75% less data** than a 2MB site - For users on metered connections, this difference is **real money saved** - In regions where data is expensive or limited, lightweight sites are more accessible By keeping our site under 512KB, we’re ensuring that accessing our services doesn’t cost users an unreasonable amount of their monthly data plan. ### Respect for the Environment 🌍 This is something people often overlook, but **optimized code directly reduces CO2 emissions**. Here’s how: - **Data transfer consumes energy**: Less data = less energy - **Server processing**: Efficient code requires fewer CPU cycles - **End-user devices**: Lighter pages don’t drain batteries as quickly Our site is cleaner than **95% of tested websites** according to Website Carbon Calculator. That’s not just a feel-good metric, it’s a tangible contribution to reducing the internet’s environmental impact. ### Respect for Accessibility ♿ **Lightweight sites work better on older devices and slower connections.** This means: - People using 5-year-old smartphones can access your site smoothly - Users in rural areas with slow internet connections get a great experience - People with disabilities using assistive technologies face fewer barriers Performance and accessibility are deeply intertwined. When you optimize for speed, you’re also optimizing for inclusion. --- ## The User Benefits: Real Business Impact 🎯 Our clients see **real, measurable business impact** from this performance-first approach: ### Improved Search Engine Rankings 📍 Google has made it crystal clear: **page speed is a ranking factor**. Specifically, they look at Core Web Vitals: - **Largest Contentful Paint (LCP)**: How quickly the main content loads - **First Input Delay (FID)**: How quickly the page becomes interactive - **Cumulative Layout Shift (CLS)**: How stable the page is as it loads Our site achieves **perfect scores** on all three metrics. This isn’t just vanity, it translates directly to better visibility in search results. ### Higher Conversion Rates 💰 Every second counts. Literally. Here’s what the data shows: - A **1-second delay** in page load time reduces conversions by 7% - Pages loading in **2 seconds** have an average bounce rate of 9% - Pages loading in **5 seconds** have an average bounce rate of 38% When we build a sub-512KB site, we’re typically delivering **load times under 1 second** on most connections. That’s the difference between a user staying or leaving—between a conversion or a lost opportunity. ### Better User Experience Across All Devices 🚀 Performance isn’t just about speed, it’s about **consistency**. Our lightweight approach ensures: - **Smooth scrolling**: No janky animations or delayed responses - **Quick interactions**: Buttons respond instantly - **Reliable loading**: Even on spotty connections, the site works ### Lower Hosting Costs and Energy Consumption 💸 This is the business benefit that often surprises people: **efficient sites cost less to run**. Here’s why: - **Less bandwidth**: Lower hosting bills - **Less server processing**: Cheaper server requirements - **Less CDN usage**: Reduced content delivery costs For businesses, this means the performance optimization pays for itself over time. --- ## Technical Architecture: How We Built It 🗗️ Now let’s get into the technical details. How exactly did we build a full-featured business website that stays under 512KB? The answer lies in careful technology choices and ruthless optimization. ### Static Site Generator: Astro ⚡ The foundation of our performance strategy is **Astro**. We chose Astro for several critical reasons: #### Zero JavaScript by Default 🔴 This is the game-changer. Unlike React, Vue, or other frameworks that ship JavaScript to the client by default, Astro **renders everything to HTML at build time**. You only opt-in to JavaScript when you actually need it. **What this means in practice:** - Our homepage HTML is **pure, static HTML** - No React or other framework bundle to download and parse - No virtual DOM overhead - The browser can **render immediately** #### Island Architecture 🏝️ When we do need interactivity, Astro’s Island Architecture allows for **selective hydration**. This means we can have interactive components without making the entire page interactive. **Huge savings** in JavaScript size. #### Build-Time Rendering 🚀 Every page is pre-rendered at build time. When a user requests a page, the server sends **ready-to-display HTML**. No waiting for: - JavaScript to download - Framework to boot up - The app to render - API calls to complete It’s all done in advance. The result? **Instant page loads**. ### Hosting: Netlify 🌐 For hosting, we use **Netlify**, which provides several performance advantages: #### Global CDN with Edge Caching 🌍 Netlify’s content delivery network (CDN) means our site is served from **servers close to the user**. This dramatically reduces **latency**, the time it takes for the first byte to reach the user. #### Automatic HTTPS 🔐 Security and performance go hand-in-hand. Netlify provides: - **Automatic SSL certificates**: No configuration needed - **HTTP/2 support**: Faster parallel loading - **Brotli compression**: Better than gzip #### Instant Cache Invalidation ⚡ When we push updates, Netlify’s cache invalidation ensures users see the latest version **immediately**. No stale content, no manual cache clearing. #### Minimal Configuration Overhead 📦 The server configuration file (`netlify.toml`) is simple and focused. Just the essentials for security, no bloat. --- ## Image Optimization: The Biggest Performance Win 🖼️ Images are typically the **largest assets** on any website, often accounting for 50-70% of total page weight. Here’s how we tackled this challenge: ### Format Selection: AVIF 📸 With 93% global support from the browsers, we chose to use **the modern image format AVIF**: ```html Description ``` **The impact:** AVIF can reduce file size by **80%** compared to other formats at the same quality. [**Real example from our site:**](https://digisolutech.netlify.app/images/me.avif) - Original JPEG: **416 KB** - Optimized AVIF: **17.9 KB** - **Savings: 96%** 🎉 ### Dimension Optimization 🎯 Every image is **sized appropriately**: - Hero images: **1920px max width** (most monitors) - Feature images: **800px max width** - Thumbnails: **400px max width** By adding the `width` and `height` attributes, we tell the broswer what dimensions the image is supposed to be. ```html Description ``` **What this does:** Everyone gets the **perfect size** with no wasted bytes. We never serve a 4000px image when a 1200px version is sufficient. This alone can save **hundreds of kilobytes**. ### Lazy Loading: Load Only What’s Visible 🦥 We use **native lazy loading** for all below-the-fold images: ```html Description ``` **The strategy:** - **Above-the-fold** images, meaning images immediately visible (in hero for example) will load immediately - **Below-the-fold** images will load only when user scrolls near them, by adding the attribute `lazy`. This prioritizes the **initial viewport** and defers everything else. ### Critical Image Preloading 🚀 For the **Largest Contentful Paint (LCP)** image (usually the hero), we add a preload hint: ```html ``` This tells the browser: _“This image is critical—start downloading it immediately.”_ --- ## CSS & JavaScript Optimization 🎨 Images aren’t the only optimization opportunity. Here’s how we approached styles and scripts. ### CSS Strategy 🖌️ #### Critical CSS Inline We **inline critical above-the-fold CSS** directly in the HTML ``. **Why this matters:** - Eliminates render-blocking CSS requests - **First paint happens faster** - Non-critical CSS loads asynchronously #### Optimize CSS Framework We don’t use the **whole Bootstrap library.** Instead we use it very selectively and tree-shake aggressively during the build process. The final CSS bundle contains only the Bootstrap components we actually use and our custom css. **We use system fonts**, which means zero font download. This saves \~30KB and improves load time. #### No CSS-in-JS CSS-in-JS libraries add **runtime overhead**: - JavaScript must parse before styles apply - Increases bundle size - Harder for browsers to cache Static CSS files are **faster and cache better**. ### JavaScript Strategy ⚡ #### Minimal JavaScript Our total JavaScript bundle is **24KB**. How? - **Most pages have zero JavaScript**: Pure HTML and CSS - Interactive elements use Bootstrap JS: **Astro automatically removes** any unused javascript. - Code splitting: JS loads **per-page**, not globally **Result:** Users never download code they won’t use. #### No Third-Party Scripts We **aggressively avoid third-party JavaScript**: ❌ **What we DON’T use:** - Google Analytics (we use privacy-focused Rybbit instead) - Ad networks - Tracking pixels - Cookie consent banners (not needed with our privacy-first approach) ✅ **What we DO use:** - Bootstrap JS (only where needed, tree-shaken) - Contact form handling (minimal vanilla JS) - 1 widged used #### Defer and Async Non-critical scripts use `defer` **What this does:** - Script downloads in the end, after HTML - **Doesn’t block rendering** - Executes after DOM is ready --- ## Measuring & Monitoring Performance 📊 You can’t optimize what you don’t measure. We regularly test our site. This ensures we never accidentally ship a performance regression. ### Real User Monitoring 📈 We use **Rybbit Analytics** for privacy-friendly monitoring: **Why Rybbit:** - **No client-side JavaScript** required for basic analytics - Tracks Core Web Vitals from **real users** - Helps identify regional performance issues - **Privacy-respecting** (GDPR compliant) ### Regular Audits 🛠️ - **Google PageSpeed Insights**: Checks performance - **2gdpr**: Checks cookies and data transfer for GDPR compliance - **Website Carbon Calculator**: Checks environmental impact - **SEO Optimer**: Checks SEO health - **Security Headers**: Checks security - **Axe**: Checks for accessibility issues - **Html-Validator**: Checks the quality of the code These tools give us a **360-degree view** of performance. --- ## Trade-offs & Challenges ⚖️ Let’s be honest—getting under 512KB requires **trade-offs**. Here’s what we sacrificed and how we adapted: ### Challenge 1: Limited Heavy Animations 🎬 **Trade-off:** We can’t use heavy animation libraries like GSAP or Framer Motion (these can be 50-150KB). **Solution:** - Use **CSS animations** and the Web Animations API - Leverage `@keyframes` for simple effects - Use `IntersectionObserver` for scroll-based animations These are **native**, **performant**, and cost minimal bytes of JavaScript and Css. **Impact:** Minimal. Most business sites don’t need complex animations. Simple, tasteful animations work better for UX anyway. ### Challenge 2: Font Loading 📤 **Trade-off:** Custom brand fonts add weight (typically 20-50KB per weight). **Solution:** - Use **system fonts** as default - Use `font-display: swap` to prevent blocking **Impact:** Modern system fonts look great and load instantly. ### Challenge 3: No Heavy Frameworks 🛠️ **Trade-off:** Can’t use many frameworks or libraries for everything. **Solution:** - **Astro allows framework components** where needed (Islands Architecture) - For simple interactions, vanilla JS is sufficient **Impact:** Development is slightly slower initially, but the performance benefit is massive. ### Challenge 4: Image-Heavy Portfolio 🖼️ **Trade-off:** Portfolio sites need high-quality visuals. **Solution:** - **Aggressive image optimization** (AVIF) - Lazy loading everything below the fold - Responsive images (serve appropriate size) - Educate clients about optimal image dimensions **Real example:** - Client provides 5MB image - We optimize to AVIF: **60KB** - Quality looks identical to the user **Impact:** With proper optimization, we can have a beautiful portfolio and stay under budget. ### Challenge 5: Feature Scope Decisions 🔧 **Trade-off:** Some features are harder to implement efficiently. **Solution:** - **Question every feature**: Does it serve the user? - Progressive enhancement: Core functionality works without JS - Choose lightweight alternatives (e.g., native `` instead of a modal library) **Philosophy:** The 512KB limit forces us to think critically about every asset and feature. This constraint breeds **better decision-making**. --- ## Key Takeaways: Lessons Learned 🎓 After completing this optimization journey, here are the most valuable lessons: ### Start with Performance in Mind **Don’t optimize later. Build fast from the start.** - Choose performance-focused tools (Astro, Netlify) - Make performance a requirement, not a nice-to-have ### Measure Everything **You can’t improve what you don’t measure.** Review metrics regularly. ### Question Every Dependency **That npm package might be convenient, but what’s the cost?** Before installing any dependency, ask: - What’s the package size? - Can I build this myself in 50 lines of code? - Do I need the entire library, or just one function? - Is there a lighter alternative? **Example:** - ❌ Moment.js for date formatting: **67KB** - ✅ Native `Intl.DateTimeFormat`: **0KB** ### Optimize Images Aggressively **Images are the low-hanging fruit.** - Use modern formats (AVIF/WebP) - Implement responsive images - Lazy load everything below the folds - Add `width`/`height` attributes **Rule of thumb:** No single image should exceed 100KB. ### Respect Your Users **Fast sites respect users’ time, data, and devices.** This isn’t just about technical metrics—it’s about **empathy**: - Users on slow connections - Users with old devices - Users on expensive data plans - Users who value their time When you optimize, you’re saying: _“I care about your experience.”_ ### Performance IS a Feature **Don’t treat performance as an afterthought.** Performance directly impacts: - **SEO rankings**: Google rewards fast sites - **Conversion rates**: Fast sites convert better - **User satisfaction**: Nobody complains a site is too fast - **Accessibility**: Performance and inclusion go hand-in-hand --- ## The Bottom Line 🌟 Joining the 512KB Club wasn’t just about earning a badge. It was about **proving a philosophy**: **You don’t need a bloated, slow website to look good and work great.** In 2025, with modern tools and thoughtful optimization, we can build: - ✅ Beautiful, professional websites - ✅ Fast, responsive experiences - ✅ Accessible to everyone - ✅ Environmentally responsible - ✅ Under 512KB **The benefits are real:** - Better SEO rankings - Higher conversion rates - Lower hosting costs - Reduced environmental impact - Happy users **The cost?** Thoughtful planning and technical discipline. But the return on investment is enormous. --- # Tuon suuryritysten teknologian pienten yritysten ulottuville. > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Tarinani ja Missioni Monet pienyrittäjät maksavat tänä päivänä tuhansia euroja verkkosivuista, jotka on rakennettu raskailla ja vanhentuneilla alustoilla. Nämä sivut ovat usein hitaita, tietoturvaltaan haavoittuvia ja täynnä ylimääräistä koodia, joka vain hidastaa asiakkaasi matkaa. Suurilla yrityksillä on varaa rakentaa täysin räätälöityjä, huippunopeita ratkaisuja, jotka välttävät nämä sudenkuopat. **Minun missioni on muuttaa tämä.** Perustin DigiSoluTechin, koska haluan tarjota pienille ja keskisuurille yrityksille saman teknisen etumatkan kuin suuryrityksillä on, mutta ilman suurten toimistojen hintalappua. > Minun tavoitteeni on tehdä digitaalinen maailma helpoksi ja hyödylliseksi sinun yrityksellesi. Keskityn aina parhaaseen laatuun ja nopeuteen. ## Arvoni: Lupaus laadusta Nämä säännöt ohjaavat kaikkea työtäni. Ne varmistavat, että "huolettomat kotisivut" eivät ole vain mainoslause, vaan tekninen fakta. ### Nopeus Aika on rahaa. Rakennan sivustoja, jotka latautuvat välittömästi. Kun sivu toimii viiveettä, asiakkaasi pysyvät sivustolla pidempään ja kauppa käy paremmin. ### Saavutettavuus Internet kuuluu kaikille. Varmistan, että sivustosi noudattaa WCAG 2.1 AA -standardeja. Se tarkoittaa, että sivusi on helppokäyttöinen kaikille ihmisille kaikilla laitteilla. ### Turvallisuus ja Tietosuoja Tietosuoja on luottamuskysymys. Rakennan sivut nykyajan tietoturvavaatimusten mukaan ja huolehdin, että ne ovat täysin GDPR-lain mukaisia. ### Kestävä Kehitys Digitaalinen maailma kuluttaa sähköä. Optimoitu, kevyt koodi vaatii vähemmän energiaa palvelimilta ja päätelaitteilta. Se on ekologinen valinta yrittäjälle. ## Mitä "Huolettomat Kotisivut" tarkoittavat käytännössä? Kun sanon tarjoavani huolettomuutta, tarkoitan sitä, että teknologia palvelee sinua, eikä päinvastoin. ### Ei turhaa koodia Sivusi ovat kevyet ja latautuvat silmänräpäyksessä. ### Ihmiset ensin Tekniikka on olemassa ihmisiä varten. Jokainen päätökseni parantaa loppukäyttäjän kokemusta. ### Turvallinen Käytän ratkaisuja, jotka eivät ole alttiita perinteisille botteille ja hyökkäyksille. ## Siksi sivusi on paras Käytän moderneja ja luotettavia työkaluja, jotta sinun kotisivu on erittäin nopea, turvallinen ja niitä on helppo muokata myöhemmin. ### Astro Framework Mahdollistaa maailman nopeimmat staattiset sivustot. Google arvostaa tätä nopeutta hakutuloksissa. ### Bootstrap ja Tailwind CSS Takaa ammattimaisen ja responsiivisen ulkoasua kaikilla näytöillä. ### Netlify & Globaali CDN Sivustosi on jaettu maailmanlaajuiseen verkkoon, mikä takaa lähes 100 % toimintavarmuuden. ### Supabase Turvallinen ja moderni tietokantaratkaisu silloin, kun tarvitsemme kehittyneempää toiminnallisuutta. ### Laadun Varmistus **Testaus ja Varmistus:** Tarkistan ja testaan sivuston aina Chromen Developer Tools -työkaluilla. Varmistan, että sivusto täyttää saavutettavuuden ja yhteensopivuuden korkeimmat standardit. ## Matkani tähän asti ### 2020 - Aloitus Matka alkoi uteliaisuudesta. Halusin tietää, miten tekniikka ratkaisee aitoja ongelmia. ### 2021 - Ensimmäinen projekti Rakensin ensimmäisen sivuston. Opin, kuinka tärkeää on, että sivut ovat helppokäyttöisiä ja koodi on siistiä. ### 2022 - Erikoistuin Aloin käyttää moderneja työkaluja ja keskityin nopeuteen ja saavutettavuuteen. ### 2024 - The Splitter Julkaisin The Splitter -verkkosovelluksen (PWA), joka osoitti kykyni rakentaa vaativia digitaalisia työkaluja. ### 01.2025 - Perustin DigiSoluTechin DigiSoluTech syntyi visiosta auttaa yrittäjiä menestymään reilulla ja tehokkaalla teknologialla. ### 03.2025 - The RhymeAI Julkaisin The RhymeAI -verkkosovelluksen (PWA), joka integroi turvallisesti tekoälyä ja sanatietokanta. ### 12.2025 - 512KB Club DigiSolutech on virallisesti hyväksytty arvostettuun 512KB Clubiin ## Tehdään yhdessä jotain hyvää Nyt kun tiedät minun tarinani, haluaisin kuulla sinun tarinasi ja sinun ideasi. Jos sinulla on projekti mielessäsi tai haluat vain jutella siitä, miten uudet kotisivut voivat auttaa sinun yritystäsi, ota yhteyttä. [Hinta mietityttää? Lue, miksi laatu on sijoitus](/hinta) [Ota yhteyttä ](/#contact)[Portfolio](/#portfolio) --- # From 512KB Club to the Astro Showcase > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## **The Next Milestone: The Astro Showcase 🚀** Not long ago, I shared the news of **DigiSolutech** joining the **512KB Club**. Today, I’m excited to announce another major milestone: our site has been officially featured in the **Astro Showcase**. Being recognized by the team behind the framework is more than a badge—it’s a validation of a specific architectural philosophy. It proves that you can build a modern, feature-rich business site while maintaining the “Orange Team” performance standards (staying under 250KB). In this article, I’ll break down the specific technical configuration that allowed me to scale my site’s features without bloating the bundle. ## **The Challenge: Scaling Without Bloating ⚖️** As a freelancer, my site needed to grow. I needed better SEO, a more robust design system, and improved developer experience (DX). The goal was simple but difficult: **Maintain a sub-250KB footprint while using a modern component framework.** ## **Technical Deep Dive: The Stack 🛠️** Here is how I leveraged Astro 5 to stay lean. ### **1. Hybrid CSS Strategy (Bootstrap + PurgeCSS)** Most developers avoid Bootstrap because it’s “heavy.” However, by using a specialized build pipeline, I kept the CSS footprint tiny. In my `astro.config.mjs`, I integrated **PurgeCSS** via Vite: ```js export default defineConfig({ vite: { css: { postcss: { plugins: isProduction ? [ purgeCSSPlugin({ content: ['./src/**/*.astro'] }) ] : [] } } } }); ``` **How it works:** Even though I have `bootstrap` in my dependencies, the production build scans my `.astro` files and **deletes every single line of CSS I’m not using.** This turned a massive library into a few dozen kilobytes of critical utility classes. ### **2. Critical CSS Injection** To achieve that “instant-on” feel that the Astro team looks for, I used `astro-critical-css`. This integration extracts the CSS required for the initial viewport and inlines it directly into the ``. This eliminates the “Flash of Unstyled Content” (FOUC) and allows the browser to render the page before it even finishes downloading the main stylesheet. ### **3. Smart Metadata & SEO** Performance is nothing if users can’t find you. I utilized `@astrojs/sitemap` and `astro-seo-metadata` to ensure that every page is perfectly indexed without adding a single byte of client-side JavaScript. ## **Lessons from the Showcase 🎓** What makes an “Astro” site different from just any fast site? 1. **Island Architecture:** I used `lucide-astro` for icons. Because Astro is “HTML-first,” these icons are rendered as pure SVGs at build time. No icon-font library (like FontAwesome) is ever sent to the user. 1. **Predictable Prefetching:** In my config, I enabled `prefetch: true`. This tells Astro to begin downloading the next page’s data when a user hovers over a link, making the site feel like a single-page app (SPA) despite being purely static. 1. **Zero-JS Interactivity:** I leaned heavily on the “Astro Way”—using standard HTML and CSS for interactions (like mobile menus and modals) whenever possible, reserving JavaScript only for complex logic. On the other hand, I import only bootstrap components that are in use, which decreases the final javascript output. ## **The Result: Best of Both Worlds 🌟** By combining the discipline of the **512KB Club** with the power of **Astro**, I’ve achieved a site that is: - **Developer Friendly:** I can use components, loops, and logic. - **User Friendly:** It loads in milliseconds. - **Environmentally Friendly:** Low data transfer means a lower carbon footprint. ## **Conclusion** Being featured in the Astro Showcase is a reminder that the web doesn’t have to be bloated to be beautiful. If you are a freelancer or a small business owner, I encourage you to look beyond the “standard” heavy frameworks. **Performance isn’t a technical detail—it’s a competitive advantage.** --- # Worry-Free, Fast Websites > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## DigiSolutech: Your Partner from Turku We build high-performance, SEO-friendly **websites** designed for entrepreneurs: - **Worry-Free**: We handle everything from technology to updates. You focus on what you do best. - **Performance**: Forget slow, bloated platforms. We build ultra-fast sites that Google and your customers notice. - **Security**: We always deliver GDPR-compliant, accessible (WCAG 2.1 AA) and safe websites. ## Our Services Solutions for every need ### Websites for Businesses We build websites optimized for **sales** and **visibility**. No unnecessary code, just pure performance. ### Websites for Organizations **Secure** and **accessible** websites that serve all members. We ensure your organization's message reaches its audience effortlessly. ### Personal Websites Portfolio, CV, or blog that stands out. We build a platform for your **personal brand** that's technically ahead of the competition. ## Why Choose DigiSolutech? ### Time is Money Every second your site takes to load is a potential lost customer. Our sites load instantly. ### Responsibility as Standard GDPR compliance, accessibility, and ecological, lightweight code are always included. ### Complete Support You're never alone. Changes and updates are handled quickly with a single message. ## Asiakkaamme suosittelevat Tyytyväisyystakuu on lupauksemme, mutta meidän asiakkaamme kertovat parhaiten. Highly recommended! I am really glad that I've decided to work with DigiSolutech. They took the time to truly understand my goals. The details, creativity, and professionalism really set them apart. ### Mike Georgiou Board Game Designer · the-game-mechanics.com Excellent work on my website, highly satisfied with the quality and professionalism. ### Giorgos Riskas Founder & CEO · justgames.fi DigiSolutech thank you very much for your valuable help! Our cooperation is perfect. ### Ioannis Lambropoulos Kirkkoherra · ort.fi/turku ## Our Simple Process From consultation to launch, we make it easy 1 ### Free Consultation We assess your needs without commitments. 2 ### Design We create a proposal and design your homepage. 3 ### Development We build and test. You just provide the content. 4 ### Launch & Support Enjoy your new site while we handle maintenance. ## Leave Technical Stress Behind Ready to get started? Let's discuss your project. [Contact Us](/#contact) --- # GDPR-Tietosuoja: Luotettavat ja Lainmukaiset Kotisivut > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Tietosuoja on Tärkeintä: Mielenrauha Asiakkaalle ja Yritykselle Tietosuoja (General Data Protection Regulation, GDPR) on EU:n laajuinen laki, joka suojaa asiakkaidesi ja kävijöidesi henkilötietoja. Se ei ole vain pakollinen vaatimus, vaan välttämätön perusta yrityksellesi. GDPR on tapa rakentaa luottamusta sinun ja asiakkaidesi välille jo ensimmäisestä klikkauksesta lähtien. Jos käsittelet suomalaisten tai EU-kansalaisten tietoja (esim. sähköposteja, lomakkeiden vastauksia, nimiä), sinun täytyy noudattaa GDPR-lakia. ## Riskit, jos et noudata lakia ### Taloudellinen Riski Jos käsittelet tietoja väärin, saatat joutua maksamaan suuria sakkoja. Sakot voivat nousta jopa **20 miljoonaan euroon tai 4 % liikevaihdosta** (riippuen siitä, kumpi on suurempi). Pienetkin puutteet voivat johtaa huomautuksiin ja korjausvaatimuksiin. ### Maineen Riski Jos yrityksesi joutuu tietovuodon kohteeksi tai saa negatiivista julkisuutta huonon tietosuojan vuoksi, menetät asiakkaiden luottamuksen pysyvästi. **Luottamuksen rakentaminen on hidasta, mutta sen menettäminen on nopeaa.** ## Näin Huolehdin Sinun Tietoturvastasi Integroin GDPR-vaatimukset suoraan koodiin ja sivustosi tekniseen arkkitehtuuriin. GDPR on oletusarvoisesti päällä – sinun ei tarvitse huolehtia erillisistä lisäosista. ### Selkeät Säännöt Autan luomaan selkeän tietosuojaselosteen, joka kertoo asiakkaillesi mitä tietoja kerätään, miksi ja kuinka kauan. ### Vähän Evästeitä Privacy-first periaate: evästeitä vain välttämättömään toiminnallisuuteen. Ei turhaa seurantaa tai mainosevästeitä. ### Turvalliset Palvelimet Netlify-palvelimet tarjoavat automaattisen päästä päähän -salauksen (HTTPS). Tieto on suojattu siirron aikana. ### Ei Jäljitystä En asenna kolmannen osapuolen mainos- tai seurantaevästeitä ilman nimenomaista pyyntöäsi. ## Entä Jos Tarvitset Tietokantaa? Monimutkaisemmat sovellukset, kuten verkkokaupat, varausjärjestelmät tai jäsenrekisterit, vaativat tietokannan. Jos rakennan sinulle tällaisen sovelluksen, käytän **Supabasea** – modernia, avoimen lähdekoodin alustaa, joka on suunniteltu turvallisuutta ja skaalautuvuutta silmällä pitäen. ### Tietoturva Supabasessa - **Row-Level Security (RLS):** Varmistan, että tietojen käsittely noudattaa GDPR-sääntöjä myös tietokantatasolla. - **Anon-käyttö:** Hallitsen tarkasti, miten anonyymit käyttäjät pääsevät käsiksi tietoihin, minimoiden riskit. ## Saat Mielenrauhan ja Kilpailuedun Kun valitset minut, et saa vain teknistä kehittäjää, vaan saat teknisen kumppanin, joka ymmärtää sekä koodin että lailliset vaatimukset. Hoidan puolestasi digitaalisen vastuun, jotta voit keskittyä siihen, missä olet paras, yrityksesi kasvuun ja asiakkaiden palvelemiseen. **Asiantunteva GDPR-toteutus on nykyään kilpailuetu,** joka erottaa sinut niistä, jotka oikovat tietoturvassa. ## Varmista Yrityksesi Tietoturvaiani Kysy GDPR-turvasta ja saa tarjouksen. Ota yhteyttä ilman sitoumuksia. [Ota yhteyttä](/#contact) --- # Kotisivut Yksityishenkilöille: Portfolio ja Brändi > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. Oletko asiantuntija, taiteilija tai freelance-ammattilainen? Nettisivusi on sinun digitaalinen käyntikorttisi. Et tarvitse vain tilaa verkossa, tarvitset alustan, joka heijastaa lahjakkuuttasi ja antaa sinulle täyden luovan vapauden. Teen sinulle räätälöidyn kotisivun, joka on rakennettu modernilla pinolla (Astro/Netlify). Tämä tarkoittaa, että sivustosi on nopea, luotettava ja, mikä tärkeintä, **omistat sen kokonaan**. ## Ero Valmisalustaan: Täysi Omistajuus ja Säästöt Valmisalustat houkuttelevat matalilla aloituskustannuksilla, mutta sitovat sinut ikuiseen kuukausimaksuun. ### Omistat Kaiken Koodin Täydellinen hallinta koodiin, sisältöön ja ulkoasuun. Jos haluat vaihtaa ylläpitäjää tai siirtää sivun omalle palvelimelle, se onnistuu. **Et ole lukittu mihinkään ekosysteemiin.** ### Ei Piilokuluja Vaikka aloitusinvestointi on hieman suurempi, säästät pitkällä aikavälillä merkittävästi. Valmisalustojen toistuvat kuukausimaksut (hosting, premium-teemat, lisäosat) kertyvät vuosien varrella suuriksi summiksi. ### Maksimaalinen Joustavuus Valmisalustojen mallipohjat rajoittavat. Halutessasi epätavallisen gallerian, ainutlaatuisen blogin asettelun tai erikoisen animaation, **räätälöity koodi antaa rajoittamattoman vapauden**. ## Palvelut Sinulle ### Ultra-nopea Portfolio **Ongelma:** Hitaasti latautuva portfolio menettää potentiaalisia työnantajia. Yli 3 sekuntia → käyttäjät hylkäävät sivun. **Ratkaisu:** Astro Framework + staattinen sivuston generointi = välitön latautuminen. Korkea Google PageSpeed pistemäärä = merkki ammattitaidosta. ### Moderni Blogi ja Animaatiot Jos olet sisällöntuottaja tai asiantuntija, blogisi on tärkein työkalu brändin rakentamisessa. - **SEO sisäänrakennettuna:** Hakukoneystävällinen rakenne - **Integraatiot:** Mailchimp, Calendly, Paypal - **Responsiivinen:** Upea kaikilla laitteilla ### Joustava Ylläpito, keskity vain Sisältöön Haluatko vain kirjoittaa ja jättää tekniset huolet minulle? - Tietoturvapäivitykset - Pienet tekstimuutokset - Tekninen valvonta - Sisällön päivitykset pyynnöstä [_&#xNAN;_Lue lisää ylläpidosta](/yllapito) ## Kenelle Palveluni Sopii? - **Valokuvaajat ja taiteilijat:** Portfoliot, jotka näyttävät työsi parhaimmillaan - **Kehittäjät ja suunnittelijat:** Tekniset portfoliot projekteillesi - **Konsultit ja asiantuntijat:** Henkilöbrändi ja ammattitaidon esittely - **Muusikot ja esiintyjät:** Mediagalleriat ja booking-lomakkeet - **Kirjailijat ja bloggaajat:** Modernit blogialustat ja lukijayhteys ## Älä Käytä Valmispohjaa, Rakenna Brändi Kotisivusi on sinun brändisi. Älä tyydy siihen, että näytät samalta kuin sadat muut. Rakenna jotain, joka on yhtä ainutlaatuinen ja ammattimainen kuin sinä itse. Tavoitteeni on antaa sinulle työkalu, joka erottaa sinut kilpailijoista ja kasvattaa ansaintapotentiaaliasi. ## Laita Viestiä ja Aloitetaan Projektin Kerro minulle, mitä haluat esitellä maailmalle. Rakennetaan yhdessä kotisivua, joka avaa ovia. [Ota yhteyttä](/#contact) --- # Miksi Kotisivut Maksavat enemmän kuin 200€? > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Tärkein Kysymys: Paljonko Nettisivu Maksaa? On totta, että voit saada nettisivun mistä tahansa alustasta (kuten Wix tai WordPress) todella halvalla, joskus jopa "ilmaiseksi". Mutta minun työssäni kyse on jostain muusta: **sijoituksesta, joka tuo sinulle turvaa ja uusia asiakkaita**. Tässä kerron, mitä halvat sivut maksavat sinulle piilokuluina, riskeinä ja menetettyinä myynteinä. ## Totuus "Halvasta" Kotisivusta Kun ostat "halvan paketin", saat usein sivuston, joka on rakennettu massatuotantoalustoille. Nämä sivut eivät ole sinun. ### Et Omista Sivustoasi Kun käytät valmiita alustoja, et omista nettisivun koodia. Jos haluat myöhemmin vaihtaa palveluntarjoajaa tai lisätä erikoisominaisuuksia, et voi. **Olet lukittu heidän järjestelmäänsä.** **DigiSolutechin ratkaisu:** Minun rakentamani sivustot ovat sinun omistuksessasi. Halutessasi saat kaiken koodin. Sinulla on täysi vapaus muuttaa, laajentaa tai siirtyä toiseen palveluun. ### Piilokulut ja Lisenssit Alustan "ilmainen" hinta on harvoin totta. Pian joudut maksamaan: - Lisenssejä ulkoasuun (teema) - Lisenssejä tärkeisiin toimintoihin (lisäosat, esim. lomakkeet) - Lisää maksua, jos sivustollasi vierailee liikaa ihmisiä **Nämä pienet maksut kasvavat nopeasti** ## Pimeä Puoli: Riski, joka Maksaa Enemmän kuin Sivu Halvimmat sivut altistavat yrityksesi kahdelle vakavalle riskille, jotka voivat johtaa sakkoihin tai asiakkaiden menetykseen. ### Saavutettavuus (Laki 2025) Euroopan saavutettavuusdirektiivi (European Accessibility Act, EAA) tuli voimaan 2025. Se asettaa suuret vaatimukset sille, miten sivustosi täytyy toimia kaikille ihmisille. _&#xNAN;_Halvat teemat eivät täytä näitä standardeja. **Sinä kannat aina vastuun laillisista vaatimuksista.** ### Suorituskyky Google haluaa näyttää vain nopeita sivuja. Jos sivusi on hidas, Google laskee sinut hakutuloksissa. - Jokainen sekunti latautumisessa → **20 % kävijöistä lähtee pois** - Halvat sivut täynnä turhaa koodia → hitaita matkapuhelimilla **DigiSolutechin etu:** Käytän Astro Frameworkia ja Netlifyä. Sivut optimoitu läpäisemään Googlen Core Web Vitals -testit. ## Minun Ratkaisuni: Sijoitus, Ei Vain Kulu Kun valitset minut, ostat enemmän kuin koodia – ostat mielenrauhan ja kestävyyden. ### Räätälöity Rakenne En käytä valmiita templaatteja. Kotisivusi on rakennettu juuri sinun tarpeisiisi, mikä varmistaa ainutlaatuisen ulkoasun ja parhaan suorituskyvyn. ### Lainmukainen Turva Sivusi on alusta asti rakennettu GDPR- ja Saavutettavuus-lakien mukaiseksi. Sinun ei tarvitse huolehtia sakoista. ### Täysi Ylläpito Hoidan kaiken puolestasi: tietoturva, päivitykset ja nopeat muutokset ilman yllätyslaskuja. Sinä voit keskittyä yrityksesi kasvuun. ### Lopputulos Hinta, jonka maksat laadusta, on **paljon pienempi** kuin hinta, jonka maksat halvan sivuston aiheuttamista menetyksistä. ## Vertailu: Halpa vs. Laadukas Ominaisuus | Halpa Ratkaisu | DigiSolutech Omistajuus | Lukittu alustaan | Täysi omistus Piilokulut | Lisenssit, lisäosat | Ei piilokustannuksia Saavutettavuus | Ei takuita | WCAG 2.1 AA Nopeus | Hidas, turha koodi | Core Web Vitals optimoitu GDPR | Sinun vastuullasi | Sisäänrakennettu ## Oletko Valmis Investoimaan Sivustoon, joka Oikeasti Tukee Liiketoimintaasi? [Ota yhteyttä](/#contact) --- # Privacy Policy > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. This Privacy Policy describes our policies and procedures on the collection, use, and disclosure of your information when you use our Service and tells you about your privacy rights and how the law protects you. We use your Personal Data to provide and improve the Service. By using the Service, you agree to the collection and use of information in accordance with this Privacy Policy. ## Interpretation and Definitions ### Interpretation The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural. ### Definitions For the purposes of this Privacy Policy: **Company** (referred to as either “the Company”, “We”, “Us” or “Our” in this Agreement) refers to DigiSolutech, registered in Finland. **Cookies** are small files that are placed on your computer, mobile device, or any other device by a website, containing details of your browsing history on that website among its many uses. **Country** refers to: Finland **Device** means any device that can access the Service such as a computer or a mobile device. **Personal Data** is any information that relates to an identified or identifiable individual. **Service** refers to the Website. **Service Provider** means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used. **Third-party Service Provider** refers specifically to external companies that provide specific functionalities used by our Service. **Website** refers to DigiSolutech, accessible from **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable. ## Collecting and Using Your Personal Data ### Types of Data Collected #### **Usage Data** We use anonymous metrics to understand how you use your website and where our traffic comes from. We use this insight to improve our website and create a better experience for visitors. We do not track you, serve personalized advertising, or sell the data to anyone. Our website is powered by Rybbit, a privacy-friendly web analytics provider. You can learn more about Rybbit on their [website](https://rybbit.com/privacy). Our third-party service providers, including our hosting provider (Netlify) may automatically collect certain Usage Data when you use our Service. This Usage Data may include information such as Your Device’s Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data. When You access the Service by or through a mobile device, these service providers may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data. Information that Your browser sends may also be collected by these service providers whenever You visit our Service or when You access the Service by or through a mobile device. For more information about how our service providers collect and process this data, we encourage you to review their respective privacy policies: - [Netlify](https://www.netlify.com/privacy/) #### **Personal Data** While using our Service, we may collect certain personally identifiable information that can be used to contact or identify you. Personally identifiable information may include, but is not limited to: - Email address - Name - Company’s name - Phone number - Message This information may be collected when: - You contact us via email or our contact form ### Tracking Technologies and Cookies We do not use any analytics cookies, tracking technologies, or advertising cookies on our website. ### Use of Your Personal Data The Company may use Personal Data for the following purposes: **To provide and maintain our Service**, including to monitor the usage of our Service. **To contact you**: To respond to your inquiries and provide the digital services you have requested from us. **For business purposes**: To evaluate and improve our AI chatbot service, review conversations for quality assurance, and better understand your needs. **To provide our digital services**: For the development, compliance and undertaking of the contract for the digital services you have purchased from us. **To manage your requests**: To attend and manage your requests to us. **To comply with legal obligations**: To comply with legal requirements and respond to legitimate legal requests from authorities. ### Client Confidentiality and Non-Disclosure Agreements For clients who engage our services, we provide an additional layer of privacy protection through Non-Disclosure Agreements (NDAs). These agreements are facilitated through our partner Omapaja and establish: - Strict confidentiality obligations regarding all client information - Explicit limitations on how client data may be used and shared - Legal protection for your sensitive business information - Clear terms regarding the handling of proprietary information This contractual protection operates in addition to our standard privacy practices and provides enhanced security for our business relationships. ### Retention of Your Personal Data The Company will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies. Email communications will be deleted at the end of each calendar year, unless there is a legitimate business or legal reason to retain them longer (such as ongoing project). ## Your Data Protection Rights Under GDPR If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights under the General Data Protection Regulation (GDPR). We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data. If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please contact us. In certain circumstances, you have the following data protection rights: - **The right to access, update or delete** the information we have on you - **The right of rectification** - the right to have your information corrected if it is inaccurate or incomplete - **The right to object** to our processing of your Personal Data - **The right of restriction** - the right to request that we restrict the processing of your personal information - **The right to data portability** - the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format - **The right to withdraw consent** at any time where we relied on your consent to process your personal information Please note that we may ask you to verify your identity before responding to such requests. You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA). ## Payment Processing Currently, we process payments through invoicing services provided by Omapaja, a third-party service provider. They may collect and process payment-related information necessary for invoicing purposes. ## Transfer of Your Personal Data Your information, including Personal Data, is processed at the Company’s operating offices and in any other places where the parties involved in the processing are located. This means that this information may be transferred to — and maintained on — computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ from those of your jurisdiction. Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer. The Company will take all steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of your data and other personal information. ## Disclosure of Your Personal Data ### Legal Requirements The Company may disclose your Personal Data in the good faith belief that such action is necessary to: - Comply with a legal obligation - Protect and defend the rights or property of the Company - Prevent or investigate possible wrongdoing in connection with the Service - Protect the personal safety of users of the Service or the public - Protect against legal liability ## Security of Your Personal Data The security of your Personal Data is important to us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security. ## Children’s Privacy Our Service does not address anyone under the age of 16, in compliance with European data protection regulations. We do not knowingly collect personally identifiable information from anyone under the age of 16. If you are a parent or guardian and you are aware that your child has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from anyone under the age of 16 without verification of parental consent, we take steps to remove that information from our servers. ## Links to Other Websites Our Service may contain links to other websites that are not operated by us. If you click on a third-party link, you will be directed to that third party’s site. We strongly advise you to review the Privacy Policy of every site you visit. We have no control over and assume no responsibility for the content, privacy policies or practices of any third-party sites or services. ## Changes to this Privacy Policy We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page. You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page. ## Contact Us If you have any questions about this Privacy Policy, you can contact us: - By email: - For GDPR-related inquiries, data access, correction, or deletion requests, please specify this in your email subject line. --- # The Game Mechanics > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 Tämä projekti oli ammattimainen portfolio- ja B2B-verkkosivusto “The Game Mechanics” studiolle. Asiakas on lautapelien suunnittelijatiimi, joka tarvitsi sivuston, joka esittelee heidän töitä ja palveluita muille yrityksille. Minun roolini oli projektin koko tekninen toteutus: suunnittelu, kehitys ja julkaisu. Rakensin sivuston alusta loppuun asiakkaan tarpeiden pohjalta. ## Tärkeimmät ominaisuudet: ✨ - Helppo sisällönhallinta 🎨: Asiakas voi itse lisätä, muokata ja poistaa portfolioonsa kuuluvia pelejä helppokäyttöisen DecapCMS hallintapaneelin kautta. - Nopea ja moderni ⚡️: Sivusto on rakennettu Astro-teknologialla, mikä tekee siitä erittäin nopean ja suorituskykyisen. - Turvallisuus 🛡️: Sivustolla on vahvat turvallisuusasetukset (kuten CSP ja muut säännöt netlifyssä), jotka suojaavat sitä hyökkäyksiltä. - Dynaaminen portfolio 📄: Pelien tiedot haetaan automaattisesti Markdown-tiedostoista, joten etusivun portfolio-ruudukko päivittyy itsestään, kun asiakas lisää uuden pelin. ## Käytetyt teknologiat: 🛠️ - Frontend: Astro, Bootstrap, Bootstrap Icons - Sisällönhallinta: Decap CMS - Palvelin ja julkaisu: Netlify - Tietoturva: HTTP Security Headers ## Tarkoitus ja tavoite 🎯 Projektin tavoite oli luoda ammattimainen ja luotettava “käyntikortti” pelisuunnittelutiimille. Heidän piti pystyä esittelemään laajaa portfoliota helposti ja selkeästi mahdollisille uusille kumppaneille. Tärkein vaatimus oli, että asiakkaan täytyy pystyä hallinnoimaan pelilistaustaan itse ilman, että heidän tarvitsee osata koodata. Tämän vuoksi helppokäyttöinen hallintapaneeli oli projektin ytimessä. Tämän projektin “paras ominaisuus” on kahden asian yhdistelmä: Astro-teknologian tuoma nopeus ja Decap CMS:n tuoma helppo ylläpito asiakkaalle. ## Tekniset haasteet ja ratkaisut: 🔧 ### Haaste: Helppo ylläpito ilman hidastumista 😟 Yleensä helppo sisällönhallinta (kuten WordPress) tekee sivustoista hitaampia. Tavoite oli pitää sivu staattisena ja huippunopeana, mutta antaa asiakkaalle silti täysi kontrolli sisältöön. **✅ Ratkaisu: Rakensin sivuston Astrolla, joka on staattinen sivugeneraattori:** Yhdistin siihen Decap CMS:n. Kun asiakas lisää uuden pelin, hän täyttää yksinkertaisen lomakkeen. Decap CMS luo tästä uuden Markdown-tiedoston. Astro huomaa tämän tiedoston, ja rakentaa koko sivuston uudelleen staattiseksi HTML-sivuksi. Lopputulos? Asiakas saa helpon napin painalluksen, ja käyttäjä saa huippunopean sivun. ### Haaste: Turvallisuus B2B-sivustolla 😟 Koska sivusto on suunnattu yrityksille, sen on oltava erityisen luotettava ja turvallinen. **✅ Ratkaisu: Pelkän staattisen sivuston käyttö on jo itsessään turvallista (ei tietokantoja, joihin murtautua)** Lisäksi määritin netlify-palvelimessa tiukat turvallisuussäännöt (Content Security Policy, X-Frame-Options, jne.). Nämä säännöt estävät yleisimmät selainpohjaiset hyökkäykset ja varmistavat, että sivusto on ammattimainen ja turvallinen. ## Mittarit & Standardit 📊 Tämä projekti on erinomainen esimerkki staattisen sivuston eduista. Se on optimoitu alusta asti olemaan nopea ja turvallinen. ### Suorituskyky ⚡ - Sivusto on rakennettu Astrolla, mikä tarkoittaa, että sivut ovat valmiiksi rakennettua HTML:ää. Tämä takaa välittömät latausajat ilman tietokantaviiveitä. - Kaikki kuvat käytetään modernissa WebP-muodossa, mikä pienentää tiedostokokoa huomattavasti laadusta tinkimättä. - CSS ladataan kriittisena ja JavaScript viivästysti `defer`, jotta sivun sisältö piirtyy käyttäjän ruudulle mahdollisimman nopeasti. ### Hakukoneoptimointi 📈 - Sivustolla on automaattisesti generoituva sivukartta (sitemap) ja robots.txt-tiedosto hakukoneita varten. - Jokaisella sivulla on `astro-seo-metadata`-komponentin avulla hallitut otsikot, kuvaukset ja Open Graph-tiedot sosiaalista mediaa varten. - Sivusto käyttää oikeita HTML5-elementtejä (`header, main, article`), mikä auttaa hakukoneita ymmärtämään sisältöä paremmin. ### Tietoturva 🛡️ - `Netlify.toml`-tiedostossa on määritetty tiukat turvallisuussäännöt, kuten HSTS (pakotettu HTTPS), X-Frame-Options (estää sivuston upottamisen toiseen sivuun) ja CSP (Content Security Policy). - Koska sivusto ei käytä perinteistä tietokantaa, se on immuuni yleisimmille hyökkäyksille, kuten SQL-injektioille. ### Yksityisyys 🤫 - Sivusto ei käytä seurantaevästeitä tai analytiikkaa, jotka keräisivät käyttäjätietoja ilman lupaa. - Sivustolle on luotu selkeä tietosuojaseloste, joka kertoo avoimesti käytännöistä. ### Saavutettavuus ♿ - Navigaatiossa ja linkeissä on käytetty `aria-label`-attribuutteja, jotka auttavat ruudunlukijoita ymmärtämään painikkeiden tarkoituksen (esim. sosiaalisen median ikonit). - Sivusto on suunniteltu toimimaan kaikilla laitteilla mobiilista työpöytään. - Kuvissa, jotka ovat vain koristeena, on `aria-hidden="true"`, jotta ne eivät häiritse ruudunlukijan käyttäjää. ## Nykyinen tilanne 🟢 Sivusto on tällä hetkellä livenä ja aktiivisessa käytössä. Se toimii heidän päääsiallisena portfolionaan, kun he ovat yhteydessä uusiin julkaisijoihin ja kumppaneihin. Asiakkaat ovat olleet erittäin tyytyväisiä siihen, miten helppoa uusien pelien lisääminen on ollut. ## Opetukset 🎓 ### Ei-tekniset opit 🤔 Tämä projekti opetti paljon B2B-asiakkaiden kanssa työskentelystä. Heille tärkeintä on luotettavuus, ammattimaisuus ja ennen kaikkea helppokäyttöisyys. Selkeä ohjeistus on yhtä tärkeä kuin itse koodi. ### Tekniset opit 👨‍🎓 Tämä projekti oli täydellinen esimerkki Astro + Decap CMS yhdistelmän voimasta. Se on ihanteellinen ratkaisu portfolio-sivustoille. ### Saavutettavuus ♿ Bootstrap tarjoaa helppokäyttöisen kehyksen valmiille tyyleille, asettelutyökaluille ja interaktiivisille komponenteille, joiden avulla kehittäjät voivat luoda verkkosivustoja ja sovelluksia. Bootstrapilla on mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.2 -standardin. ## Katso sivu livenä - [The Game Mechanics](https://the-game-mechanics.com/) --- # Autokorjaamo Garage21 > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 “Garage21” on autokorjaamo Kalamatassa, Kreikassa. Heidän vanha verkkosivunsa oli teknisesti vanhentunut, hidas eikä toiminut kunnolla mobiililaitteilla. Rakensin heille uuden sivuston alusta asti. Toisin kuin muissa projekteissani, en käyttänyt tässä raskaita kehyksiä, vaan luotin perinteiseen ja kevyeen koodiin (HTML & SCSS). Tavoitteena oli maksimaalinen nopeus ja luotettavuus. ## Tärkeimmät ominaisuudet: ✨ - Täysin responsiivinen 📱: Sivu näyttää hyvältä kaikilla laitteilla, mikä on tärkeää, sillä asiakkaat etsivät apua usein tien päällä puhelimella. - Google Maps integraatio 🗺️: Upotettu kartta auttaa asiakkaita löytämään korjaamon helposti. - Yhteydenottolomake 📧: Asiakkaat voivat varata ajan tai kysyä huollosta suoraan sivun kautta ilman sähköpostiohjelman avaamista. - Paikallinen SEO 🇬🇷: Sivusto on optimoitu kreikankielisille hakusanoille (kuten “autokorjaamo Kalamata”), jotta paikalliset löytävät sen. ## Käytetyt teknologiat: 🛠️ - **Kielet**: HTML5, SCSS (Sass) - **Lomakkeet**: Netlify Forms (serverless) - **Hosting**: Netlify - **Optimointi**: Lazy loading kuville ja kartoille ## Tarkoitus ja tavoite 🎯 Asiakkaan suurin ongelma oli vanha verkkosivualusta, joka oli buginen ja vaikea käyttää. He menettivät asiakkaita, koska yhteystiedot ja palvelut eivät löytyneet helposti. Tavoitteeni oli luoda “huoleton” sivusto: sellainen, joka ei mene rikki päivitysten myötä ja joka latautuu salamannopeasti myös hitaalla 3G-yhteydellä. Tämän projektin “tähti” on sen tekninen yksinkertaisuus. Koska sivusto on pelkkää HTML:ää ja CSS:ää, se on käytännössä mahdotonta “hakkeroida” ja se toimii millä tahansa laitteella, jopa vanhoilla selaimilla. ## Tekniset haasteet ja ratkaisut: 🔧 ### Haaste: Lomakkeet ilman taustajärjestelmää 🔨 Halusin sivustolle yhteydenottolomakkeen, mutta en halunnut pystyttää raskasta palvelinta (backend) tai tietokantaa pelkästään sitä varten. ✅ **Ratkaisu: Käytin Netlify Forms** Lisäämällä HTML-lomakkeeseen pienen netlify-attribuutin, Netlify hoitaa viestien vastaanottamisen ja lähettää ne automaattisesti asiakkaalle sähköpostilla. Tämä on turvallinen ja ilmainen ratkaisu pienyritykselle. ### Haaste: Kartan latausnopeus 🗺️ Google Maps kartan upottaminen (iframe) yleensä hidastaa sivun latautumista merkittävästi. ✅ **Ratkaisu: Lisäsin karttaan `loading="lazy"` attribuutin** Tämä kertoo selaimelle, että kartta ladataan vasta sitten, kun käyttäjä vierittää sivua alaspäin kohti karttaa. Sivun yläosa aukeaa siis heti ilman viivettä. ## Mittarit & Standardit 📊 Yksinkertaisen rakenteen ansiosta sivusto saa huippupisteet suorituskyvystä. ### Suorituskyky (Performance) ⚡: - Koska sivustolla ei ole JavaScript-kehyksiä hidastamassa, se saa Googlen nopeustesteistä täydet pisteet. - Kaikki kuvat on optimoitu WebP-muotoon ja niissä on width ja height mitat, mikä estää sivun “hyppimisen” latauksen aikana. ### Hakukoneoptimointi (SEO) 📈: - Sivulla on tarkat kreikankieliset avainsanat (keywords) ja kuvaukset (description), jotka auttavat Googlea ymmärtämään, että kyseessä on paikallinen palvelu. - Sosiaalisen median jaot näyttävät ammattimaisilta oikeiden otsikoiden ja kuvien ansiosta. ### Tietoturva (Security) 🔐: - `netlify.toml` tiedostossa on määritetty tiukat tietoturvaotsikot, jotka estävät mm. XSS-hyökkäykset ja pakottavat salatun HTTPS-yhteyden. - Koska sivustolla ei ole tietokantaa tai dynaamista koodia, hyökkäyspinta-ala on olematon. ### Yksityisyys (Privacy) 👁️: - Sivusto kunnioittaa yksityisyyttä. Ei Google Analyticsia tai mainosevästeitä. - Koska seurantaa ei ole, raskaita evästebannereita ei tarvita, mikä parantaa käyttökokemuetta. ### Saavutettavuus (Accessibility) ♿: - Lomakenteissä ja linkeissä on selkeät kuvaukset ruudunlukijoille. - Tekstin ja taustan värit täyttävät saavutettavuusstandardit. ## Nykyinen tilanne 🟢 Sivusto on aktiivisessa käytössä ja palvelee korjaamon asiakkaita päivittäin. Se on osoitus siitä, että aina ei tarvita monimutkaista teknologiaa – joskus yksinkertainen on paras. ## Opetukset 🎓 Opin, kuinka paljon pelkkä kuvien ja iframe-upotusten laiska lataus (lazy loading) vaikuttaa sivun nopeuteen mobiiliverkoissa. ## Katso sivu livenä - [Autokorjaamo Garage21](https://garage21.netlify.app/) --- # Premium Hero-osio > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 Tämä projekti oli verkkosivun etusivun tärkeimmän osan (hero-osion) laaja suunnittelu- ja kehitystyö. Muutin tavallisen etusivun osan korkeatasoiseksi ja mukaansatempaavaksi kokemukseksi. Tavoite oli luoda enemmän kuin pelkkä kuva. Halusin rakentaa interaktiivisen osion, joka vahvistaa brändiä, viestii laadusta ja rakentaa luottamusta heti ensimmäisestä hetkestä alkaen. Minun roolini oli hoitaa koko prosessi: suunnittelu ja koodaus alusta loppuun. Vastasin siitä, että “premium” ja “luotettava” tuntu muuttuivat toimivaksi, suorituskykyiseksi ja saavutettavaksi koodiksi. ## Tärkeimmät ominaisuudet ✨ - Hienot visuaaliset yksityiskohdat 🎨: Monitasoinen ulkoasu, jossa on “lasimorfismia”, dynaamisia animoituja liukuvärejä ja muuttuvia taustakuvioita. - Interaktiiviset 3D-elementit 📱: “Kelluva” 3D-puhelimen kuva, parallaksi-tehosteet ja interaktiiviset luottamuselementit, jotka reagoivat hiireen. - Pienet animaatiot ✨: Yksityiskohtaiset tehosteet napeissa, korteissa ja merkeissä (kuten “väreily-efekti” klikatessa). Ne antavat hyvää palautetta käyttäjälle. - Luottamuksen rakentaminen 🤝: Selkeästi näkyvillä oleva sosiaalinen todiste (esim. “100,000+ asiakasta”) ja “lasiset” asiakaspalautteet. - Suorituskyky ja saavutettavuus 🚀: Animaatiot on optimoitu toimimaan nopeasti (käyttäen IntersectionObserver-rajapintaa). Ne kunnioittavat myös käyttäjän asetuksia, jos hän haluaa vähemmän liikettä. ## Käytetyt teknologiat 🛠️ - Frontend: HTML5, TailwindCSS, JavaScript - Animaatiot: CSS-animaatiot, animate.css, IntersectionObserver API - UI/Ikonit: DaisyUI, Ion Icons - Avainkäsitteet: Lasimorfismi, Parallaksi-vieritys, Mikrointeraktiot, Responsiivinen design, Saavutettavuus (ARIA) ## Tarkoitus ja tavoite 🎯 Päätavoite oli parantaa “SellMyPhone”-sivuston brändi­kuvaa. Ohjeena oli uudistaa sellmycellphone.com-sivua. Alkuperäinen pyyntö oli luoda “minimalistinen ja selkeä tyyli”, joka käyttää hienostunutta väripalettia. Tavoitteena oli “rauhallinen ja luotettava brändi­kuva.” Halusin luoda visuaalisesti upean ja interaktiivisen osion. Sen piti heti viestiä laadusta ja osaamisesta, ja näin perustella palvelun premium-taso. Suunnittelu keskittyi hienovaraisten tehosteiden kerrostamiseen – lasimorfismi, 3D-efektit ja dynaamiset liukuvärit. Näin sain aikaan syvyyttä ja hienostuneisuutta, joka puuttuu tavallisesta “litteästä” designista. Tämän projektin paras ominaisuus ei ole yksi asia, vaan monen hienon osan yhdistelmä. Yhdessä ne luovat yhtenäisen “premium”-tunteen. ## Tekniset haasteet ja ratkaisut: 🔧 ### Haaste: Lasimorfismi eri selaimissa 😟 Yhtenäisen ja nopean “sumennus”-tehosteen tekeminen on vaikeaa, varsinkin Safarilla. **✅ Ratkaisu: Lisäsin CSS-koodiin tarvittavan `webkit-backdrop-filter` etuliitteen:** Tämä varmistaa toimivuuden Safarilla. Lisäsin myös varalle kiinteän taustavärin. Näin osio näyttää hyvältä, vaikka sumennus ei toimisikaan. ### Haaste: Nopeasti toimivat animaatiot sivua selatessa 😟 Animaatiot voivat helposti hidastaa sivua. Erityisesti, kun monta monimutkaista asiaa (kuten 3D-muodot ja parallaksi) liikkuu samaan aikaan. **✅ Ratkaisu: En käyttänyt raskasta “scroll”-tapahtuman kuuntelua:** Käytin sen sijaan IntersectionObserver-rajapintaa. Se on paljon tehokkaampi. Se käynnistää animaation vain, kun osio tulee näkyviin. Tämä pitää sivun nopeana ja selailun sulavana. ### Haaste: Kestävä koodi ja virheiden hallinta 😟 Sivulla on monta interaktiivista osaa (napit, kortit, valikot). Yksikin JavaScript-virhe voisi rikkoa kaiken. **✅ Ratkaisu: Tein koodista turvallisen:** Varmistin aina, että elementti on olemassa ennen kuin yritin käyttää sitä. Lisäsin kaikki toiminnot vasta, kun sivu on varmasti latautunut. Tämä estää virheet ja tekee koodista paljon luotettavamman. ## Mittarit & Standardit 📊 Vaikka kyseessä on visuaalinen demo, se on rakennettu tuotantotason standardeilla. ### Suorituskyky 🚀 - Kuvat käyttävät `loading="lazy"` ja `decoding="async"` -attribuutteja, mikä nopeuttaa sivun ensilatausta. - Skrollaus-animaatiot on toteutettu `IntersectionObserver`-rajapinnalla, joka on huomattavasti kevyempi selaimelle kuin perinteiset skrollauksen kuuntelijat. - Suurin osa animaatioista on toteutettu puhtaalla CSS:llä, mikä on sulavampaa kuin JavaScript-animaatiot. ### Hakukoneoptimointi 📈 - Sivulla on määritelty tarkat meta description ja keywords -tiedot, jotka auttavat hakukoneita ymmärtämään sivun sisällön. - Sivu käyttää oikeita HTML5-elementtejä (`nav, header, main, footer`), mikä parantaa luettavuutta hakukoneille. ### Tietoturva 🛡️ - Koodissa on panostettu virheiden ennaltaehkäisyyn (null checks), mikä estää sivun kaatumisen ajonaikaisiin virheisiin. - Kriittinen logiikka on kirjoitettu ilman raskaita ulkoisia kirjastoja, mikä vähentää tietoturvariskejä. ### Yksityisyys 🤫 - Koska kyseessä on käyttöliittymädemo, se ei kerää käyttäjädataa eikä aseta evästeitä. ### Saavutettavuus ♿ - Sivu kunnioittaa käyttäjän asetuksia: `@media (prefers-reduced-motion: reduce)` -säännöllä kaikki animaatiot poistetaan käytöstä, jos käyttäjä on näin toivonut. - Ikonit on piilotettu ruudunlukijoilta (`aria-hidden="true"`) ja interaktiivisille elementeille on annettu selkeät `aria-label` -kuvaukset. - Sivun alussa on piilotettu `"Skip to main content"` -linkki, joka helpottaa näppäimistöllä navigointia. ## Nykyinen tilanne 🟢 Tämä suunnittelu oli osa suunnittelukilpailua freelancer:issa.com Tämä premium hero-osio on tällä hetkellä olemassa itsenäisenä design-konseptina ja portfolioprojektina. Se esittelee edistyneitä käyttöliittymätekniikoita ja toimii esimerkkinä siitä, miten brändin laatua voidaan nostaa modernin suunnittelun avulla. ## Opetukset 🎓 ### Ei-tekniset opit 🤔 Tämä projekti vahvisti, että “premium” syntyy yksityiskohdista. Tavallisesta napista tulee premium, kun siinä on liukuväri, hienovarjoinen varjo, ja se reagoi hiireen ja klikkaukseen. Luottamus ei synny sanomalla “luota meihin”. Se näytetään hiotulla, ammattimaisella ja virheettömällä käyttöliittymällä. ### Tekniset opit 👨‍🎓 Opin paljon animaatioiden suorituskyvystä. Opin, miten tärkeä ero on raskaalla onscroll-kuuntelijalla ja kevyellä IntersectionObserverilla. Opin myös testaamaan selainten yhteensopivuutta heti alusta alkaen. ### Saavutettavuus ♿ Kun sivulla on paljon animaatioita, saavutettavuus on pakko huomioida. Varmistin, että kaikki animaatiot kunnioittavat käyttäjän (`prefers-reduced-motion: reduce`) asetusta. Jos käyttäjä haluaa vähemmän liikettä, animaatiot poistetaan käytöstä. Kaikilla interaktiivisilla osilla on myös oikeat ARIA-attribuutit. Tämä projekti osoitti, että voi rakentaa upean ja dynaamisen sivun tinkimättä saavutettavuudesta. ## Katso sivu livenä - [Premium Hero-osio](https://panugr.github.io/Hero-revamp/premium) - [Katsoo koodi Githubissa](https://github.com/PanuGr/Hero-revamp) --- # Just Games Kotisivu > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 “Just Games” on helsinkiläinen peliyritys, joka tarvitsi uuden kodin peleilleen verkossa. Vanha sivusto ei enää palvellut heidän tarpeitaan. Rakensin heille uuden sivuston alusta asti käyttäen modernia Astro-teknologiaa. Tavoitteena oli luoda sivu, joka on visuaalisesti “pelimäinen”, mutta teknisesti erittäin kevyt ja nopea. ## Tärkeimmät ominaisuudet: ✨ - Interaktiiviset pelikortit 🃏: Etusivulla pelit esitellään korteilla, jotka kääntyvät ympäri (flip-card), kun niitä klikkaa tai koskettaa. - Press-Kit sivut 📂: Jokaiselle pelille on oma lehdistösivu, josta toimittajat voivat ladata logot, kuvat ja tiedotteet helposti. - Tiimisivu 👥: Esittelee pelien tekijät tyylikkäästi. - Evästehallinta 🪶: Sisältää linkit tietosuojakäytäntöihin. ## Käytetyt teknologiat: 🛠️ - **Framework**: Astro (v5) - **Tyylit**: CSS3 (CSS Variables), responsiivinen design - **Hosting**: Netlify - **Muuta:** HTML-Validate (laadunvarmistus) ## Tarkoitus ja tavoite 🎯 Asiakas halusi sivuston, jota on helppo ylläpitää, mutta joka ei ole sidottu kalliisiin tai hitaisiin valmispohjiin (kuten Wix). Tärkeää oli myös, että sivusto latautuu heti, sillä pelialalla visuaalisuus ja nopeus ovat valttia. Tavoitteena oli myös varmistaa, että sivusto on teknisesti moitteeton (validi HTML) ja hakukoneystävällinen, jotta pelaajat löytävät studion pelit helposti. Tämän projektin ydin on Astro-kehyksen hyödyntäminen. Astro mahdollistaa sen, että voin rakentaa sivun moderneilla komponenteilla (kuten Reactissa), mutta lopputulos on pelkkää kevyttä HTML:ää ilman raskasta JavaScript-kuormaa. ## Tekniset haasteet ja ratkaisut: 🔧 ### Haaste: Näyttävät animaatiot ilman hidastelua 😟 Halusin etusivun pelikorteille hienon kääntöefektin (“flip effect”). Yleensä tähän käytetään JavaScript-kirjastoja, jotka hidastavat sivua. ✅ **Ratkaisu: Toteutin kääntöefektin puhtaalla CSS:llä** Tämä on selaimelle erittäin kevyttä piirtää. Kortit toimivat sulavasti myös vanhemmilla puhelimilla ilman yhtäkään riviä ylimääräistä JavaScriptiä. ### Haaste: Tietoturva ja “iframe”-upotukset 😟 Sivustolla on YouTube- ja Vimeo-videoita. Niiden turvallinen upottaminen voi olla riski. **✅ Ratkaisu: Määritin netlify.toml-tiedostoon tiukat CSP-säännöt** Ne kertovat selaimelle tarkasti, mistä lähteistä (esim. vain youtube-nocookie.com) sisältöä saa ladata. Tämä estää haitallisia koodeja, jos joku yrittäisi hyökätä sivustolle. ## Mittarit & Standardit 📊 Just Games kotisivu on optimoitu erityisesti nopeutta ja hakukonenäkyvyyttä silmällä pitäen. ### Suorituskyky (Performance) ⚡: - Astro rakentaa sivut valmiiksi HTML-tiedostoiksi palvelimella. Käyttäjän selain ei joudu tekemään raskasta työtä, joten sivu aukeaa välittömästi. - Kuvat ladataan laiskasti (loading=“lazy”) ja modernissa WebP/AVIF-muodossa. ### Hakukoneoptimointi (SEO) 📈: - Jokaisella pelisivulla on yksilölliset meta-kuvaukset ja Open Graph-kuvat, joten ne näyttävät hyvältä, kun linkin jakaa somessa. - Sitemap: Astro luo automaattisesti sitemap.xml-tiedoston, joka auttaa Googlea löytämään kaikki sivut. ### Tietoturva (Security) 🔐: - Sivusto käyttää Netlifyn kautta HSTS- ja X-Frame-Options -asetuksia, jotka suojaavat käyttäjää ja estävät sivuston luvattoman upottamisen toisaalle. ### Saavutettavuus (Accessibility) ♿: - Tekstin ja taustan värit on valittu niin, että ne ovat helppolukuisia (tumma teema). - Pelikortit ja valikot toimivat myös pelkällä näppäimistöllä (Tab-näppäin), mikä on tärkeää apuvälineitä käyttäville. ## Nykyinen tilanne 🟢 Sivusto on julkaistu ja se toimii Just Games Ltd:n virallisena kotisivuna. Asiakas pystyy itse päivittämään sisältöä README.md-tiedostossa olevien ohjeiden avulla (esim. lisäämään uuden pelin kopioimalla tiedoston). ## Opetukset 🎓 ### Tekniset opit 👨‍🎓 Tämä projekti vahvisti, että Astro on paras valinta sisältöpainotteisille sivuille. Opin myös käyttämään html-validate työkalua osana kehitystä, jotta HTML-koodi pysyy standardien mukaisena ja virheettömänä. ### Suunnittelu 🎨 Opin tekemään “Press Kit” sivuja. Ymmärsin, että toimittajat tarvitsevat faktat (julkaisupäivä, alustat, kontaktit) nopeasti ja selkeästi listattuna, ilman turhaa kikkailua. ## Katso sivu livenä - [Just Games Kotisivu](https://justgames.fi) --- # AI-Powered Poetry Assistant > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 Tämä projekti on “Rhyme”, tekoälypohjainen verkkosovellus (PWA) runoilijoille ja kirjailijoille. ✍️ Sovellus yhdistää kaksi eri API-rajapintaa: yhden sanatietokantaan ja toisen tekoälymalliin. Minun roolini oli projektin full-stack kehitys 👨‍💻. Tein sovelluksen käyttöliittymän (HTML, CSS, Bootstrap), kaiken toiminnallisuuden (JavaScript) sekä taustajärjestelmän (Netlify Functions), joka hoitaa tekoäly-yhteydet turvallisesti. ## Tärkeimmät ominaisuudet ✨ - Sanahaku 🔍: Yhdistää Datamuse API:in, jolla voi etsiä sanoja, jotka esimerkiksi rimmaavat tai kuulostavat samalta. - Tekoälyapu 🤖: Käyttäjä voi pyytää tekoälyä viimeistelemään aloitetun runon. - Tekoälyanalyysi 🧠: Sovellus antaa palautetta ja analysoi käyttäjän kirjoittaman runon rakenteen. - Paikallinen tallennus 💾: Käyttäjä voi tallentaa runonsa selaimen muistiin ja jatkaa myöhemmin. - Jakotoiminto 📤: Valmiin runon voi jakaa helposti `navigator.share` toiminnolla. ## Käytetyt teknologiat 🛠️ - **Frontend:** HTML5, CSS3, Bootstrap 5, JavaScript - **API-rajapinnat:** Datamuse API, Mistral AI - **Backend:** Netlify Functions - **Paketointi:** Parcel ## Tarkoitus ja tavoite 🎯 Tämän projektin tavoite oli kaksiosainen. Ensinnäkin halusin luoda aidosti hyödyllistä työkalua luoville kirjailijoille. Toiseksi halusin opetella ja näyttää, miten rakennetaan moderni verkkosovellus, joka hyödyntää ulkoisia API-rajapintoja turvallisesti. Lopputuloksena oli selkeä kahden paneelin käyttöliittymä, jossa sanahaku ja kirjoittaminen tukevat toisiaan. Tämän sovelluksen “paras ominaisuus” on se, miten se yhdistää kaksi täysin erilaista ulkoista palvelua (Datamuse ja OpenRouter) yhdeksi toimivaksi kokonaisuudeksi. Tämä tehtiin tavalla, joka on käyttäjälle helppo ja kehittäjälle turvallinen. ## Tekniset haasteet ja ratkaisut 💻 ### Haaste: API-avaimen suojaaminen 🔐 Tekoälyn käyttäminen vaatii salaisen API-avaimen. Tämän avaimen laittaminen julkiseen JavaScript-koodiin olisi valtava tietoturvariski. Kuka tahansa voisi varastaa sen ja käyttää sitä omalla kustannuksellani. **✅ Ratkaisu: Rakensin Netlify Function taustatoiminnon** Kun käyttäjä pyytää tekoälyltä apua, selain ei soita suoraan tekoälylle. Sen sijaan selain kutsuu minun omaa Netlify-toimintoani. Tämä taustatoiminto hakee salaisen API-avaimen turvallisesti Netlifyn ympäristömuuttujista ja tekee kutsun tekoälylle. Näin salainen avain pysyy täysin piilossa. ### Haaste: Datan kerääminen ja yksityisyys 🕵️ **✅ Ratkaisu:** Sovellus kertoo käyttäjälle avoimesti, että heidän tietojaan ei kerätä tekoälymallin kouluttamista varten. Tämä oli tärkeä valinta yksityisyyden ja luottamuksen kannalta. ## Mittarit & Standardit 📊 Tässä projektissa keskityttiin erityisesti tietoturvaan ja suorituskykyyn. Alla on eriteltynä projektin tekniset saavutukset: ### Suorituskyky ⚡ - Kuvat on esiladattu `` ja optimoitu modernilla AVIF-formaatilla. - JavaScript-koodi on jaettu moduuleihin `type="module"` ja ladattu viivästysti `defer`, mikä estää sivun latautumisen hidastumisen. - DOM-päivitykset on tehty tehokkaasti käyttämällä `DocumentFragment`-tekniikkaa, mikä vähentää selaimen uudelleenpiirtämistä hakutuloksia listatessa. ### Hakukoneoptimointi 📈 - Sivusto käyttää semanttista HTML5-rakennetta `header, main, nav`. - Sosiaalisen median jakoa varten on määritetty Open Graph-metatiedot `og:image`. - Kaikille sivuille on määritetty asianmukaiset meta-kuvaukset ja tekijätiedot. ### Tietoturva 🛡️ - Kriittisin tietoturvaelementti on toteutettu Serverless-funktiolla, joka estää API-avainten vuotamisen selaimeen. - Pakotettu salattu yhteys (HTTPS) kaikessa liikenteessä. - Käyttäjän syötteet tarkistetaan ennen niiden lähettämistä API:lle, mikä ehkäisee injektiohyökkäyksiä. ### Yksityisyys 🕵️‍♀️ - Sovellus on suunniteltu niin, että käyttäjän runoja ei tallenneta pilveen eikä käytetä tekoälymalien kouluttamiseen. - “Tallenna”-toiminto käyttää selaimen omaa `localStorage`-muistia, jolloin data pysyy vain käyttäjän omalla laitteella. - Käytössä on Mistral AI, joka on eurooppalainen toimija, mikä tukee paremmin tietosuojavaatimuksia. ### Saavutettavuus ♿ - Dynaamisesti luoduille hakutuloksille ja modaali-ikkunoille on lisätty `aria-label` ja `aria-labelledby` -attribuutit ruudunlukijoita varten. - Lomakkeet ja tuloslistat ovat navigoitavissa näppäimistöllä. - Oikeaoppinen otsikkorakenne `h1-h6` auttaa apuvälineitä hahmottamaan sivun sisällön. ## Nykyinen tilanne 🟢 Sovellus on livenä ja toiminnassa. Se on progressiivinen verkkosovellus (PWA), eli sen voi asentaa puhelimeen tai tietokoneelle kuin tavallisen sovelluksen. 📱 ## Opetukset 🎓 ### Ei-tekniset opit 🤔 Opin suunnittelemaan käyttöliittymän, joka palvelee kahta eri tarkoitusta samanaikaisesti. Selkeä kahden paneelin asettelu (vasemmalla työkalut, oikealla kirjoitusalue) tekee sovelluksesta helppokäyttöisen. ### Tekniset opit 👨‍🎓 Tämä projekti oli syvä sukellus palvelimettomaan (serverless) arkkitehtuuriin. Opin käytännössä, miksi ja miten Netlify Function taustatoiminto rakennetaan. Se on paras tapa suojata API-avaimet ja pitää samalla sivusto nopeana ja staattisena. Opin myös hallitsemaan useita fetch-kutsuja ja niiden lataus- ja virhetiloja. ### Saavutettavuus ♿ Bootstrap tarjoaa helppokäyttöisen kehyksen valmiille tyyleille, asettelutyökaluille ja interaktiivisille komponenteille, joiden avulla kehittäjät voivat luoda verkkosivustoja ja sovelluksia. Bootstrapilla on mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.2 -standardin. ## Katso sivu livenä - [AI-Powered Poetry Assistant](https://rhymeai.netlify.app) - [Katsoo koodi Githubissa](https://github.com/PanuGr/rhyme/) --- # The Splitter > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Esittely 🔍 “The Splitter” on työkalu, joka ratkaisee klassisen ongelman: miten jakaa ravintolalasku reilusti ystävien kesken. Sovellus laskee tipin osuuden ja loppusumman per henkilö. Minun roolini oli rakentaa sovellus alusta loppuun. Käytin pohjana Frontend Mentor haasteen ulkoasua, mutta laajensin projektia merkittävästi tekemällä siitä täysiverisen PWA-sovelluksen (Progressive Web App). ## Tärkeimmät ominaisuudet: ✨ - Reaaliaikainen laskenta 🧮: Laskee summat heti, kun syötät luvut. Ei turhia “Laske”-painikkeen painalluksia. - Asennettava sovellus (PWA) 📱: Toimii kuten oikea mobiilisovellus. Sen voi ladata Google Play kaupasta, Microsoft Storesta tai asentaa suoraan selaimesta. - Toimii ilman nettiä 📡: Kiitos Service Worker teknologian, sovellus toimii täydellisesti myös lentokonetilassa tai huonossa verkossa. - Jaa tulos 🤝: Valmis laskelma on helppo jakaa kavereille (esim. WhatsAppissa) sisäänrakennetun jakotoiminnon avulla. ## Käytetyt teknologiat: 🛠️ - **Kielet**: HTML5, SCSS (Sass), Vanilla JavaScript (ei raskaita kirjastoja) - **PWA**: Service Workers, Web App Manifest - **Jakelu**: Netlify, Google Play Store (TWA), Microsoft Store ## Tarkoitus ja tavoite 🎯 Alkuperäinen tavoite oli oppia tekemään PWA-sovelluksia. Halusin ymmärtää, miten verkkosivusta tehdään sovellus, joka tuntuu ja näyttää “aidolta” mobiilisovellukselta. Halusin myös todistaa, että yksinkertaiseen työkaluun ei tarvita Reactia tai muita raskaita kehyksiä. Pelkkä puhdas JavaScript (Vanilla JS) riittää tekemään sovelluksesta salamannopean. Tämän projektin “tähti” on sen kyky toimia ilman internetiä ja sen löydettävyys sovelluskaupoista. ## Tekniset haasteet ja ratkaisut: 🔧 ### Haaste: Miten sovellus toimii ilman nettiä? 🔌 Yleensä verkkosivu näyttää “ei yhteyttä” virheen, jos netti katkeaa. Halusin, että laskuri toimii aina. ✅ **Ratkaisu: Koodasin `service-worker.js` tiedoston**. Se on kuin pieni vahtimestari selaimen ja netin välissä. Kun käyttäjä avaa sovelluksen ensimmäisen kerran, vahtimestari tallentaa kaikki tarvittavat tiedostot (HTML, CSS, JS, kuvat) puhelimen muistiin (cache). Seuraavalla kerralla sovellus ladataan suoraan muistista, jolloin se aukeaa heti, oli nettiä tai ei. ### Haaste: Miten verkkosivu saadaan Play Kauppaan? 🛒 Google Play vaatii yleensä Android-koodia (Java/Kotlin). En halunnut opetella uutta kieltä vain pienen laskurin takia. ✅ **Ratkaisu: Käytin TWA-tekniikkaa (Trusted Web Activity)** Se pakkaa verkkosivun Android-sovelluksen “kuoreen”. `assetlinks.json` tiedosto todistaa Googlelle, että minä omistan sekä verkkosivun että sovelluksen, mikä mahdollistaa julkaisun kaupassa turvallisesti. ## Mittarit & Standardit 📊 Koska sovellus on tehty puhtaalla koodilla ilman kehyksiä, se on teknisesti erittäin kevyt. ### Suorituskyky (Performance) ⚡: - Koko sovellus on vain muutaman kilotavun kokoinen. Se latautuu sekunnin murto-osassa. - Ei Reactin tai Vuen tuomaa ylipaino latausaikaa. Koodi suoritetaan heti. ### Tietoturva (Security) 🔐: - Sovellus toimii täysin käyttäjän laitteella. Mitään laskutietoja ei lähetetä palvelimelle, joten tietovuodon riski on nolla. - PWA-vaatimusten mukaisesti yhteys on aina salattu. ### Yksityisyys (Privacy) 👁️: - Sovelluksessa ei ole mainoksia eikä analytiikkaa, joka vakoilisi käyttäjää. - Sovellus ei pyydä turhia lupia (kuten sijaintia tai kameraa). ### Saavutettavuus (Accessibility) ♿: - Käytin oikeita label- ja input-elementtejä, jotta ruudunlukijat ymmärtävät lomakkeen. - Esimerkiksi tippiprosenttien valintanapeissa on selkeät aria-label kuvaukset apuvälineitä varten. ## Nykyinen tilanne 🟢 Sovellus on julkaistu ja vapaasti kaikkien käytössä. Se on esimerkki siitä, miten “yksinkertainen” verkkosivu voi korvata perinteisen mobiilisovelluksen monessa käytössä. ## Opetukset 🎓 Opin PWA:n elinkaaren: miten Service Worker asennetaan, aktivoidaan ja päivitetään. Tämä on kriittistä osaamista modernissa web-kehityksessä. Opin myös SCSS:n käyttöä tyylien hallinnassa.\ Projektinhallinta: Opin viemään projektin “maaliin asti” eli julkaisemaan sen oikeissa sovelluskaupoissa (Google Play ja Microsoft Store), mikä vaatii omat prosessinsa ja kuvakaappauksensa. ## Katso sivu livenä - [The Splitter](https://thesplitter.netlify.app/) --- # Saavutettavuus: Säännöt ja paremmat kotisivut > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Miksi Saavutettavuus on Tärkeä? Saavutettavuus tarkoittaa, että kaikki ihmiset voivat käyttää nettisivua esteettömästi ja tehokkaasti, riippumatta heidän kyvyistään tai käyttämistään laitteista. Tähän sisältyvät esimerkiksi näkörajoitteiset, kuulovammaiset tai ne, joilla on motorisia haasteita. Saavutettavuus palvelee myös kaikkia, jotka käyttävät sivustoa poikkeuksellisissa olosuhteissa (esim. kirkkaassa auringonvalossa matkapuhelimella). Se ei ole vain kiva asia tehdä, vaan **nykyään se on kriittinen asia sinun yrityksellesi**. ## Kolme Syytä Panostaa Saavutettavuuteen ### 1. Laki EU:n uusi saavutettavuusdirektiivi (European Accessibility Act, EAA) asettaa tiukempia vaatimuksia digipalveluille. Jos sivustosi ei ole saavutettava, saatat saada **huomattavia sakkoja** ja pahimmillaan joutua oikeudenkäyntiin. ### 2. Asiakkaat Kun teet sivustostasi helppokäyttöisen, tavoitat merkittävästi suuremman joukon ihmisiä. Tämä voi tuoda sinulle jopa **25 % lisää potentiaalisia asiakkaita** ja parantaa asiakasuskollisuutta. ### 3. SEO Saavutettava sivusto on luonnostaan parempi hakukoneille. Kun käytetään semanttista HTML-koodia, Google ymmärtää sivustosi sisällön tehokkaammin. **Tämä parantaa sijoitustasi hakutuloksissa.** ## Mitä Teen Sinun Puolestasi? Varmistan, että sivut täyttävät **WCAG 2.1 AA** (Web Content Accessibility Guidelines) vaatimukset. ### Selkeä Rakenne (HTML5) Looginen otsikkorakenne (H1, H2, H3 jne.) ja kaikki kuvat merkitty selittävällä alt-tekstillä. Ruudunlukuohjelmat toimivat sujuvasti. ### Näppäimistökäyttö Sivua voi käyttää täydellisesti ilman hiirtä, pelkällä näppäimistöllä. Kohdistus on aina selvästi näkyvissä. ### Selkeät Painikkeet ja Lomakkeet Kaikki painikkeet, linkit ja lomakekentät on nimetty selvästi ja noudattavat ARIA-standardeja. Ymmärrettäviä lukulaitteille. ### Värikontrasti Teksti erottuu taustasta tarpeeksi hyvin. WCAG AA -tason kontrastivaatimukset täyttyvät. ## Uusi EU-Direktiivi (EAA) **European Accessibility Act (EAA)** laajentaa saavutettavuusvaatimukset koskemaan entistä laajempaa valikoimaa digitaalisia palveluita kaikkialla EU:ssa. Tämä uusi lainsäädäntö pakottaa yritykset reagoimaan. Autan sinua olemaan valmis jo tänään. Kun valitset minut, sinun ei tarvitse panikoida tai tehdä kalliita korjauspäivityksiä myöhemmin. **Sinun kotisivu on rakennettu kestäviksi ja lainmukaisiksi jo alusta alkaen.** ## Oletko Valmis Lailliseen Turvaan? Saavutettavuus ei ole valinnaista, vaan se on olennainen osa ammattimaista ja vastuullista nettisivun rakentamista. Keskity yrityksesi kasvuun ja ydinliiketoimintaan. Minä huolehdin siitä, että tekninen perusta ja lainmukaisuus ovat kunnossa, ja että sivusi palvelee kaikkia asiakkaitasi parhaalla mahdollisella tavalla. ### Saavutettavuuden Hyödyt - Vältä sakot ja oikeudelliset ongelmat - Tavoita jopa 25 % enemmän asiakkaita - Paranna hakukonesijoitusta - Rakenna vastuullinen brändi - Ole valmis tuleviin lakimuutoksiin ## Tee Sivustasi Saavutettava ja Lainmukainen Keskustellaan siitä, miten voin auttaa sinua rakentamaan WCAG 2.1 AA-yhteensopivan kotisivun. [Ota yhteyttä](/#contact) --- # Saavutettavuusseloste > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. ## Sitoumuksemme DigiSolutech haluaa, että kaikki voivat käyttää palveluitamme helposti. Työskentelemme jatkuvasti, jotta verkkopalvelumme olisivat esteettömiä. Noudatamme tärkeitä sääntöjä, jotta kaikki käyttäjät pääsevät palveluihimme. ## Mitä teemme saavutettavuuden eteen DigiSolutech tekee näin, jotta palvelumme olisivat saavutettavia: - Otamme saavutettavuuden mukaan kaikkeen työhön. - Käytämme virallisia testejä saavutettavuuden laadun varmistamiseen. - Noudatamme WCAG 2.2 (Tasot A,AA,AAA) ohjeita. - Noudatamme Euroopan esteettömyysdirektiivin (EAA) vaatimuksia. ## Saavutettavuuden taso **DigiSolutech noudattaa osittain WCAG 2.2 Level AAA-tasoa.** Osittainen noudattaminen tarkoittaa, että jokin osa sisällöstä ei ehkä täytä kaikkia saavutettavuuden vaatimuksia. ## Lisähuomioita saavutettavuudesta ### Yhteensopivuus selaimien kanssa DigiSolutech toimii hyvin näiden apuvälineiden ja selaimien kanssa: **Testatut ja tuetut ympäristöt:** - **Selaimet:** Chromium-pohjaiset selaimet (Chrome, Edge, Brave, Opera) versiosta 131 eteenpäin. - **Käyttöjärjestelmät:** - ChromeOS 135 ja uudemmat - Windows 11 ja uudemmat - Android 14 ja uudemmat **Ei vielä testattu:** - Muut selaimet (Firefox, Safari) - Apuvälineet (ruudunlukijat, puheohjausohjelmat) - Käyttöjärjestelmät, jotka ovat vanhempia kuin Windows 11, ChromeOS v135 ja Android 14 - macOS ja iOS-laitteet **Huomio:** Vaikka yritämme toimia kaikilla laitteilla, testaaminen on tehty vain yllä mainituilla laitteilla. Otamme mielellämme vastaan palautetta muilta laitteilta, jotta voimme parantaa saavutettavuutta. ## Tunnetut ongelmat Vaikka olemme tehneet paljon työtä, DigiSolutech-sivustolla voi olla joitakin ongelmia ### Ratkaisuja ongelmiin Jos huomaat jonkin saavutettavuusesteen: 1. **Yhteydenottolomakkeet:** Jos lomake ei toimi, lähetä sähköpostia osoitteeseen 1. **Liikkumisen ongelmat:** Käytä linkkiä “Siirry pääsisältöön” sivun yläosassa. 1. **Sisällön saaminen:** Pyydä sisältöä toisessa muodossa sähköpostilla. ## Käytetyt arviointitavat DigiSolutech-sivustoa on testattu näillä tavoilla: ### Automaattinen testaus Sivustoa on testattu monella ohjelmalla: - **Lighthouse** (Google Chrome DevTools) – Tulos: 100/100 - **axe DevTools** – Ei löydetty virheitä. - **WAVE Web Accessibility Evaluation Tool** – Tulos: 9.9/10 - **GetWCAG** – Tulos: 100, Taso: AAA - **HTML Validator** – HTML5-koodi on oikein. ### Manuaalinen testaus Sivustoa on testattu käsin: - **Näppäimistön käyttö:** Kaikki painikkeet toimivat Tab, Enter ja nuolinäppäimillä. - **Värikontrasti:** Kaikki tekstit täyttävät WCAG AA-vaatimukset (normaali teksti 4.5:1, iso teksti 3:1). - **Zoomaus:** Testattu 200 %:n zoomauksella ilman, että sivusto menee rikki. - **Sopivuus eri laitteille:** Testattu monilla laitteilla ja näytöillä. ## Palaute Otamme mielellämme vastaan palautetta DigiSolutech-sivuston saavutettavuudesta. Kerro meille, jos löydät esteitä: ### Yhteystiedot - **Sähköposti:** - **Vastausaika:** Yritämme vastata 14 arkipäivän kuluessa. Teemme parhaamme korjataksemme ongelman. ### Mitä palautteen pitää sisältää Kun ilmoitat saavutettavuusongelmasta, kirjoita mukaan: - Sen sivun osoite (URL), jossa ongelma on. - Selitys ongelmasta. - Käyttämäsi apuväline (jos käytät). - Selaimesi ja käyttöjärjestelmäsi. - Kuvakaappauksia tai videoita (jos mahdollista). ### Valitus Jos et ole tyytyväinen vastaukseemme, voit tehdä virallisen valituksen. **Valvontaviranomainen:** Liikenne- ja viestintävirasto Traficom Digitaalisen saavutettavuuden valvontayksikkö PL 320 00059 TRAFICOM Suomi - Verkkosivu: [www.saavutettavuusvaatimukset.fi](http://www.saavutettavuusvaatimukset.fi) - Sähköposti: - Puhelin: +358 29 534 5000 ### Euroopan unioni Jos asut EU:ssa ja et usko, että olemme vastanneet saavutettavuusongelmaasi riittävästi, voit ottaa yhteyttä oman maasi valvontaelimeen. ## Poikkeukset Seuraava sisältö ei kuulu EU:n esteettömyysdirektiivin vaatimusten piiriin: ### Sisältö muualta, jota emme hallitse - Sosiaalisen median upotukset (Facebook, Instagram, YouTube) - Ulkoiset linkit kumppaneiden sivuille - Käyttäjien tekemä sisältö (kun se tulee ulkopuolisen palvelun kautta) ### Arkistoitu sisältö - Asiakirjat, jotka on julkaistu ennen 1. kesäkuuta 2025 - Vanha sisältö, jota ei enää päivitetä - Vanhat kuvakaappaukset projekteista **Huomio:** Voimme pyynnöstä muuttaa vanhat arkistoasiakirjat saavutettavaan muotoon. --- # Kotisivut Yhdistyksille: Luotettavuus, Saavutettavuus ja Jäsenpalvelut > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. Yhdistyksen kotisivu on enemmän kuin käyntikortti, se on teidän digitaalinen kohtaamispaikka ja viestintäkanava. Rakennan yhdistyksille nettisivuja, jotka on suunniteltu erityisesti jäsenten sitouttamiseen, vapaaehtoisten mobilisointiin ja lakisääteisten vaatimusten täyttämiseen. ## Yhdistyksen Kolme Suurinta Haastetta, Ja Miten Ne Ratkaistaan ### Jäsenrekisterit ja GDPR Yhdistykset käsittelevät jatkuvasti henkilötietoja (jäsenrekisterit, ilmoittautumiset, lahjoitukset). Virheellinen käsittely → GDPR-sakot ja maineriskit. **Ratkaisu:** Käytän Supabasea turvallisten tietokantojen luomiseen. Tiedot salatussa ympäristössä, käsittely lainmukaista. [Lue lisää GDPR-takeista](/gdpr). ### Saavutettavuus Laki vaatii saavutettavuutta (WCAG 2.1 AA) myös yhdistyksiltä. Sanomanne täytyy tavoittaa jokainen jäsen ja sidosryhmä. **Ratkaisu:** Rakennan jokaisen sivuston WCAG 2.1 AA-standardien mukaisesti. Ennaltaehkäisevää riskienhallintaa. [Tutustu sitoumukseemme](/saavutettavuus). ### Helppo Hallinta Yhdistystoiminta riippuvainen vapaaehtoisista. Kaatuilevan sivuston ylläpito vie turhaan resursseja ydintoiminnalta. **Ratkaisu:** Hoidan täyden ylläpidon ja päivitykset. Aukioloajat, tapahtumat, tiedotteet , nopea toteutus ilman yllätyskustannuksia. [Lue ylläpidosta](/yllapito). ## Palvelumme Yhdistyksille, Tehokas ja Turvallinen Ratkaisuni (Astro, Netlify, Supabase) tarjoaa enemmän kuin perinteiset, kankeat alustat. Esimerkiksi: Ominaisuus | Yhdistyksen Hyöty | Syventävä Esimerkki Ultra-nopea alusta | Tapahtumainformaatio, jäsenkirjeet ja uutiset latautuvat välittömästi | Kriisitiedotteet tavoittavat kohderyhmän heti. Parantaa jäsenkokemusta. Tekoäly-chatbot | Jäsenet saavat vastaukset usein kysyttyihin kysymyksiin 24/7 | Vähentää vapaaehtoisten kuormaa vastaamalla rutiinikysymyksiin automaattisesti Lahjoitus- ja Tapahtumakoodit | Suorat QR-koodit lahjoituksiin ja tapahtumiin | Nopeuttaa varainkeruuta ja yksinkertaistaa osallistumista Koodin omistus | Et ole sidottu kalliisiin alustoihin. Omistatte kaiken | Taloushallinnon läpinäkyvyys, ei odottamattomia lisenssimaksuja ## Esimerkit Integraatioista - **Tapahtumakalenteri:** Automaattinen päivitys ja ilmoittautumiset - **Uutiskirje:** Integraatio sähköpostilistoihin - **QR-koodit:** Lahjoituksiin ja jäsenkortteihin - **Jäsenrekisteri:** Turvallinen Supabase-pohjainen ratkaisu - **Chatbot:** Vastaa yleisimpiin kysymyksiin automaattisesti ## Laajentakaa Tavoittavuuttanne Olen sitoutunut auttamaan yhdistyksiä, järjestöitä ja seurakuntia. Rakennetaan yhdessä nettisivu, joka tekee hyvää, on turvallinen, lainmukainen ja palvelee kaikkia. Annetaan yhdistyksenne sanomalle ansaitsemansa luotettava ja tehokas digitaalinen alusta. ## Pyydä Maksuton Konsultaatio Keskustellaan teidän tarpeistanne ja rakennetaan ratkaisu, joka palvelee koko yhteisöänne. [Ota yhteyttä](/#contact) --- # Kotisivujen Huolenpito > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. Nettisivu on elävä sijoitus. Jotta se voi palvella yritystäsi ja asiakkaitasi tehokkaasti, se tarvitsee jatkuvaa hoitoa ja huolenpitoa. **Tärkeä huomio:** Kun tilaat nettisivun, itse kehitystyö on kertamaksu (osamaksu on myös mahdollista). Huolenpitopaketit ovat valinnainen kuukausittainen palvelu, jonka tavoitteena on suojata alkuperäinen sijoituksesi. Vaikka suunnitelen sivun niin, että voit myös itse päivittää sen sisältöä, tarjoan sinulle digitaalisen huoltajan: **Keskity sinä liiketoimintaasi. Minä hoidan sen, että nettisivusi on aina nopea, turvallinen ja ajan tasalla.** ## Huolenpitopaketit: Valitse Sinun Tarpeisiisi Sopiva Taso Kolme huolenpitotasoa. Kaikki paketit edellyttävät 12 kuukauden sopimuskautta, joka tuo vakautta ja luotettavuutta ylläpitoon. Hosting (Netlify) sisältyy aina jokaiseen pakettiin ### Perus Huolenpito 50€/v +alv - Turvapäivitykset - Raportit (Suorityskyky, SEO, Turvallisuusriskit, Analytics) - Sisällön muutokset - Uudet sivut - Tekniset lisäykset ### Plus Huolenpito 180€/v +alv - Raportit (1x vuodessa: Suorityskyky, SEO, Turvallisuusriskit, Analytics) - Turvapäivitykset - Sisällön muutokset (teksti, kuvat) - Muokkaukset olemassa oleviin sivuihin - Uudet sivut - Tekniset lisäykset ### Täysi Huolenpito 1200€/v +alv - Raportit (1x vuodessa: Suorityskyky, SEO, Turvallisuusriskit, Analytics) - Turvapäivitykset - Rajoittamattomat sisällön muutokset - Uudet sivut ja toiminnallisuudet sisältyvät - Tekniset lisäykset ## Paketit Tarkemmin ### Perus Huolenpito Sopii sisällöltään stabiileihin sivustoihin, kuten henkilökohtaisiin portfolioihin. Tavoite on pitää sivusto hengissä ja turvassa. - **Hosting:** Nopea Netlify-palvelu globaalilla CDN:llä. - **Turva:** Turvapäivitykset, heti kun saatavilla. - **Omistajuus:** Täysi omistajuus sivuston koodista. ### Plus Huolenpito Suositeltavin taso aktiivisille pieniyrityksille ja yhdistyksille. Säästää aikaasi kuukausittaisten sisältömuutosten kautta. - **Sisällön muokkaukset:** Kuvat, tekstit, hinnaston päivitykset jne. - **Oivalluksia:** Vuositain syvät tiedot nettisivusta. - **Lainmukaisuus:** GDPR/saavutettavuus-päivitykset ilman lisäveloitusta. ### Täysi Huolenpito Kattavin paketti, joka tarjoaa täydellisen mielenrauhan. Avaimet käteen -ratkaisu, jossa toimin digitaalisena huoltajanasi. - **Rajoittamaton sisältö:** Uudet sivut, kuvat, tekstit milloin tahansa. - **Proaktiivinen valvonta:** Seuraan lainsäädäntöä ja teen muutokset ennakoivasti. - **24/7 mielenrauha:** Korjaan ongelmat ennen kuin huomaat ne. ## Valitse Sijoitus, Ei Vain Kulu Ylläpito estää kolme suurinta riskiä: - **Turvallisuusriskit:** Päivittämättömät kirjastot altistavat hyökkäyksille - **Hitaus:** Vanhentuneet koodit hidastavat sivua - **Vanhentuminen:** Lait ja standardit muuttuvat 12 kuukauden sopimus takaa ennakoitavuuden ja mielenrauhan koko vuodeksi. ## Pyydä Ylläpito-tarjous Keskustellaan parhaasta tasosta sinun tarpeisiisi. Suojataan yhdessä sinun digitaalinen sijoituksesi. [Ota yhteyttä](/#contact) --- # Kotisivut Yrityksille: Sijoitus, joka maksaa itsensä takaisin > DigiSolutech: Rakennamme tehokkaat ja laadukkaat kotisivut yrityksille, yhdistyksille ja yksityishenkilöille ilman stressiä. Meiltä saat myös ylläpidon. Kotisivusi ei ole vain digitaalinen esite, se on yrityksesi tärkein myyjä, joka on töissä 24/7. Hoidan kaiken puolestasi alusta loppuun: suunnittelen, koodaan, julkaisen ja ylläpidän. Saat käyttöösi modernin, räätälöidyn ratkaisun, joka on huippunopea ja riskitön. ## Miksi Moderni, Räätälöity Sijoitus Halvan Valmispaketin Sijaan? Markkinat ovat täynnä "ilmaisia" paketteja. Ne eivät kuitenkaan ole koskaan ilmaisia, ne sitovat sinut ekosysteemiin ja altistavat piilokustannuksille. ### Nopeus ja Konversio **Ongelma:** Hitaasti latautuva sivu menettää jopa puolet potentiaalisista asiakkaista. Yli 3 sekuntia → kävijät hylkäävät sivun. **Ratkaisu:** Käytän Astro Frameworkia ja Netlifyä. Täydelliset tulokset Googlen nopeustesteissä → parempi SEO ja enemmän konversioita. ### Riskienhallinta ja Tietosuoja **Ongelma:** GDPR-laiminlyönti voi johtaa sakkoihin ja asiakasluottamuksen menettämiseen. Vanhat alustat alttiita tietoturva-aukoille. **Ratkaisu:** Sivustosi on GDPR-yhteensopiva alusta asti. [Lue lisää tietosuojasta](/gdpr). ### Skaalautuvuus ja Omistajuus **Ongelma:** Valmisalustoilla et omista koodia. Kun yritys kasvaa, olet jumissa. **Ratkaisu:** Rakennan puhtaalla, omistamallasi koodilla. Sivustosi kasvaa yrityksesi mukana, ei rajoita sitä. ## Palvelupaketit: Kaikki Mitä Tarvitset Ilman Yllätyksiä Aika on pienyrittäjälle rahaa. Siksi tarjoan avaimet käteen -ratkaisun. ### Esimerkki Ammattimainen ja teknisesti vahva perusta yrityksellesi. - **3 avainsivua:** Etusivu, palvelut, yhteydenotto. - **GDPR-tarkistus:** Lainmukaiset tietosuojalausekkeet - **SEO-perusteet:** Google-näkyvyys kunnossa - **Kertamaksu** kehitystyöstä ### Täysylläpito Valinnainen kuukausipaketti Mielenrauha yrityksille, joiden aika on liian arvokasta tekniseen ylläpitoon. - **Säännölliset päivitykset:** Tekninen ylläpito ja tietoturva - **Sisällön muutokset:** Tekstit, kuvat, aukioloajat - **Tekninen tuki:** Nopea reagointi - [Tutustu Ylläpitopaketteihimme](/yllapito) ## Miksi Valita Paikallinen Kumppani? Valitsemalla minut, valitset paikallisen kumppanin, joka ymmärtää pienyrittäjän tarpeet ja liiketoiminnan asettamat vaatimukset. - Kumppani Turrusta, nopea yhteys - Suorituskyky, joka näkyy tuloksissa - Turvallisuus ja lainmukaisuus alusta asti - Sijoitus laatuun ## Oletko Valmis Tekemään Digitaalisen Sijoituksen? Annetaan kotisivullesi suorituskykyn, turvallisuuden ja luotettavuuden, jonka liiketoimintasi ansaitsee. [Ota yhteyttä](/#contact)