WIP: Astro migration
This commit is contained in:
Sergejs Kozinecs
parent
bfe55eb38c
commit
7724f71ee7
46 changed files with 4786 additions and 2805 deletions
|
|
@ -7,7 +7,54 @@
|
||||||
<option name="selectedModelId" value="auto" />
|
<option name="selectedModelId" value="auto" />
|
||||||
</component>
|
</component>
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="01345e21-67ff-441a-b47b-439ace178327" name="Changes" comment="Add captcha verification to contact form and improve error handling" />
|
<list default="true" id="01345e21-67ff-441a-b47b-439ace178327" name="Changes" comment="Add captcha verification to contact form and improve error handling">
|
||||||
|
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/README.md" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/astro.config.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/astro.config.mjs" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/package.json" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/pnpm-lock.yaml" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/custom-pc4u.png" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/custom-pc4u.png" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/mockba-modular.png" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/mockba-modular.png" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/pryatki.png" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/pryatki.png" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/sizzapp.png" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/sizzapp.png" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/trackpro.png" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/assets/images/main/projects/trackpro.png" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/BaseHead.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/BaseHead.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/ContactForm/ContactForm.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/ContactForm/ContactForm.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/ContactForm/contact-form.style.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/ContactForm/contact-form.style.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Contacts/Contacts.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Contacts/Contacts.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Contacts/contacts.style.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Contacts/contacts.style.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Footer/Footer.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Footer/Footer.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Footer/footer.style.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Footer/footer.style.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/FormInput/FormInput.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/FormInput/FormInput.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/FormInput/form-input.style.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/FormInput/form-input.style.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/FormattedDate.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/FormattedDate.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Header.astro" beforeDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Header/Header.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Header/Header.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/Header/header.style.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/Header/header.style.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/HeaderLink.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/HeaderLink.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/components/HomePage.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/components/HomePage.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/consts.ts" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/consts.ts" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content.config.ts" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content/blog/first-post.md" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content/blog/first-post.md" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content/blog/markdown-style-guide.md" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content/blog/markdown-style-guide.md" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content/blog/second-post.md" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content/blog/second-post.md" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content/blog/third-post.md" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content/blog/third-post.md" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/content/blog/using-mdx.mdx" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/content/blog/using-mdx.mdx" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/i18n/ui.ts" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/i18n/ui.ts" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/i18n/utils.ts" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/i18n/utils.ts" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/layouts/BlogPost.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/layouts/BlogPost.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/pages/about.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/pages/about.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/pages/blog/[...slug].astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/pages/blog/[...slug].astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/pages/blog/index.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/pages/blog/index.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/pages/lv/index.astro" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/pages/lv/index.astro" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/pages/rss.xml.js" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/pages/rss.xml.js" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/styles/global.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/styles/global.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/styles/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/styles/index.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/styles/reset.css" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/styles/reset.css" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/translations/en.json" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/translations/en.json" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/src/translations/lv.json" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/src/translations/lv.json" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/AstroLanding/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/AstroLanding/tsconfig.json" afterDir="false" />
|
||||||
|
</list>
|
||||||
<option name="SHOW_DIALOG" value="false" />
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
|
@ -68,6 +115,7 @@
|
||||||
"RunOnceActivity.typescript.service.memoryLimit.init": "true",
|
"RunOnceActivity.typescript.service.memoryLimit.init": "true",
|
||||||
"codeWithMe.voiceChat.enabledByDefault": "false",
|
"codeWithMe.voiceChat.enabledByDefault": "false",
|
||||||
"copilot.chat.legacySessionMetadata.migrated": "true",
|
"copilot.chat.legacySessionMetadata.migrated": "true",
|
||||||
|
"git-widget-placeholder": "astro-migration",
|
||||||
"javascript.preferred.runtime.type.id": "node",
|
"javascript.preferred.runtime.type.id": "node",
|
||||||
"js.debugger.nextJs.config.created.client": "true",
|
"js.debugger.nextJs.config.created.client": "true",
|
||||||
"js.debugger.nextJs.config.created.server": "true",
|
"js.debugger.nextJs.config.created.server": "true",
|
||||||
|
|
@ -81,7 +129,7 @@
|
||||||
"node.js.selected.package.jshint": "",
|
"node.js.selected.package.jshint": "",
|
||||||
"node.js.selected.package.tslint": "(autodetect)",
|
"node.js.selected.package.tslint": "(autodetect)",
|
||||||
"nodejs_package_manager_path": "yarn",
|
"nodejs_package_manager_path": "yarn",
|
||||||
"settings.editor.selected.configurable": "vcs.Git",
|
"settings.editor.selected.configurable": "project.propVCSSupport.DirectoryMappings",
|
||||||
"ts.external.directory.path": "/Users/sergejskozinecs/Applications/WebStorm.app/Contents/plugins/javascript-plugin/jsLanguageServicesImpl/external",
|
"ts.external.directory.path": "/Users/sergejskozinecs/Applications/WebStorm.app/Contents/plugins/javascript-plugin/jsLanguageServicesImpl/external",
|
||||||
"vue.rearranger.settings.migration": "true"
|
"vue.rearranger.settings.migration": "true"
|
||||||
}
|
}
|
||||||
|
|
@ -133,6 +181,8 @@
|
||||||
<workItem from="1750329776913" duration="2946000" />
|
<workItem from="1750329776913" duration="2946000" />
|
||||||
<workItem from="1784537953715" duration="6202000" />
|
<workItem from="1784537953715" duration="6202000" />
|
||||||
<workItem from="1784899208755" duration="13951000" />
|
<workItem from="1784899208755" duration="13951000" />
|
||||||
|
<workItem from="1785220782898" duration="240000" />
|
||||||
|
<workItem from="1785317634340" duration="2709000" />
|
||||||
</task>
|
</task>
|
||||||
<task id="LOCAL-00001" summary="Add captcha verification to contact form and improve error handling">
|
<task id="LOCAL-00001" summary="Add captcha verification to contact form and improve error handling">
|
||||||
<option name="closed" value="true" />
|
<option name="closed" value="true" />
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ Any static assets, like images, can be placed in the `public/` directory.
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| :------------------------ | :----------------------------------------------- |
|
| :--------------------- | :----------------------------------------------- |
|
||||||
| `pnpm install` | Installs dependencies |
|
| `pnpm install` | Installs dependencies |
|
||||||
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
||||||
| `pnpm build` | Build your production site to `./dist/` |
|
| `pnpm build` | Build your production site to `./dist/` |
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
// @ts-check
|
// @ts-check
|
||||||
|
|
||||||
import mdx from '@astrojs/mdx';
|
import mdx from "@astrojs/mdx";
|
||||||
import sitemap from '@astrojs/sitemap';
|
import sitemap from "@astrojs/sitemap";
|
||||||
import {defineConfig, fontProviders} from 'astro/config';
|
import { defineConfig, fontProviders } from "astro/config";
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'https://example.com',
|
site: "https://example.com",
|
||||||
integrations: [mdx(), sitemap()],
|
integrations: [mdx(), sitemap()],
|
||||||
fonts: [
|
fonts: [
|
||||||
{
|
{
|
||||||
provider: fontProviders.local(),
|
provider: fontProviders.local(),
|
||||||
name: 'Atkinson',
|
name: "Atkinson",
|
||||||
cssVariable: '--font-atkinson',
|
cssVariable: "--font-atkinson",
|
||||||
fallbacks: ['sans-serif'],
|
fallbacks: ["sans-serif"],
|
||||||
options: {
|
options: {
|
||||||
variants: [
|
variants: [
|
||||||
{
|
{
|
||||||
src: ['./src/assets/fonts/atkinson-regular.woff'],
|
src: ["./src/assets/fonts/atkinson-regular.woff"],
|
||||||
weight: 400,
|
weight: 400,
|
||||||
style: 'normal',
|
style: "normal",
|
||||||
display: 'swap',
|
display: "swap",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
src: ['./src/assets/fonts/atkinson-bold.woff'],
|
src: ["./src/assets/fonts/atkinson-bold.woff"],
|
||||||
weight: 700,
|
weight: 700,
|
||||||
style: 'normal',
|
style: "normal",
|
||||||
display: 'swap',
|
display: "swap",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
|
"format": "prettier --write .",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -16,8 +17,13 @@
|
||||||
"@astrojs/rss": "^4.0.19",
|
"@astrojs/rss": "^4.0.19",
|
||||||
"@astrojs/sitemap": "^3.7.3",
|
"@astrojs/sitemap": "^3.7.3",
|
||||||
"astro": "^7.1.3",
|
"astro": "^7.1.3",
|
||||||
|
"motion": "^12.42.2",
|
||||||
"react": "^19.2.8",
|
"react": "^19.2.8",
|
||||||
"react-dom": "^19.2.8",
|
"react-dom": "^19.2.8",
|
||||||
"sharp": "^0.35.0"
|
"sharp": "^0.35.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"prettier": "^3.9.6",
|
||||||
|
"prettier-plugin-astro": "^0.14.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 496 KiB After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 432 KiB After Width: | Height: | Size: 431 KiB |
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
// Import the global.css file here so that it is included on
|
// Import the global.css file here so that it is included on
|
||||||
// all pages through the use of the <BaseHead /> component.
|
// all pages through the use of the <BaseHead /> component.
|
||||||
import '@/styles/reset.css';
|
import "@/styles/reset.css";
|
||||||
import '@/styles/global.css';
|
import "@/styles/global.css";
|
||||||
import type {ImageMetadata} from 'astro';
|
import type { ImageMetadata } from "astro";
|
||||||
import FallbackImage from '../assets/blog-placeholder-1.jpg';
|
import FallbackImage from "../assets/blog-placeholder-1.jpg";
|
||||||
import {SITE_TITLE} from '../consts';
|
import { SITE_TITLE } from "../consts";
|
||||||
import {Font} from 'astro:assets';
|
import { Font } from "astro:assets";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -16,38 +16,38 @@ interface Props {
|
||||||
|
|
||||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
|
|
||||||
const {title, description, image = FallbackImage} = Astro.props;
|
const { title, description, image = FallbackImage } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Global Metadata -->
|
<!-- Global Metadata -->
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="sitemap" href="/sitemap-index.xml"/>
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
<link
|
<link
|
||||||
rel="alternate"
|
rel="alternate"
|
||||||
type="application/rss+xml"
|
type="application/rss+xml"
|
||||||
title={SITE_TITLE}
|
title={SITE_TITLE}
|
||||||
href={new URL('rss.xml', Astro.site)}
|
href={new URL("rss.xml", Astro.site)}
|
||||||
/>
|
/>
|
||||||
<meta name="generator" content={Astro.generator}/>
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
|
||||||
<Font cssVariable="--font-atkinson" preload/>
|
<Font cssVariable="--font-atkinson" preload />
|
||||||
|
|
||||||
<!-- Canonical URL -->
|
<!-- Canonical URL -->
|
||||||
<link rel="canonical" href={canonicalURL}/>
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
<!-- Primary Meta Tags -->
|
<!-- Primary Meta Tags -->
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta name="description" content={description}/>
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:url" content={Astro.url}/>
|
<meta property="og:url" content={Astro.url} />
|
||||||
<meta property="og:title" content={title}/>
|
<meta property="og:title" content={title} />
|
||||||
<meta property="og:description" content={description}/>
|
<meta property="og:description" content={description} />
|
||||||
<meta property="og:image" content={new URL(image.src, Astro.url)}/>
|
<meta property="og:image" content={new URL(image.src, Astro.url)} />
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
import Image from 'astro/components/Image.astro';
|
import Image from "astro/components/Image.astro";
|
||||||
import FormInput from '../FormInput/FormInput.astro';
|
import FormInput from "../FormInput/FormInput.astro";
|
||||||
import Dog from '@images/main/contact-form/Mask.svg';
|
import Dog from "@images/main/contact-form/Mask.svg";
|
||||||
import BluePlanet from '@images/main/contact-form/Planet Blue.svg';
|
import BluePlanet from "@images/main/contact-form/Planet Blue.svg";
|
||||||
import YellowPlanet from '@images/main/contact-form/Planet Yellow.svg';
|
import YellowPlanet from "@images/main/contact-form/Planet Yellow.svg";
|
||||||
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
|
import { getLangFromUrl, useTranslations } from "@/i18n/utils";
|
||||||
import './contact-form.style.css';
|
import "./contact-form.style.css";
|
||||||
|
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
@ -15,9 +15,13 @@ const t = useTranslations(lang);
|
||||||
<h2>{t("contacts.title")}</h2>
|
<h2>{t("contacts.title")}</h2>
|
||||||
|
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<Image src={Dog} alt="cute dog in space"/>
|
<Image src={Dog} alt="cute dog in space" />
|
||||||
<Image src={BluePlanet} alt="blue planet" class="planet blue"/>
|
<Image src={BluePlanet} alt="blue planet" class="planet blue" />
|
||||||
<Image src={YellowPlanet} alt="yellow planet" class="planet yellow"/>
|
<Image
|
||||||
|
src={YellowPlanet}
|
||||||
|
alt="yellow planet"
|
||||||
|
class="planet yellow orbit-element"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form class="container">
|
<form class="container">
|
||||||
|
|
@ -43,9 +47,15 @@ const t = useTranslations(lang);
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<cap-widget data-cap-api-endpoint="https://cap.midcreative.eu/8e5272fb9c08/api/"></cap-widget>
|
<cap-widget
|
||||||
|
data-cap-api-endpoint="https://cap.midcreative.eu/8e5272fb9c08/api/"
|
||||||
|
></cap-widget>
|
||||||
|
|
||||||
<div id="captcha-error" class="error" style="display: none; margin-top: 10px;">
|
<div
|
||||||
|
id="captcha-error"
|
||||||
|
class="error"
|
||||||
|
style="display: none; margin-top: 10px;"
|
||||||
|
>
|
||||||
{t("contacts.captchaError") || "Please complete the captcha"}
|
{t("contacts.captchaError") || "Please complete the captcha"}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -54,9 +64,40 @@ const t = useTranslations(lang);
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const form = document.querySelector('.contact-form form');
|
// const { animate, inView } = await import("motion");
|
||||||
form?.addEventListener('submit', (e) => {
|
const form = document.querySelector(".contact-form form");
|
||||||
|
form?.addEventListener("submit", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log('Form submitted - add your logic here');
|
console.log("Form submitted - add your logic here");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// inView("#contact-us", (el) => {
|
||||||
|
// const orbitImage = el.querySelector(".planet.yellow");
|
||||||
|
|
||||||
|
// animate(
|
||||||
|
// orbitImage,
|
||||||
|
// {
|
||||||
|
// left: ["-124px", "400px", "-200px", "-124px"],
|
||||||
|
// top: ["150px", "100px", "180px", "150px"],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: "tween",
|
||||||
|
// duration: 6,
|
||||||
|
// repeat: Infinity,
|
||||||
|
// easing: "easeIn",
|
||||||
|
// onUpdate: () => {
|
||||||
|
// // Read current computed 'left' position
|
||||||
|
// const currentLeft = parseFloat(
|
||||||
|
// window.getComputedStyle(orbitImage).left,
|
||||||
|
// );
|
||||||
|
// // Bring to front when far right, move behind when coming back
|
||||||
|
// if (currentLeft > 380) {
|
||||||
|
// orbitImage.style.zIndex = "3";
|
||||||
|
// } else if (currentLeft < -180) {
|
||||||
|
// orbitImage.style.zIndex = "-1";
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// );
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -48,11 +48,8 @@ section.content .contact-form h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-form .image img:first-child {
|
.contact-form .image img:first-child {
|
||||||
background: linear-gradient(
|
background:
|
||||||
0deg,
|
linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)),
|
||||||
rgba(27, 27, 27, 0.2),
|
|
||||||
rgba(27, 27, 27, 0.2)
|
|
||||||
),
|
|
||||||
rgba(255, 255, 255, 0.01);
|
rgba(255, 255, 255, 0.01);
|
||||||
box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
|
box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
|
|
@ -73,6 +70,99 @@ section.content .contact-form h2 {
|
||||||
top: 150px;
|
top: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes circularOrbitYellow {
|
||||||
|
0% {
|
||||||
|
left: -124px;
|
||||||
|
top: 150px;
|
||||||
|
z-index: -1;
|
||||||
|
scale: 0.8;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left: 400px;
|
||||||
|
top: 80px;
|
||||||
|
z-index: -1; /* Flips to front at peak right */
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
left: 390px;
|
||||||
|
top: 70px;
|
||||||
|
z-index: 3; /* Flips to front at peak right */
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
scale: 1.2;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
left: -200px;
|
||||||
|
top: 100px;
|
||||||
|
z-index: 3; /* Flips back behind at peak left */
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
91% {
|
||||||
|
left: -190px;
|
||||||
|
top: 101px;
|
||||||
|
z-index: -1; /* Flips back behind at peak left */
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: -124px;
|
||||||
|
top: 150px;
|
||||||
|
z-index: -1;
|
||||||
|
scale: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow.orbit-element {
|
||||||
|
position: absolute;
|
||||||
|
animation: circularOrbitYellow 8s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes circularOrbitBlue {
|
||||||
|
0% {
|
||||||
|
right: -133px;
|
||||||
|
top: 150px;
|
||||||
|
z-index: 3;
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
right: 400px;
|
||||||
|
top: 80px;
|
||||||
|
z-index: 3; /* Flips to front at peak right */
|
||||||
|
scale: 1.3;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
right: 390px;
|
||||||
|
top: 70px;
|
||||||
|
z-index: -1; /* Flips to front at peak right */
|
||||||
|
scale: 1.3;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
scale: 1.2;
|
||||||
|
top: 120px;
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
right: -100px;
|
||||||
|
top: 140px;
|
||||||
|
z-index: -1; /* Flips back behind at peak left */
|
||||||
|
scale: 0.9;
|
||||||
|
}
|
||||||
|
91% {
|
||||||
|
right: -110px;
|
||||||
|
top: 141px;
|
||||||
|
z-index: 3; /* Flips back behind at peak left */
|
||||||
|
scale: 0.9;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
right: -133px;
|
||||||
|
top: 150px;
|
||||||
|
z-index: 3;
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
position: absolute;
|
||||||
|
animation: circularOrbitBlue 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
/* Tablet breakpoint */
|
/* Tablet breakpoint */
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.contact-form form {
|
.contact-form form {
|
||||||
|
|
@ -112,13 +202,16 @@ section.content .contact-form h2 {
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-form .image img {
|
.contact-form .image img {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-form form {
|
.contact-form form {
|
||||||
grid-row: 3/4;
|
grid-row: 3/4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
---
|
---
|
||||||
import {Image} from 'astro:assets';
|
import { Image } from "astro:assets";
|
||||||
import Phone from '@images/main/footer/phone.png';
|
import Phone from "@images/main/footer/phone.png";
|
||||||
import Email from '@images/main/footer/email.png';
|
import Email from "@images/main/footer/email.png";
|
||||||
import Telegram from '@images/main/footer/telegram.png';
|
import Telegram from "@images/main/footer/telegram.png";
|
||||||
import Whatsapp from '@images/main/footer/whatsapp.png';
|
import Whatsapp from "@images/main/footer/whatsapp.png";
|
||||||
import './contacts.style.css';
|
import "./contacts.style.css";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="container contacts">
|
<div class="container contacts">
|
||||||
<div>
|
<div>
|
||||||
<a href="tel:+37125704038">
|
<a href="tel:+37125704038">
|
||||||
<Image src={Phone} alt="phone" width={64} height={64}/>
|
<Image src={Phone} alt="phone" width={64} height={64} />
|
||||||
</a>
|
</a>
|
||||||
<a href="tel:+37125704038">+371 25704038</a>
|
<a href="tel:+37125704038">+371 25704038</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="mailto:info@midcreative.eu">
|
<a href="mailto:info@midcreative.eu">
|
||||||
<Image src={Email} alt="email" width={64} height={64}/>
|
<Image src={Email} alt="email" width={64} height={64} />
|
||||||
</a>
|
</a>
|
||||||
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
|
<a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
|
||||||
<Image src={Telegram} alt="telegram" width={64} height={64}/>
|
<Image src={Telegram} alt="telegram" width={64} height={64} />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
|
<a href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
|
||||||
Telegram
|
Telegram
|
||||||
|
|
@ -30,7 +30,7 @@ import './contacts.style.css';
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
|
<a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
|
||||||
<Image src={Whatsapp} alt="whatsapp" width={64} height={64}/>
|
<Image src={Whatsapp} alt="whatsapp" width={64} height={64} />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
|
<a href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
|
||||||
WhatsApp
|
WhatsApp
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
---
|
---
|
||||||
import {Image} from 'astro:assets';
|
import { Image } from "astro:assets";
|
||||||
|
|
||||||
// src/components/Footer/Footer.astro
|
// src/components/Footer/Footer.astro
|
||||||
import Contacts from '@components/Contacts/Contacts.astro';
|
import Contacts from "@components/Contacts/Contacts.astro";
|
||||||
import TopLine from '@images/main/footer/top-line.png';
|
import TopLine from "@images/main/footer/top-line.png";
|
||||||
import Logo from '@images/main/footer/logo.svg';
|
import Logo from "@images/main/footer/logo.svg";
|
||||||
import { getLangFromUrl, useTranslatedPath, useTranslations } from '@/i18n/utils';
|
import {
|
||||||
import './footer.style.css';
|
getLangFromUrl,
|
||||||
|
useTranslatedPath,
|
||||||
|
useTranslations,
|
||||||
|
} from "@/i18n/utils";
|
||||||
|
import "./footer.style.css";
|
||||||
|
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
@ -15,7 +19,7 @@ const translatePath = useTranslatedPath(lang);
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<Image class="line" src={TopLine} alt="" />
|
<Image class="line" src={TopLine} alt="" />
|
||||||
<Contacts/>
|
<Contacts />
|
||||||
|
|
||||||
<div class="container info">
|
<div class="container info">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -28,14 +32,21 @@ const translatePath = useTranslatedPath(lang);
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<h6>{t("footer.navigation")}</h6>
|
<h6>{t("footer.navigation")}</h6>
|
||||||
<a href={translatePath('/#top')} class="gray mobile">{t("menu.home")}</a>
|
<a href={translatePath("/#top")} class="gray mobile">{t("menu.home")}</a>
|
||||||
<a href={translatePath('/#services')} class="gray">{t("menu.services")}</a>
|
<a href={translatePath("/#services")} class="gray">{t("menu.services")}</a
|
||||||
<a href={translatePath('/#about-us')} class="gray">{t("menu.about_us")}</a>
|
>
|
||||||
<a href={translatePath('/#projects')} class="gray">{t("menu.portfolio")}</a>
|
<a href={translatePath("/#about-us")} class="gray">{t("menu.about_us")}</a
|
||||||
<a href={translatePath('/#contact-us')} class="gray">{t("menu.contact_us")}</a>
|
>
|
||||||
|
<a href={translatePath("/#projects")} class="gray"
|
||||||
|
>{t("menu.portfolio")}</a
|
||||||
|
>
|
||||||
|
<a href="/blog" class="gray">{t("menu.blog")}</a>
|
||||||
|
<a href={translatePath("/#contact-us")} class="gray"
|
||||||
|
>{t("menu.contact_us")}</a
|
||||||
|
>
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div>
|
||||||
<Image src={Logo} alt=""/>
|
<Image src={Logo} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,20 @@
|
||||||
---
|
---
|
||||||
import "./form-input.style.css";
|
import "./form-input.style.css";
|
||||||
import type {HTMLAttributes} from "astro/types";
|
import type { HTMLAttributes } from "astro/types";
|
||||||
|
|
||||||
interface Props extends HTMLAttributes<"input"> {
|
interface Props extends HTMLAttributes<"input"> {
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {label, id = `input-${crypto.randomUUID()}`, placeholder = " ", ...otherProps} = Astro.props;
|
const {
|
||||||
|
label,
|
||||||
|
id = `input-${crypto.randomUUID()}`,
|
||||||
|
placeholder = " ",
|
||||||
|
...otherProps
|
||||||
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="form-input-group">
|
<div class="form-input-group">
|
||||||
<input id={id} placeholder={placeholder} {...otherProps}/>
|
<input id={id} placeholder={placeholder} {...otherProps} />
|
||||||
<label for={id} class="form-input-label">{label}</label>
|
<label for={id} class="form-input-label">{label}</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,10 @@ const { date } = Astro.props;
|
||||||
|
|
||||||
<time datetime={date.toISOString()}>
|
<time datetime={date.toISOString()}>
|
||||||
{
|
{
|
||||||
date.toLocaleDateString('en-us', {
|
date.toLocaleDateString("en-us", {
|
||||||
year: 'numeric',
|
year: "numeric",
|
||||||
month: 'short',
|
month: "short",
|
||||||
day: 'numeric',
|
day: "numeric",
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</time>
|
</time>
|
||||||
|
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
---
|
|
||||||
import { SITE_TITLE } from '../consts';
|
|
||||||
import HeaderLink from './HeaderLink.astro';
|
|
||||||
---
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<h2><a href="/">{SITE_TITLE}</a></h2>
|
|
||||||
<div class="internal-links">
|
|
||||||
<HeaderLink href="/">Home</HeaderLink>
|
|
||||||
<HeaderLink href="/blog">Blog</HeaderLink>
|
|
||||||
<HeaderLink href="/about">About</HeaderLink>
|
|
||||||
</div>
|
|
||||||
<div class="social-links">
|
|
||||||
<a href="https://m.webtoo.ls/@astro" target="_blank">
|
|
||||||
<span class="sr-only">Follow Astro on Mastodon</span>
|
|
||||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/astrodotbuild" target="_blank">
|
|
||||||
<span class="sr-only">Follow Astro on Twitter</span>
|
|
||||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/withastro/astro" target="_blank">
|
|
||||||
<span class="sr-only">Go to Astro's GitHub repo</span>
|
|
||||||
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
|
||||||
></path></svg
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<style>
|
|
||||||
header {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 1em;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 a,
|
|
||||||
h2 a.active {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
padding: 1em 0.5em;
|
|
||||||
color: var(--black);
|
|
||||||
border-bottom: 4px solid transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
nav a.active {
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom-color: var(--accent);
|
|
||||||
}
|
|
||||||
.social-links,
|
|
||||||
.social-links a {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.social-links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -6,7 +6,11 @@ import Logo2 from "@images/main/footer/logo.svg";
|
||||||
import Phone from "@images/main/footer/phone.png";
|
import Phone from "@images/main/footer/phone.png";
|
||||||
import Email from "@images/main/footer/email.png";
|
import Email from "@images/main/footer/email.png";
|
||||||
import { languages, type SupportedLang } from "@/i18n/ui";
|
import { languages, type SupportedLang } from "@/i18n/ui";
|
||||||
import { getLangFromUrl, useTranslatedPath, useTranslations } from "@/i18n/utils";
|
import {
|
||||||
|
getLangFromUrl,
|
||||||
|
useTranslatedPath,
|
||||||
|
useTranslations,
|
||||||
|
} from "@/i18n/utils";
|
||||||
|
|
||||||
const lang = getLangFromUrl(Astro.url);
|
const lang = getLangFromUrl(Astro.url);
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
@ -16,28 +20,38 @@ const translatePath = useTranslatedPath(lang);
|
||||||
<header>
|
<header>
|
||||||
<div class="cont">
|
<div class="cont">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<Image src={Logo} alt="MID"/>
|
<Image src={Logo} alt="MID" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="navigation">
|
<nav class="navigation">
|
||||||
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
||||||
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
||||||
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
||||||
|
<a href="/blog">{t("menu.blog")}</a>
|
||||||
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="lang-switcher" aria-label="Language switcher">
|
<nav class="lang-switcher" aria-label="Language switcher">
|
||||||
{Object.entries(languages).map(([locale, label]) => {
|
{
|
||||||
|
Object.entries(languages).map(([locale, label]) => {
|
||||||
const targetLang = locale as SupportedLang;
|
const targetLang = locale as SupportedLang;
|
||||||
return (
|
return (
|
||||||
<a href={translatePath("/", targetLang)} class={targetLang === lang ? "active" : ""}>
|
<a
|
||||||
|
href={translatePath("/", targetLang)}
|
||||||
|
class={targetLang === lang ? "active" : ""}
|
||||||
|
>
|
||||||
{label}
|
{label}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<button class="mobile-menu-btn" aria-label="Toggle menu" aria-expanded="false">
|
<button
|
||||||
|
class="mobile-menu-btn"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
<span id="top-left"></span>
|
<span id="top-left"></span>
|
||||||
<span id="top-right"></span>
|
<span id="top-right"></span>
|
||||||
<span id="center-left"></span>
|
<span id="center-left"></span>
|
||||||
|
|
@ -47,36 +61,42 @@ const translatePath = useTranslatedPath(lang);
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="mobile-menu">
|
<div class="mobile-menu">
|
||||||
<Image src={Logo2} alt="MID Creative Digital Agency"/>
|
<Image src={Logo2} alt="MID Creative Digital Agency" />
|
||||||
|
|
||||||
<nav class="navigation">
|
<nav class="navigation">
|
||||||
<a href={translatePath("/#top")}>{t("menu.home")}</a>
|
<a href={translatePath("/#top")}>{t("menu.home")}</a>
|
||||||
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
||||||
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
|
||||||
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
<a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
|
||||||
|
<a href="/blog">{t("menu.blog")}</a>
|
||||||
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
<a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="lang-switcher" aria-label="Language switcher mobile">
|
<nav class="lang-switcher" aria-label="Language switcher mobile">
|
||||||
{Object.entries(languages).map(([locale, label]) => {
|
{
|
||||||
|
Object.entries(languages).map(([locale, label]) => {
|
||||||
const targetLang = locale as SupportedLang;
|
const targetLang = locale as SupportedLang;
|
||||||
return (
|
return (
|
||||||
<a href={translatePath("/", targetLang)} class={targetLang === lang ? "active" : ""}>
|
<a
|
||||||
|
href={translatePath("/", targetLang)}
|
||||||
|
class={targetLang === lang ? "active" : ""}
|
||||||
|
>
|
||||||
{label}
|
{label}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="header-contacts">
|
<div class="header-contacts">
|
||||||
<a href="tel:+37126620770">
|
<a href="tel:+37126620770">
|
||||||
<Image src={Phone} alt="phone"/>
|
<Image src={Phone} alt="phone" />
|
||||||
</a>
|
</a>
|
||||||
<a href="tel:+37126620770">+371 2662 0770</a>
|
<a href="tel:+37126620770">+371 2662 0770</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-contacts">
|
<div class="header-contacts">
|
||||||
<a href="mailto:info@midcreative.eu">
|
<a href="mailto:info@midcreative.eu">
|
||||||
<Image src={Email} alt="email"/>
|
<Image src={Email} alt="email" />
|
||||||
</a>
|
</a>
|
||||||
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -85,26 +105,26 @@ const translatePath = useTranslatedPath(lang);
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const btn = document.querySelector('.mobile-menu-btn') as HTMLElement;
|
const btn = document.querySelector(".mobile-menu-btn") as HTMLElement;
|
||||||
const menu = document.querySelector('.mobile-menu') as HTMLElement;
|
const menu = document.querySelector(".mobile-menu") as HTMLElement;
|
||||||
|
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener("click", () => {
|
||||||
const isOpen = menu.classList.toggle('open');
|
const isOpen = menu.classList.toggle("open");
|
||||||
btn.classList.toggle('open');
|
btn.classList.toggle("open");
|
||||||
btn.setAttribute('aria-expanded', String(isOpen));
|
btn.setAttribute("aria-expanded", String(isOpen));
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
if (!menu.contains(e.target as Node) && !btn.contains(e.target as Node)) {
|
if (!menu.contains(e.target as Node) && !btn.contains(e.target as Node)) {
|
||||||
menu.classList.remove('open');
|
menu.classList.remove("open");
|
||||||
btn.classList.remove('open');
|
btn.classList.remove("open");
|
||||||
btn.setAttribute('aria-expanded', 'false');
|
btn.setAttribute("aria-expanded", "false");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener("resize", () => {
|
||||||
menu.classList.remove('open');
|
menu.classList.remove("open");
|
||||||
btn.classList.remove('open');
|
btn.classList.remove("open");
|
||||||
btn.setAttribute('aria-expanded', 'false');
|
btn.setAttribute("aria-expanded", "false");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -106,7 +106,8 @@ header {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#top-left, #top-right {
|
#top-left,
|
||||||
|
#top-right {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -114,15 +115,20 @@ header {
|
||||||
right: 18px;
|
right: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#center-left, #center-right {
|
#center-left,
|
||||||
|
#center-right {
|
||||||
top: 9px;
|
top: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bottom-left, #bottom-right {
|
#bottom-left,
|
||||||
|
#bottom-right {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#top-right, #center-right, #bottom-right, #bottom-left {
|
#top-right,
|
||||||
|
#center-right,
|
||||||
|
#bottom-right,
|
||||||
|
#bottom-left {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -131,11 +137,13 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
#top-right, #center-right {
|
#top-right,
|
||||||
|
#center-right {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#center-right, #center-left {
|
#center-right,
|
||||||
|
#center-left {
|
||||||
right: 9px;
|
right: 9px;
|
||||||
left: unset;
|
left: unset;
|
||||||
}
|
}
|
||||||
|
|
@ -160,12 +168,14 @@ header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 96px 0;
|
padding: 96px 0;
|
||||||
background: radial-gradient(
|
background:
|
||||||
|
radial-gradient(
|
||||||
59.78% 25.3% at 50% 50%,
|
59.78% 25.3% at 50% 50%,
|
||||||
rgba(225, 104, 154, 0.15) 0%,
|
rgba(225, 104, 154, 0.15) 0%,
|
||||||
rgba(141, 162, 243, 0.063) 49.1%,
|
rgba(141, 162, 243, 0.063) 49.1%,
|
||||||
rgba(23, 23, 23, 0) 100%
|
rgba(23, 23, 23, 0) 100%
|
||||||
), rgba(13, 13, 13, 0.95);
|
),
|
||||||
|
rgba(13, 13, 13, 0.95);
|
||||||
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
|
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
import type { HTMLAttributes } from 'astro/types';
|
import type { HTMLAttributes } from "astro/types";
|
||||||
|
|
||||||
type Props = HTMLAttributes<'a'>;
|
type Props = HTMLAttributes<"a">;
|
||||||
|
|
||||||
const { href, class: className, ...props } = Astro.props;
|
const { href, class: className, ...props } = Astro.props;
|
||||||
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
|
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
|
||||||
const subpath = pathname.match(/[^\/]+/g);
|
const subpath = pathname.match(/[^\/]+/g);
|
||||||
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
|
const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@ import { Image } from "astro:assets";
|
||||||
import type { ImageMetadata } from "astro";
|
import type { ImageMetadata } from "astro";
|
||||||
import Circle from "@images/main/services/circle.png";
|
import Circle from "@images/main/services/circle.png";
|
||||||
import Rocket from "@images/main/about-us/rocket.png";
|
import Rocket from "@images/main/about-us/rocket.png";
|
||||||
import IntroAstronaut from "@images/main/intro/astronaut.png";
|
|
||||||
import IntroSpaceship from "@images/main/intro/spaceship.svg";
|
import IntroSpaceship from "@images/main/intro/spaceship.svg";
|
||||||
import { useTranslations } from "@/i18n/utils";
|
import { useTranslations } from "@/i18n/utils";
|
||||||
import type { SupportedLang } from "@/i18n/ui";
|
import type { SupportedLang } from "@/i18n/ui";
|
||||||
|
|
@ -23,45 +22,64 @@ const { lang } = Astro.props;
|
||||||
const t = useTranslations(lang);
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
const cards =
|
const cards =
|
||||||
(t("services.cards") as Array<{ image: string; title: string; text: string }>) || [];
|
(t("services.cards") as Array<{
|
||||||
|
image: string;
|
||||||
|
title: string;
|
||||||
|
text: string;
|
||||||
|
}>) || [];
|
||||||
|
const projects =
|
||||||
|
(t("projects") as Array<{
|
||||||
|
title: string;
|
||||||
|
image: string;
|
||||||
|
info: string[];
|
||||||
|
text: string;
|
||||||
|
}>) || [];
|
||||||
|
|
||||||
const images = import.meta.glob<{ default: ImageMetadata }>(
|
const images = import.meta.glob<{ default: ImageMetadata }>(
|
||||||
"../assets/images/main/services/*.svg",
|
"../assets/images/main/services/*.svg",
|
||||||
{ eager: true },
|
{ eager: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const projectImages = import.meta.glob<{ default: ImageMetadata }>(
|
||||||
|
"../assets/images/main/projects/*.{png,jpg,jpeg,webp,svg}",
|
||||||
|
{ eager: true },
|
||||||
|
);
|
||||||
|
|
||||||
const getImage = (imageName: string) => {
|
const getImage = (imageName: string) => {
|
||||||
const path = `../assets/images/main/services/${imageName}`;
|
const path = `../assets/images/main/services/${imageName}`;
|
||||||
return images[path]?.default;
|
return images[path]?.default;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getProjectImage = (imageName: string) => {
|
||||||
|
const path = `../assets/images/main/projects/${imageName}`;
|
||||||
|
return projectImages[path]?.default;
|
||||||
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang={lang}>
|
<html lang={lang}>
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main-page" id="top">
|
<div class="main-page" id="top">
|
||||||
<div class="intro-bg">
|
<div class="intro-bg">
|
||||||
<Header />
|
<Header />
|
||||||
<section class="container intro" id="home">
|
<section class="container intro" id="home">
|
||||||
<div class="intro__title">
|
<div class="image" id="heroImg"></div>
|
||||||
|
<div class="title">
|
||||||
<h1>
|
<h1>
|
||||||
{t("intro.creating")} <span>{t("intro.websites")}</span>
|
{t("intro.creating")}{` `}
|
||||||
|
<span>{t("intro.websites")}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<ul class="intro__items" aria-label="Intro services">
|
<div>
|
||||||
<li>{t("intro.apps")}</li>
|
<p>{t("intro.apps")}</p>
|
||||||
<li>{t("intro.shops")}</li>
|
<p>{t("intro.shops")}</p>
|
||||||
<li>{t("intro.platforms")}</li>
|
<p>{t("intro.platforms")}</p>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="intro__image">
|
<div class="rocket">
|
||||||
<Image src={IntroAstronaut} alt="" loading="eager" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="intro__rocket">
|
|
||||||
<Image src={IntroSpaceship} alt="" />
|
<Image src={IntroSpaceship} alt="" />
|
||||||
<p>{t("intro.explore")}</p>
|
<p>{t("intro.explore")}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -72,7 +90,8 @@ const getImage = (imageName: string) => {
|
||||||
<h2>{t("services.title")}</h2>
|
<h2>{t("services.title")}</h2>
|
||||||
<div class="container services">
|
<div class="container services">
|
||||||
<Image src={Circle} alt="circle" class="circle" />
|
<Image src={Circle} alt="circle" class="circle" />
|
||||||
{cards.map((card) => {
|
{
|
||||||
|
cards.map((card) => {
|
||||||
const imgSrc = getImage(card.image);
|
const imgSrc = getImage(card.image);
|
||||||
return (
|
return (
|
||||||
imgSrc && (
|
imgSrc && (
|
||||||
|
|
@ -83,17 +102,18 @@ const getImage = (imageName: string) => {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="content container" id="about-us">
|
<section class="content container" id="about-us">
|
||||||
<div class="about-us container">
|
<div class="about-us container">
|
||||||
<div>
|
<div>
|
||||||
<Image src={Rocket} alt="rocket" />
|
<Image class="rocket-img" src={Rocket} alt="rocket" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5>{t("about_us.sub_title")}</h5>
|
<h2 class="header5">{t("about_us.sub_title")}</h2>
|
||||||
<p class="text">{t("about_us.text")}</p>
|
<p class="text">{t("about_us.text")}</p>
|
||||||
<div class="stats">
|
<div class="stats">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -113,11 +133,148 @@ const getImage = (imageName: string) => {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="content container" id="projects">
|
||||||
|
<h2>{t("menu.portfolio")}</h2>
|
||||||
|
<div class="projects-grid">
|
||||||
|
{
|
||||||
|
projects.map((project) => {
|
||||||
|
const projectImage = getProjectImage(project.image);
|
||||||
|
if (!projectImage) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article class="project-card">
|
||||||
|
<div class="project-card__media">
|
||||||
|
<Image
|
||||||
|
src={projectImage}
|
||||||
|
alt={project.title}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="project-card__content">
|
||||||
|
<h3>{project.title}</h3>
|
||||||
|
<ul
|
||||||
|
class="project-card__tags"
|
||||||
|
aria-label={`${project.title} categories`}
|
||||||
|
>
|
||||||
|
{project.info.map((item) => (
|
||||||
|
<li>{item}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<p>{project.text}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="content container" id="contact-us">
|
<section class="content container" id="contact-us">
|
||||||
<ContactForm />
|
<ContactForm />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
|
<script>
|
||||||
|
const { animate, inView, stagger } = await import("motion");
|
||||||
|
// Selector
|
||||||
|
inView("section", (element) => {
|
||||||
|
animate(
|
||||||
|
element,
|
||||||
|
{ opacity: [0, 1], y: [30, 0] },
|
||||||
|
{ duration: 1, easing: "easeIn" },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
inView(".intro", (el) => {
|
||||||
|
// Select all the targets inside the triggered section
|
||||||
|
const introItems = el.querySelectorAll(".intro .title > *");
|
||||||
|
const introImage = el.querySelector(".intro .image");
|
||||||
|
animate(
|
||||||
|
introItems,
|
||||||
|
{ opacity: [0, 1], y: [30, 0] },
|
||||||
|
{
|
||||||
|
duration: 0.6,
|
||||||
|
easing: "easeIn",
|
||||||
|
delay: stagger(0.4),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
animate(
|
||||||
|
introImage,
|
||||||
|
{
|
||||||
|
opacity: [0, 1],
|
||||||
|
y: [30, 0],
|
||||||
|
x: [
|
||||||
|
`var(--floating-intro-image-start-x)`,
|
||||||
|
`var(--floating-intro-image-x)`,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
duration: 1,
|
||||||
|
easing: "easeIn",
|
||||||
|
delay: 0.8,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
animate(
|
||||||
|
introImage,
|
||||||
|
{ y: [0, 30] },
|
||||||
|
{
|
||||||
|
type: "tween",
|
||||||
|
repeat: Infinity,
|
||||||
|
duration: 3,
|
||||||
|
repeatType: "reverse",
|
||||||
|
easing: "easeInOut",
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
inView("#services", (el) => {
|
||||||
|
// Select all the targets inside the triggered section
|
||||||
|
const cardElements = el.querySelectorAll(".card > *");
|
||||||
|
const cardElementsContainer = el.querySelectorAll(".services .card");
|
||||||
|
animate(
|
||||||
|
cardElementsContainer,
|
||||||
|
{ opacity: [0, 1], y: [50, 0] },
|
||||||
|
{
|
||||||
|
duration: 0.6,
|
||||||
|
easing: "easeIn",
|
||||||
|
// delay: 0.3,
|
||||||
|
|
||||||
|
delay: stagger(0.3),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
animate(
|
||||||
|
cardElements,
|
||||||
|
{ opacity: [0, 1], y: [30, 0] },
|
||||||
|
{
|
||||||
|
duration: 0.5,
|
||||||
|
easing: "easeIn",
|
||||||
|
delay: stagger(0.3),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
inView("#projects", (el) => {
|
||||||
|
// Select all the targets inside the triggered section
|
||||||
|
const projectCards = el.querySelectorAll(".project-card");
|
||||||
|
animate(
|
||||||
|
projectCards,
|
||||||
|
{ opacity: [0, 1], y: [50, 0] },
|
||||||
|
{
|
||||||
|
duration: 0.6,
|
||||||
|
easing: "easeIn",
|
||||||
|
// delay: 0.3,
|
||||||
|
|
||||||
|
delay: stagger(0.3),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// Place any global data in this file.
|
// Place any global data in this file.
|
||||||
// You can import this data from anywhere in your site by using the `import` keyword.
|
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||||
|
|
||||||
export const SITE_TITLE = 'Astro Blog';
|
export const SITE_TITLE = "Astro Blog";
|
||||||
export const SITE_DESCRIPTION = 'Welcome to my website!';
|
export const SITE_DESCRIPTION = "Welcome to my website!";
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import { defineCollection } from 'astro:content';
|
import { defineCollection } from "astro:content";
|
||||||
import { glob } from 'astro/loaders';
|
import { glob } from "astro/loaders";
|
||||||
import { z } from 'astro/zod';
|
import { z } from "astro/zod";
|
||||||
|
|
||||||
const blog = defineCollection({
|
const blog = defineCollection({
|
||||||
// Load Markdown and MDX files in the `src/content/blog/` directory.
|
// Load Markdown and MDX files in the `src/content/blog/` directory.
|
||||||
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
|
loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
|
||||||
// Type-check frontmatter using a schema
|
// Type-check frontmatter using a schema
|
||||||
schema: ({ image }) =>
|
schema: ({ image }) =>
|
||||||
z.object({
|
z.object({
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 'First post'
|
title: "First post"
|
||||||
description: 'Lorem ipsum dolor sit amet'
|
description: "Lorem ipsum dolor sit amet"
|
||||||
pubDate: 'Jul 08 2022'
|
pubDate: "Jul 08 2022"
|
||||||
heroImage: '../../assets/blog-placeholder-3.jpg'
|
heroImage: "../../assets/blog-placeholder-3.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 'Markdown Style Guide'
|
title: "Markdown Style Guide"
|
||||||
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
|
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
|
||||||
pubDate: 'Jun 19 2024'
|
pubDate: "Jun 19 2024"
|
||||||
heroImage: '../../assets/blog-placeholder-1.jpg'
|
heroImage: "../../assets/blog-placeholder-1.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
|
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 'Second post'
|
title: "Second post"
|
||||||
description: 'Lorem ipsum dolor sit amet'
|
description: "Lorem ipsum dolor sit amet"
|
||||||
pubDate: 'Jul 15 2022'
|
pubDate: "Jul 15 2022"
|
||||||
heroImage: '../../assets/blog-placeholder-4.jpg'
|
heroImage: "../../assets/blog-placeholder-4.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 'Third post'
|
title: "Third post"
|
||||||
description: 'Lorem ipsum dolor sit amet'
|
description: "Lorem ipsum dolor sit amet"
|
||||||
pubDate: 'Jul 22 2022'
|
pubDate: "Jul 22 2022"
|
||||||
heroImage: '../../assets/blog-placeholder-2.jpg'
|
heroImage: "../../assets/blog-placeholder-2.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 'Using MDX'
|
title: "Using MDX"
|
||||||
description: 'Lorem ipsum dolor sit amet'
|
description: "Lorem ipsum dolor sit amet"
|
||||||
pubDate: 'Jun 01 2024'
|
pubDate: "Jun 01 2024"
|
||||||
heroImage: '../../assets/blog-placeholder-5.jpg'
|
heroImage: "../../assets/blog-placeholder-5.jpg"
|
||||||
---
|
---
|
||||||
|
|
||||||
This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
|
This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
|
||||||
|
|
@ -18,7 +18,7 @@ If you have existing content authored in MDX, this integration will hopefully ma
|
||||||
Here is how you import and use a UI component inside of MDX.
|
Here is how you import and use a UI component inside of MDX.
|
||||||
When you open this page in the browser, you should see the clickable button below.
|
When you open this page in the browser, you should see the clickable button below.
|
||||||
|
|
||||||
import HeaderLink from '../../components/HeaderLink.astro';
|
import HeaderLink from "../../components/HeaderLink.astro";
|
||||||
|
|
||||||
<HeaderLink href="#" onclick="alert('clicked!')">
|
<HeaderLink href="#" onclick="alert('clicked!')">
|
||||||
Embedded component in MDX
|
Embedded component in MDX
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,67 @@
|
||||||
---
|
---
|
||||||
import {Image} from 'astro:assets';
|
import type { CollectionEntry } from "astro:content";
|
||||||
import type {CollectionEntry} from 'astro:content';
|
import BaseHead from "@/components/BaseHead.astro";
|
||||||
import BaseHead from '@/components/BaseHead.astro';
|
import Footer from "@/components/Footer/Footer.astro";
|
||||||
import Footer from '@/components/Footer/Footer.astro';
|
import FormattedDate from "@/components/FormattedDate.astro";
|
||||||
import FormattedDate from '@/components/FormattedDate.astro';
|
import Header from "@/components/Header/Header.astro";
|
||||||
import Header from '@/components/Header.astro';
|
import ContactForm from "@/components/ContactForm/ContactForm.astro";
|
||||||
|
import { getLangFromUrl, useTranslations } from "@/i18n/utils";
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import "@/styles/index.css";
|
||||||
|
|
||||||
type Props = CollectionEntry<'blog'>['data'];
|
type Props = CollectionEntry<"blog">["data"];
|
||||||
|
|
||||||
const {title, description, pubDate, updatedDate, heroImage} = Astro.props;
|
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||||
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
const t = useTranslations(lang);
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang={lang}>
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title={title} description={description}/>
|
<BaseHead title={title} description={description} />
|
||||||
<style>
|
</head>
|
||||||
main {
|
|
||||||
width: calc(100% - 2em);
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image {
|
<body class="blog-post-page">
|
||||||
width: 100%;
|
<Header />
|
||||||
}
|
<main>
|
||||||
|
|
||||||
.hero-image img {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose {
|
|
||||||
width: 720px;
|
|
||||||
max-width: calc(100% - 2em);
|
|
||||||
margin: auto;
|
|
||||||
padding: 1em;
|
|
||||||
color: rgb(var(--gray-dark));
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
padding: 1em 0;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title h1 {
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
color: rgb(var(--gray));
|
|
||||||
}
|
|
||||||
|
|
||||||
.last-updated-on {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<Header/>
|
|
||||||
<main>
|
|
||||||
<article>
|
<article>
|
||||||
<div class="hero-image">
|
<div class="hero-image">
|
||||||
{heroImage &&
|
{
|
||||||
<Image width={1020} height={510} src={heroImage} alt=""/>}
|
heroImage && (
|
||||||
|
<Image src={heroImage} alt={title} class="hero-image__media" />
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="date">
|
<div class="date">
|
||||||
<FormattedDate date={pubDate}/>
|
<FormattedDate date={pubDate} />
|
||||||
{
|
{
|
||||||
updatedDate && (
|
updatedDate && (
|
||||||
<div class="last-updated-on">
|
<div class="last-updated-on">
|
||||||
Last updated on
|
Last updated on
|
||||||
<FormattedDate date={updatedDate}/>
|
<FormattedDate date={updatedDate} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<hr/>
|
<hr />
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
<div class="blog-nav-wrap">
|
||||||
|
<a class="blog-nav-link bottom" href="/blog"
|
||||||
|
>{t("blog.read_more")}</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<slot/>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<Footer/>
|
|
||||||
</body>
|
<section class="content container" id="contact-us">
|
||||||
|
<ContactForm />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,73 @@
|
||||||
---
|
---
|
||||||
import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
|
import AboutHeroImage from "../assets/blog-placeholder-about.jpg";
|
||||||
import Layout from '../layouts/BlogPost.astro';
|
import Layout from "../layouts/BlogPost.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="About Me"
|
title="About Me"
|
||||||
description="Lorem ipsum dolor sit amet"
|
description="Lorem ipsum dolor sit amet"
|
||||||
pubDate={new Date('August 08 2021')}
|
pubDate={new Date("August 08 2021")}
|
||||||
heroImage={AboutHeroImage}
|
heroImage={AboutHeroImage}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||||
labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
|
tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo
|
||||||
viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
|
integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis
|
||||||
adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
|
egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In
|
||||||
et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
|
hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat.
|
||||||
vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
|
Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu
|
||||||
sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim.
|
||||||
|
Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed
|
||||||
|
vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
|
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida
|
||||||
tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
|
rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus
|
||||||
blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
|
sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris
|
||||||
porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
|
rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus
|
||||||
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
|
dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
|
||||||
Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
|
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius
|
||||||
bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
|
morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras
|
||||||
massa massa ultricies mi.
|
ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est
|
||||||
|
ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa
|
||||||
|
ultricies mi.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
|
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque.
|
||||||
suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
|
Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac
|
||||||
nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
|
felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit
|
||||||
turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
|
amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed
|
||||||
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
|
elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
|
||||||
semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
|
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra.
|
||||||
vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
|
Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum
|
||||||
facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
|
consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus
|
||||||
vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
|
ultricies tristique. Rhoncus dolor purus non enim praesent elementum
|
||||||
urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
|
facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed
|
||||||
|
risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor
|
||||||
|
vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus
|
||||||
|
non. Amet dictum sit amet justo donec enim.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
|
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac
|
||||||
viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
|
ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem
|
||||||
scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
|
viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu
|
||||||
gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
|
ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac
|
||||||
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
|
tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
|
||||||
blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
|
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim
|
||||||
cursus metus aliquam eleifend mi.
|
sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.
|
||||||
|
Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
|
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus
|
||||||
nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
|
imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu
|
||||||
tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
|
cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum.
|
||||||
ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
|
Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit
|
||||||
proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
|
libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed
|
||||||
|
pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique
|
||||||
|
magna.
|
||||||
</p>
|
</p>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
import { type CollectionEntry, getCollection, render } from 'astro:content';
|
import { type CollectionEntry, getCollection, render } from "astro:content";
|
||||||
import BlogPost from '../../layouts/BlogPost.astro';
|
import BlogPost from "../../layouts/BlogPost.astro";
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = await getCollection('blog');
|
const posts = await getCollection("blog");
|
||||||
return posts.map((post) => ({
|
return posts.map((post) => ({
|
||||||
params: { slug: post.id },
|
params: { slug: post.id },
|
||||||
props: post,
|
props: post,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
type Props = CollectionEntry<'blog'>;
|
type Props = CollectionEntry<"blog">;
|
||||||
|
|
||||||
const post = Astro.props;
|
const post = Astro.props;
|
||||||
const { Content } = await render(post);
|
const { Content } = await render(post);
|
||||||
|
|
|
||||||
|
|
@ -1,114 +1,75 @@
|
||||||
---
|
---
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from "astro:assets";
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from "astro:content";
|
||||||
import BaseHead from '../../components/BaseHead.astro';
|
import BaseHead from "@/components/BaseHead.astro";
|
||||||
import Footer from '../../components/Footer/Footer.astro';
|
import Footer from "@/components/Footer/Footer.astro";
|
||||||
import FormattedDate from '../../components/FormattedDate.astro';
|
import FormattedDate from "@/components/FormattedDate.astro";
|
||||||
import Header from '../../components/Header.astro';
|
import Header from "@/components/Header/Header.astro";
|
||||||
import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
|
import { SITE_DESCRIPTION, SITE_TITLE } from "@/consts";
|
||||||
|
import { getLangFromUrl, useTranslations } from "@/i18n/utils";
|
||||||
|
|
||||||
const posts = (await getCollection('blog')).sort(
|
import "@/styles/index.css";
|
||||||
|
|
||||||
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
|
const posts = (await getCollection("blog")).sort(
|
||||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||||
);
|
);
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang={lang}>
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<BaseHead
|
||||||
<style>
|
title={`${SITE_TITLE} | ${t("menu.blog")}`}
|
||||||
main {
|
description={SITE_DESCRIPTION}
|
||||||
width: 960px;
|
/>
|
||||||
}
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
ul li {
|
|
||||||
width: calc(50% - 1rem);
|
|
||||||
}
|
|
||||||
ul li * {
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 0.2s ease;
|
|
||||||
}
|
|
||||||
ul li:first-child {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
ul li:first-child img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
ul li:first-child .title {
|
|
||||||
font-size: 2.369rem;
|
|
||||||
}
|
|
||||||
ul li img {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
ul li a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
color: rgb(var(--black));
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
margin: 0;
|
|
||||||
color: rgb(var(--gray));
|
|
||||||
}
|
|
||||||
ul li a:hover h4,
|
|
||||||
ul li a:hover .date {
|
|
||||||
color: rgb(var(--accent));
|
|
||||||
}
|
|
||||||
ul a:hover img {
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
}
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
ul {
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
ul li {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
ul li:first-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
ul li:first-child .title {
|
|
||||||
font-size: 1.563em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="main-page" id="top">
|
||||||
|
<div class="intro-bg">
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<section class="container blog-hero">
|
||||||
<section>
|
<h1>{t("menu.blog")}</h1>
|
||||||
<ul>
|
<p class="gray">
|
||||||
|
Stories, experiments, and practical notes from our team.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="content container" id="blog-list">
|
||||||
|
<div class="blog-grid">
|
||||||
{
|
{
|
||||||
posts.map((post) => (
|
posts.map((post) => (
|
||||||
<li>
|
<article class="blog-card">
|
||||||
<a href={`/blog/${post.id}/`}>
|
<a href={`/blog/${post.id}/`} class="blog-card__link">
|
||||||
{post.data.heroImage && (
|
{post.data.heroImage && (
|
||||||
<Image width={720} height={360} src={post.data.heroImage} alt="" />
|
<div class="blog-card__media">
|
||||||
|
<Image
|
||||||
|
src={post.data.heroImage}
|
||||||
|
alt={post.data.title}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<h4 class="title">{post.data.title}</h4>
|
<div class="blog-card__content">
|
||||||
<p class="date">
|
<h3>{post.data.title}</h3>
|
||||||
|
<p class="blog-card__date">
|
||||||
<FormattedDate date={post.data.pubDate} />
|
<FormattedDate date={post.data.pubDate} />
|
||||||
</p>
|
</p>
|
||||||
|
{post.data.description && (
|
||||||
|
<p class="blog-card__excerpt">{post.data.description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</article>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</ul>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from "astro:content";
|
||||||
import rss from '@astrojs/rss';
|
import rss from "@astrojs/rss";
|
||||||
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
|
||||||
|
|
||||||
export async function GET(context) {
|
export async function GET(context) {
|
||||||
const posts = await getCollection('blog');
|
const posts = await getCollection("blog");
|
||||||
return rss({
|
return rss({
|
||||||
title: SITE_TITLE,
|
title: SITE_TITLE,
|
||||||
description: SITE_DESCRIPTION,
|
description: SITE_DESCRIPTION,
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@
|
||||||
--gray-light: 229, 233, 240;
|
--gray-light: 229, 233, 240;
|
||||||
--gray-dark: 34, 41, 57;
|
--gray-dark: 34, 41, 57;
|
||||||
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||||||
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
--box-shadow:
|
||||||
|
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
||||||
0 16px 32px rgba(var(--gray), 33%);
|
0 16px 32px rgba(var(--gray), 33%);
|
||||||
|
|
||||||
/* TODO: Here we start our custom CSS Remove above later */
|
/* TODO: Here we start our custom CSS Remove above later */
|
||||||
|
|
@ -25,6 +26,9 @@
|
||||||
--color-accent-secondary: #b46f8e;
|
--color-accent-secondary: #b46f8e;
|
||||||
|
|
||||||
--gutter: 24px;
|
--gutter: 24px;
|
||||||
|
|
||||||
|
--floating-intro-image-x: 150px;
|
||||||
|
--floating-intro-image-start-x: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* typography.css */
|
/* typography.css */
|
||||||
|
|
@ -50,7 +54,7 @@ span {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 6.25rem; /* 100px ÷ 16 */
|
font-size: 5.55rem; /* 100px ÷ 16 */
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
@ -73,6 +77,11 @@ h5 {
|
||||||
font-size: 1.875rem; /* 30px ÷ 16 */
|
font-size: 1.875rem; /* 30px ÷ 16 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header5 {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.875rem; /* 30px ÷ 16 */
|
||||||
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 1.125rem; /* 18px ÷ 16 */
|
font-size: 1.125rem; /* 18px ÷ 16 */
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -90,7 +99,16 @@ p {
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
|
:root {
|
||||||
|
--floating-intro-image-x: 0px;
|
||||||
|
--floating-intro-image-start-x: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 2.5rem; /* 40px ÷ 16 */
|
font-size: 2.5rem; /* 40px ÷ 16 */
|
||||||
|
|
@ -115,7 +133,7 @@ p {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: Remove above code later */
|
/* TODO: Remove h1ve code later */
|
||||||
body {
|
body {
|
||||||
background-color: #111111;
|
background-color: #111111;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
/* intro */
|
/* intro */
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
min-height: max(680px, calc(100vh - 24px));
|
height: calc(100vh - 112px);
|
||||||
grid-template-rows: 1fr auto;
|
grid-template-rows: calc(100vh - 112px - 85px - 30px) min-content;
|
||||||
row-gap: clamp(20px, 3vw, 40px);
|
row-gap: unset;
|
||||||
padding-top: 112px;
|
padding-top: 112px;
|
||||||
|
|
||||||
.intro__title {
|
.title {
|
||||||
grid-column: 1/8;
|
grid-column: 1/8;
|
||||||
grid-row: 1/2;
|
grid-row: 1/2;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -14,88 +14,80 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(2.9rem, 8vw, 6.25rem);
|
line-height: 120%;
|
||||||
line-height: 1.2;
|
|
||||||
text-wrap: balance;
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__items {
|
div {
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
column-gap: clamp(16px, 2.8vw, 40px);
|
|
||||||
row-gap: 10px;
|
|
||||||
margin: 22px 0 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
li {
|
p {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--color-accent-secondary);
|
color: var(--color-accent-secondary);
|
||||||
letter-spacing: 0.03em;
|
|
||||||
|
&:first-child {
|
||||||
|
margin-right: 39px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-left: 34px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__image {
|
.image {
|
||||||
grid-column: 5/13;
|
grid-column: 5/13;
|
||||||
grid-row: 1/2;
|
grid-row: 1/2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
background-image: url("../assets/images/main/intro/astronaut.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: right;
|
||||||
|
transform: translateX(150px);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
|
||||||
img {
|
|
||||||
width: min(100%, 780px);
|
|
||||||
height: auto;
|
|
||||||
transform: translateX(clamp(0px, 7vw, 150px));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__rocket {
|
.rocket {
|
||||||
grid-column: 1/13;
|
grid-column: 1/13;
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
display: grid;
|
|
||||||
justify-items: center;
|
* {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
margin-top: 14px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1350px) {
|
@media (max-width: 1350px) {
|
||||||
.intro__image img {
|
.image {
|
||||||
transform: translateX(clamp(0px, 3vw, 50px));
|
transform: translateX(50px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
min-height: auto;
|
height: auto;
|
||||||
padding-top: 106px;
|
padding-top: 106px;
|
||||||
grid-template-rows: 340px auto;
|
grid-template-rows: 400px min-content;
|
||||||
row-gap: 20px;
|
|
||||||
|
|
||||||
.intro__title,
|
.title,
|
||||||
.intro__rocket,
|
.rocket,
|
||||||
.intro__image {
|
.image {
|
||||||
grid-column: 1/7;
|
grid-column: 1/7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__image {
|
.image {
|
||||||
grid-row: 1/2;
|
grid-row: 1/2;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
transform: none;
|
transform: none;
|
||||||
max-width: 450px;
|
justify-content: center;
|
||||||
}
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__title {
|
.title {
|
||||||
grid-row: 2/3;
|
grid-row: 2/3;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -106,19 +98,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__items {
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
|
||||||
li {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro__rocket {
|
.rocket {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -165,10 +154,6 @@ section.content {
|
||||||
left: unset;
|
left: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* card */
|
/* card */
|
||||||
|
|
@ -235,6 +220,16 @@ section.content {
|
||||||
.about-us {
|
.about-us {
|
||||||
margin-top: -80px;
|
margin-top: -80px;
|
||||||
|
|
||||||
|
.header5 {
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rocket-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
grid-column: 1/7;
|
grid-column: 1/7;
|
||||||
|
|
@ -273,7 +268,7 @@ section.content {
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
grid-column: 1/7;
|
grid-column: 1/7;
|
||||||
|
|
||||||
h5,
|
h2,
|
||||||
.text {
|
.text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -281,3 +276,319 @@ section.content {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* projects */
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
scroll-margin-block-start: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
grid-column: span 6;
|
||||||
|
background: linear-gradient(
|
||||||
|
145deg,
|
||||||
|
rgba(255, 255, 255, 0.08),
|
||||||
|
rgba(255, 255, 255, 0.03)
|
||||||
|
);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__media {
|
||||||
|
aspect-ratio: 16 / 10;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
transition: transform 0.35s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__content {
|
||||||
|
padding: 22px 22px 24px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__tags {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__media img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.project-card {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blog */
|
||||||
|
|
||||||
|
.blog-hero {
|
||||||
|
min-height: 360px;
|
||||||
|
align-content: center;
|
||||||
|
padding-top: 112px;
|
||||||
|
padding-bottom: 32px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
min-height: 300px;
|
||||||
|
padding-top: 106px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#blog-list {
|
||||||
|
margin-top: 88px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
margin-top: 56px;
|
||||||
|
padding-bottom: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
grid-column: span 6;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: linear-gradient(
|
||||||
|
160deg,
|
||||||
|
rgba(255, 255, 255, 0.08),
|
||||||
|
rgba(255, 255, 255, 0.02)
|
||||||
|
);
|
||||||
|
backdrop-filter: blur(7px);
|
||||||
|
|
||||||
|
.blog-card__link {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card__media {
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card__media img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
transition: transform 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card__content {
|
||||||
|
padding: 18px 20px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card__date {
|
||||||
|
color: var(--color-accent-secondary);
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card__excerpt {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .blog-card__media img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.blog-card {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blog post */
|
||||||
|
|
||||||
|
.blog-post-page main {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 2rem;
|
||||||
|
padding-top: 176px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.blog-post-page main {
|
||||||
|
width: auto;
|
||||||
|
margin: 0 1rem;
|
||||||
|
padding-top: 124px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .hero-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .hero-image__media {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1020px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .prose {
|
||||||
|
width: 720px;
|
||||||
|
max-width: calc(100% - 2em);
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
color: rgb(var(--gray-dark));
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .prose picture {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1020px;
|
||||||
|
margin: 1.25rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .prose img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1020px;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
margin: 1.25rem auto;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .title {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 1em 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .title h1 {
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .date {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
color: rgb(var(--gray));
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .last-updated-on {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .blog-nav-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition:
|
||||||
|
border-color 0.25s ease,
|
||||||
|
transform 0.25s ease,
|
||||||
|
background-color 0.25s ease;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .blog-nav-link:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.48);
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .blog-nav-link::before {
|
||||||
|
content: "\2190";
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .blog-nav-link.bottom {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-post-page .blog-nav-wrap {
|
||||||
|
width: 720px;
|
||||||
|
max-width: calc(100% - 2em);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
"services": "Services",
|
"services": "Services",
|
||||||
"about_us": "About Us",
|
"about_us": "About Us",
|
||||||
"portfolio": "Portfolio",
|
"portfolio": "Portfolio",
|
||||||
|
"blog": "Blog",
|
||||||
"pricing": "Pricing",
|
"pricing": "Pricing",
|
||||||
"contact_us": "Contact Us",
|
"contact_us": "Contact Us",
|
||||||
"home": "Home"
|
"home": "Home"
|
||||||
|
|
@ -46,10 +47,14 @@
|
||||||
"amount_experience": "6+",
|
"amount_experience": "6+",
|
||||||
"experience": "Years experience"
|
"experience": "Years experience"
|
||||||
},
|
},
|
||||||
|
"blog": {
|
||||||
|
"back": "Back",
|
||||||
|
"read_more": "Read more of our stories"
|
||||||
|
},
|
||||||
"projects": [
|
"projects": [
|
||||||
{
|
{
|
||||||
"title": "Inflid",
|
"title": "Inflid",
|
||||||
"image": "inflid_full_1.png",
|
"image": "inflid_full_1_1.png",
|
||||||
"info": ["Website", "Platform", "UI / UX"],
|
"info": ["Website", "Platform", "UI / UX"],
|
||||||
"text": "Smart matching platform for Streamers and Advertisers"
|
"text": "Smart matching platform for Streamers and Advertisers"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
"services": "Servisi",
|
"services": "Servisi",
|
||||||
"about_us": "Par mums",
|
"about_us": "Par mums",
|
||||||
"portfolio": "Portfolio",
|
"portfolio": "Portfolio",
|
||||||
|
"blog": "Blogs",
|
||||||
"pricing": "Cenas",
|
"pricing": "Cenas",
|
||||||
"contact_us": "Sazināties",
|
"contact_us": "Sazināties",
|
||||||
"home": "Mājas"
|
"home": "Mājas"
|
||||||
|
|
@ -46,6 +47,10 @@
|
||||||
"amount_experience": "6+",
|
"amount_experience": "6+",
|
||||||
"experience": "Gadu pieredze"
|
"experience": "Gadu pieredze"
|
||||||
},
|
},
|
||||||
|
"blog": {
|
||||||
|
"back": "Atpakaļ",
|
||||||
|
"read_more": "Lasīt vairāk mūsu stāstus"
|
||||||
|
},
|
||||||
"projects": [
|
"projects": [
|
||||||
{
|
{
|
||||||
"title": "Inflid",
|
"title": "Inflid",
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,16 @@
|
||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict",
|
"extends": "astro/tsconfigs/strict",
|
||||||
"include": [
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
".astro/types.d.ts",
|
"exclude": ["dist"],
|
||||||
"**/*"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"dist"
|
|
||||||
],
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"jsxImportSource": "react",
|
"jsxImportSource": "react",
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["src/*"],
|
"@/*": ["src/*"],
|
||||||
"@components/*": [
|
"@components/*": ["src/components/*"],
|
||||||
"src/components/*"
|
"@images/*": ["src/assets/images/*"],
|
||||||
],
|
"@consts": ["src/consts"]
|
||||||
"@images/*": [
|
|
||||||
"src/assets/images/*"
|
|
||||||
],
|
|
||||||
"@consts": [
|
|
||||||
"src/consts"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue