Migration to astro #1
46 changed files with 4786 additions and 2805 deletions
|
|
@ -7,7 +7,54 @@
|
|||
<option name="selectedModelId" value="auto" />
|
||||
</component>
|
||||
<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="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
|
|
@ -68,6 +115,7 @@
|
|||
"RunOnceActivity.typescript.service.memoryLimit.init": "true",
|
||||
"codeWithMe.voiceChat.enabledByDefault": "false",
|
||||
"copilot.chat.legacySessionMetadata.migrated": "true",
|
||||
"git-widget-placeholder": "astro-migration",
|
||||
"javascript.preferred.runtime.type.id": "node",
|
||||
"js.debugger.nextJs.config.created.client": "true",
|
||||
"js.debugger.nextJs.config.created.server": "true",
|
||||
|
|
@ -81,7 +129,7 @@
|
|||
"node.js.selected.package.jshint": "",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"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",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
|
|
@ -133,6 +181,8 @@
|
|||
<workItem from="1750329776913" duration="2946000" />
|
||||
<workItem from="1784537953715" duration="6202000" />
|
||||
<workItem from="1784899208755" duration="13951000" />
|
||||
<workItem from="1785220782898" duration="240000" />
|
||||
<workItem from="1785317634340" duration="2709000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="Add captcha verification to contact form and improve error handling">
|
||||
<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:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `pnpm install` | Installs dependencies |
|
||||
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
||||
| `pnpm build` | Build your production site to `./dist/` |
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
// @ts-check
|
||||
|
||||
import mdx from '@astrojs/mdx';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
import {defineConfig, fontProviders} from 'astro/config';
|
||||
import mdx from "@astrojs/mdx";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import { defineConfig, fontProviders } from "astro/config";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://example.com',
|
||||
site: "https://example.com",
|
||||
integrations: [mdx(), sitemap()],
|
||||
fonts: [
|
||||
{
|
||||
provider: fontProviders.local(),
|
||||
name: 'Atkinson',
|
||||
cssVariable: '--font-atkinson',
|
||||
fallbacks: ['sans-serif'],
|
||||
name: "Atkinson",
|
||||
cssVariable: "--font-atkinson",
|
||||
fallbacks: ["sans-serif"],
|
||||
options: {
|
||||
variants: [
|
||||
{
|
||||
src: ['./src/assets/fonts/atkinson-regular.woff'],
|
||||
src: ["./src/assets/fonts/atkinson-regular.woff"],
|
||||
weight: 400,
|
||||
style: 'normal',
|
||||
display: 'swap',
|
||||
style: "normal",
|
||||
display: "swap",
|
||||
},
|
||||
{
|
||||
src: ['./src/assets/fonts/atkinson-bold.woff'],
|
||||
src: ["./src/assets/fonts/atkinson-bold.woff"],
|
||||
weight: 700,
|
||||
style: 'normal',
|
||||
display: 'swap',
|
||||
style: "normal",
|
||||
display: "swap",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"format": "prettier --write .",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -16,8 +17,13 @@
|
|||
"@astrojs/rss": "^4.0.19",
|
||||
"@astrojs/sitemap": "^3.7.3",
|
||||
"astro": "^7.1.3",
|
||||
"motion": "^12.42.2",
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8",
|
||||
"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.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '@/styles/reset.css';
|
||||
import '@/styles/global.css';
|
||||
import type {ImageMetadata} from 'astro';
|
||||
import FallbackImage from '../assets/blog-placeholder-1.jpg';
|
||||
import {SITE_TITLE} from '../consts';
|
||||
import {Font} from 'astro:assets';
|
||||
import "@/styles/reset.css";
|
||||
import "@/styles/global.css";
|
||||
import type { ImageMetadata } from "astro";
|
||||
import FallbackImage from "../assets/blog-placeholder-1.jpg";
|
||||
import { SITE_TITLE } from "../consts";
|
||||
import { Font } from "astro:assets";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -16,38 +16,38 @@ interface Props {
|
|||
|
||||
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 -->
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
|
||||
<link rel="icon" href="/favicon.ico"/>
|
||||
<link rel="sitemap" href="/sitemap-index.xml"/>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
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 -->
|
||||
<link rel="canonical" href={canonicalURL}/>
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description}/>
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content={Astro.url}/>
|
||||
<meta property="og:title" content={title}/>
|
||||
<meta property="og:description" content={description}/>
|
||||
<meta property="og:image" content={new URL(image.src, Astro.url)}/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image.src, Astro.url)} />
|
||||
|
||||
<!-- 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 FormInput from '../FormInput/FormInput.astro';
|
||||
import Dog from '@images/main/contact-form/Mask.svg';
|
||||
import BluePlanet from '@images/main/contact-form/Planet Blue.svg';
|
||||
import YellowPlanet from '@images/main/contact-form/Planet Yellow.svg';
|
||||
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
|
||||
import './contact-form.style.css';
|
||||
import Image from "astro/components/Image.astro";
|
||||
import FormInput from "../FormInput/FormInput.astro";
|
||||
import Dog from "@images/main/contact-form/Mask.svg";
|
||||
import BluePlanet from "@images/main/contact-form/Planet Blue.svg";
|
||||
import YellowPlanet from "@images/main/contact-form/Planet Yellow.svg";
|
||||
import { getLangFromUrl, useTranslations } from "@/i18n/utils";
|
||||
import "./contact-form.style.css";
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
|
@ -15,9 +15,13 @@ const t = useTranslations(lang);
|
|||
<h2>{t("contacts.title")}</h2>
|
||||
|
||||
<div class="image">
|
||||
<Image src={Dog} alt="cute dog in space"/>
|
||||
<Image src={BluePlanet} alt="blue planet" class="planet blue"/>
|
||||
<Image src={YellowPlanet} alt="yellow planet" class="planet yellow"/>
|
||||
<Image src={Dog} alt="cute dog in space" />
|
||||
<Image src={BluePlanet} alt="blue planet" class="planet blue" />
|
||||
<Image
|
||||
src={YellowPlanet}
|
||||
alt="yellow planet"
|
||||
class="planet yellow orbit-element"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form class="container">
|
||||
|
|
@ -43,9 +47,15 @@ const t = useTranslations(lang);
|
|||
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"}
|
||||
</div>
|
||||
|
||||
|
|
@ -54,9 +64,40 @@ const t = useTranslations(lang);
|
|||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.querySelector('.contact-form form');
|
||||
form?.addEventListener('submit', (e) => {
|
||||
// const { animate, inView } = await import("motion");
|
||||
const form = document.querySelector(".contact-form form");
|
||||
form?.addEventListener("submit", (e) => {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -48,11 +48,8 @@ section.content .contact-form h2 {
|
|||
}
|
||||
|
||||
.contact-form .image img:first-child {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(27, 27, 27, 0.2),
|
||||
rgba(27, 27, 27, 0.2)
|
||||
),
|
||||
background:
|
||||
linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)),
|
||||
rgba(255, 255, 255, 0.01);
|
||||
box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
|
||||
backdrop-filter: blur(8px);
|
||||
|
|
@ -73,6 +70,99 @@ section.content .contact-form h2 {
|
|||
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 */
|
||||
@media (max-width: 1200px) {
|
||||
.contact-form form {
|
||||
|
|
@ -112,13 +202,16 @@ section.content .contact-form h2 {
|
|||
grid-row: 2/3;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.contact-form .image img {
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.contact-form form {
|
||||
grid-row: 3/4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
---
|
||||
import {Image} from 'astro:assets';
|
||||
import Phone from '@images/main/footer/phone.png';
|
||||
import Email from '@images/main/footer/email.png';
|
||||
import Telegram from '@images/main/footer/telegram.png';
|
||||
import Whatsapp from '@images/main/footer/whatsapp.png';
|
||||
import './contacts.style.css';
|
||||
import { Image } from "astro:assets";
|
||||
import Phone from "@images/main/footer/phone.png";
|
||||
import Email from "@images/main/footer/email.png";
|
||||
import Telegram from "@images/main/footer/telegram.png";
|
||||
import Whatsapp from "@images/main/footer/whatsapp.png";
|
||||
import "./contacts.style.css";
|
||||
---
|
||||
|
||||
<div class="container contacts">
|
||||
<div>
|
||||
<a href="tel:+37125704038">
|
||||
<Image src={Phone} alt="phone" width={64} height={64}/>
|
||||
<Image src={Phone} alt="phone" width={64} height={64} />
|
||||
</a>
|
||||
<a href="tel:+37125704038">+371 25704038</a>
|
||||
</div>
|
||||
<div>
|
||||
<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 href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
||||
</div>
|
||||
<div>
|
||||
<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 href="https://telegram.me/shiseri" target="_blank" rel="noreferrer">
|
||||
Telegram
|
||||
|
|
@ -30,7 +30,7 @@ import './contacts.style.css';
|
|||
</div>
|
||||
<div>
|
||||
<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 href="https://wa.me/37125704038" target="_blank" rel="noreferrer">
|
||||
WhatsApp
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
---
|
||||
import {Image} from 'astro:assets';
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
// src/components/Footer/Footer.astro
|
||||
import Contacts from '@components/Contacts/Contacts.astro';
|
||||
import TopLine from '@images/main/footer/top-line.png';
|
||||
import Logo from '@images/main/footer/logo.svg';
|
||||
import { getLangFromUrl, useTranslatedPath, useTranslations } from '@/i18n/utils';
|
||||
import './footer.style.css';
|
||||
import Contacts from "@components/Contacts/Contacts.astro";
|
||||
import TopLine from "@images/main/footer/top-line.png";
|
||||
import Logo from "@images/main/footer/logo.svg";
|
||||
import {
|
||||
getLangFromUrl,
|
||||
useTranslatedPath,
|
||||
useTranslations,
|
||||
} from "@/i18n/utils";
|
||||
import "./footer.style.css";
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
|
@ -15,7 +19,7 @@ const translatePath = useTranslatedPath(lang);
|
|||
|
||||
<footer>
|
||||
<Image class="line" src={TopLine} alt="" />
|
||||
<Contacts/>
|
||||
<Contacts />
|
||||
|
||||
<div class="container info">
|
||||
<div>
|
||||
|
|
@ -28,14 +32,21 @@ const translatePath = useTranslatedPath(lang);
|
|||
</div>
|
||||
<nav>
|
||||
<h6>{t("footer.navigation")}</h6>
|
||||
<a href={translatePath('/#top')} class="gray mobile">{t("menu.home")}</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('/#contact-us')} class="gray">{t("menu.contact_us")}</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("/#about-us")} class="gray">{t("menu.about_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>
|
||||
<div>
|
||||
<Image src={Logo} alt=""/>
|
||||
<Image src={Logo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
---
|
||||
import "./form-input.style.css";
|
||||
import type {HTMLAttributes} from "astro/types";
|
||||
import type { HTMLAttributes } from "astro/types";
|
||||
|
||||
interface Props extends HTMLAttributes<"input"> {
|
||||
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">
|
||||
<input id={id} placeholder={placeholder} {...otherProps}/>
|
||||
<input id={id} placeholder={placeholder} {...otherProps} />
|
||||
<label for={id} class="form-input-label">{label}</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ const { date } = Astro.props;
|
|||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
date.toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</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 Email from "@images/main/footer/email.png";
|
||||
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 t = useTranslations(lang);
|
||||
|
|
@ -16,28 +20,38 @@ const translatePath = useTranslatedPath(lang);
|
|||
<header>
|
||||
<div class="cont">
|
||||
<div class="logo">
|
||||
<Image src={Logo} alt="MID"/>
|
||||
<Image src={Logo} alt="MID" />
|
||||
</div>
|
||||
|
||||
<nav class="navigation">
|
||||
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
||||
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</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>
|
||||
</nav>
|
||||
|
||||
<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;
|
||||
return (
|
||||
<a href={translatePath("/", targetLang)} class={targetLang === lang ? "active" : ""}>
|
||||
<a
|
||||
href={translatePath("/", targetLang)}
|
||||
class={targetLang === lang ? "active" : ""}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
})
|
||||
}
|
||||
</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-right"></span>
|
||||
<span id="center-left"></span>
|
||||
|
|
@ -47,36 +61,42 @@ const translatePath = useTranslatedPath(lang);
|
|||
</button>
|
||||
|
||||
<div class="mobile-menu">
|
||||
<Image src={Logo2} alt="MID Creative Digital Agency"/>
|
||||
<Image src={Logo2} alt="MID Creative Digital Agency" />
|
||||
|
||||
<nav class="navigation">
|
||||
<a href={translatePath("/#top")}>{t("menu.home")}</a>
|
||||
<a href={translatePath("/#services")}>{t("menu.services")}</a>
|
||||
<a href={translatePath("/#about-us")}>{t("menu.about_us")}</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>
|
||||
</nav>
|
||||
|
||||
<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;
|
||||
return (
|
||||
<a href={translatePath("/", targetLang)} class={targetLang === lang ? "active" : ""}>
|
||||
<a
|
||||
href={translatePath("/", targetLang)}
|
||||
class={targetLang === lang ? "active" : ""}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
})
|
||||
}
|
||||
</nav>
|
||||
|
||||
<div class="header-contacts">
|
||||
<a href="tel:+37126620770">
|
||||
<Image src={Phone} alt="phone"/>
|
||||
<Image src={Phone} alt="phone" />
|
||||
</a>
|
||||
<a href="tel:+37126620770">+371 2662 0770</a>
|
||||
</div>
|
||||
<div class="header-contacts">
|
||||
<a href="mailto:info@midcreative.eu">
|
||||
<Image src={Email} alt="email"/>
|
||||
<Image src={Email} alt="email" />
|
||||
</a>
|
||||
<a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
|
||||
</div>
|
||||
|
|
@ -85,26 +105,26 @@ const translatePath = useTranslatedPath(lang);
|
|||
</header>
|
||||
|
||||
<script>
|
||||
const btn = document.querySelector('.mobile-menu-btn') as HTMLElement;
|
||||
const menu = document.querySelector('.mobile-menu') as HTMLElement;
|
||||
const btn = document.querySelector(".mobile-menu-btn") as HTMLElement;
|
||||
const menu = document.querySelector(".mobile-menu") as HTMLElement;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const isOpen = menu.classList.toggle('open');
|
||||
btn.classList.toggle('open');
|
||||
btn.setAttribute('aria-expanded', String(isOpen));
|
||||
btn.addEventListener("click", () => {
|
||||
const isOpen = menu.classList.toggle("open");
|
||||
btn.classList.toggle("open");
|
||||
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)) {
|
||||
menu.classList.remove('open');
|
||||
btn.classList.remove('open');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
menu.classList.remove("open");
|
||||
btn.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
menu.classList.remove('open');
|
||||
btn.classList.remove('open');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
window.addEventListener("resize", () => {
|
||||
menu.classList.remove("open");
|
||||
btn.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,8 @@ header {
|
|||
width: 5px;
|
||||
}
|
||||
|
||||
#top-left, #top-right {
|
||||
#top-left,
|
||||
#top-right {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -114,15 +115,20 @@ header {
|
|||
right: 18px;
|
||||
}
|
||||
|
||||
#center-left, #center-right {
|
||||
#center-left,
|
||||
#center-right {
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
#bottom-left, #bottom-right {
|
||||
#bottom-left,
|
||||
#bottom-right {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#top-right, #center-right, #bottom-right, #bottom-left {
|
||||
#top-right,
|
||||
#center-right,
|
||||
#bottom-right,
|
||||
#bottom-left {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -131,11 +137,13 @@ header {
|
|||
}
|
||||
|
||||
&.open {
|
||||
#top-right, #center-right {
|
||||
#top-right,
|
||||
#center-right {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#center-right, #center-left {
|
||||
#center-right,
|
||||
#center-left {
|
||||
right: 9px;
|
||||
left: unset;
|
||||
}
|
||||
|
|
@ -160,12 +168,14 @@ header {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 96px 0;
|
||||
background: radial-gradient(
|
||||
background:
|
||||
radial-gradient(
|
||||
59.78% 25.3% at 50% 50%,
|
||||
rgba(225, 104, 154, 0.15) 0%,
|
||||
rgba(141, 162, 243, 0.063) 49.1%,
|
||||
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);
|
||||
backdrop-filter: blur(15px);
|
||||
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 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 isActive = href === pathname || href === '/' + (subpath?.[0] || '');
|
||||
const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import { Image } from "astro:assets";
|
|||
import type { ImageMetadata } from "astro";
|
||||
import Circle from "@images/main/services/circle.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 { useTranslations } from "@/i18n/utils";
|
||||
import type { SupportedLang } from "@/i18n/ui";
|
||||
|
|
@ -23,45 +22,64 @@ const { lang } = Astro.props;
|
|||
const t = useTranslations(lang);
|
||||
|
||||
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 }>(
|
||||
"../assets/images/main/services/*.svg",
|
||||
{ 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 path = `../assets/images/main/services/${imageName}`;
|
||||
return images[path]?.default;
|
||||
};
|
||||
|
||||
const getProjectImage = (imageName: string) => {
|
||||
const path = `../assets/images/main/projects/${imageName}`;
|
||||
return projectImages[path]?.default;
|
||||
};
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-page" id="top">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-page" id="top">
|
||||
<div class="intro-bg">
|
||||
<Header />
|
||||
<section class="container intro" id="home">
|
||||
<div class="intro__title">
|
||||
<div class="image" id="heroImg"></div>
|
||||
<div class="title">
|
||||
<h1>
|
||||
{t("intro.creating")} <span>{t("intro.websites")}</span>
|
||||
{t("intro.creating")}{` `}
|
||||
<span>{t("intro.websites")}</span>
|
||||
</h1>
|
||||
<ul class="intro__items" aria-label="Intro services">
|
||||
<li>{t("intro.apps")}</li>
|
||||
<li>{t("intro.shops")}</li>
|
||||
<li>{t("intro.platforms")}</li>
|
||||
</ul>
|
||||
<div>
|
||||
<p>{t("intro.apps")}</p>
|
||||
<p>{t("intro.shops")}</p>
|
||||
<p>{t("intro.platforms")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro__image">
|
||||
<Image src={IntroAstronaut} alt="" loading="eager" />
|
||||
</div>
|
||||
|
||||
<div class="intro__rocket">
|
||||
<div class="rocket">
|
||||
<Image src={IntroSpaceship} alt="" />
|
||||
<p>{t("intro.explore")}</p>
|
||||
</div>
|
||||
|
|
@ -72,7 +90,8 @@ const getImage = (imageName: string) => {
|
|||
<h2>{t("services.title")}</h2>
|
||||
<div class="container services">
|
||||
<Image src={Circle} alt="circle" class="circle" />
|
||||
{cards.map((card) => {
|
||||
{
|
||||
cards.map((card) => {
|
||||
const imgSrc = getImage(card.image);
|
||||
return (
|
||||
imgSrc && (
|
||||
|
|
@ -83,17 +102,18 @@ const getImage = (imageName: string) => {
|
|||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content container" id="about-us">
|
||||
<div class="about-us container">
|
||||
<div>
|
||||
<Image src={Rocket} alt="rocket" />
|
||||
<Image class="rocket-img" src={Rocket} alt="rocket" />
|
||||
</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>
|
||||
<div class="stats">
|
||||
<div>
|
||||
|
|
@ -113,11 +133,148 @@ const getImage = (imageName: string) => {
|
|||
</div>
|
||||
</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">
|
||||
<ContactForm />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Place any global data in this file.
|
||||
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||
|
||||
export const SITE_TITLE = 'Astro Blog';
|
||||
export const SITE_DESCRIPTION = 'Welcome to my website!';
|
||||
export const SITE_TITLE = "Astro Blog";
|
||||
export const SITE_DESCRIPTION = "Welcome to my website!";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { defineCollection } from 'astro:content';
|
||||
import { glob } from 'astro/loaders';
|
||||
import { z } from 'astro/zod';
|
||||
import { defineCollection } from "astro:content";
|
||||
import { glob } from "astro/loaders";
|
||||
import { z } from "astro/zod";
|
||||
|
||||
const blog = defineCollection({
|
||||
// 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
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 'First post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
heroImage: '../../assets/blog-placeholder-3.jpg'
|
||||
title: "First post"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 08 2022"
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 'Markdown Style Guide'
|
||||
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
|
||||
pubDate: 'Jun 19 2024'
|
||||
heroImage: '../../assets/blog-placeholder-1.jpg'
|
||||
title: "Markdown Style Guide"
|
||||
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
|
||||
pubDate: "Jun 19 2024"
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 'Second post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 15 2022'
|
||||
heroImage: '../../assets/blog-placeholder-4.jpg'
|
||||
title: "Second post"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 15 2022"
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 'Third post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 22 2022'
|
||||
heroImage: '../../assets/blog-placeholder-2.jpg'
|
||||
title: "Third post"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 22 2022"
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 'Using MDX'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jun 01 2024'
|
||||
heroImage: '../../assets/blog-placeholder-5.jpg'
|
||||
title: "Using MDX"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jun 01 2024"
|
||||
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.
|
||||
|
|
@ -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.
|
||||
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!')">
|
||||
Embedded component in MDX
|
||||
|
|
|
|||
|
|
@ -1,95 +1,67 @@
|
|||
---
|
||||
import {Image} from 'astro:assets';
|
||||
import type {CollectionEntry} from 'astro:content';
|
||||
import BaseHead from '@/components/BaseHead.astro';
|
||||
import Footer from '@/components/Footer/Footer.astro';
|
||||
import FormattedDate from '@/components/FormattedDate.astro';
|
||||
import Header from '@/components/Header.astro';
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import BaseHead from "@/components/BaseHead.astro";
|
||||
import Footer from "@/components/Footer/Footer.astro";
|
||||
import FormattedDate from "@/components/FormattedDate.astro";
|
||||
import Header from "@/components/Header/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">
|
||||
<head>
|
||||
<BaseHead title={title} description={description}/>
|
||||
<style>
|
||||
main {
|
||||
width: calc(100% - 2em);
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
</head>
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
<body class="blog-post-page">
|
||||
<Header />
|
||||
<main>
|
||||
<article>
|
||||
<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 class="prose">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate}/>
|
||||
<FormattedDate date={pubDate} />
|
||||
{
|
||||
updatedDate && (
|
||||
<div class="last-updated-on">
|
||||
Last updated on
|
||||
<FormattedDate date={updatedDate}/>
|
||||
<FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<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>
|
||||
<slot/>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<Footer/>
|
||||
</body>
|
||||
</main>
|
||||
|
||||
<section class="content container" id="contact-us">
|
||||
<ContactForm />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,73 @@
|
|||
---
|
||||
import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
|
||||
import Layout from '../layouts/BlogPost.astro';
|
||||
import AboutHeroImage from "../assets/blog-placeholder-about.jpg";
|
||||
import Layout from "../layouts/BlogPost.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="About Me"
|
||||
description="Lorem ipsum dolor sit amet"
|
||||
pubDate={new Date('August 08 2021')}
|
||||
pubDate={new Date("August 08 2021")}
|
||||
heroImage={AboutHeroImage}
|
||||
>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
|
||||
tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
|
||||
blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
|
||||
porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
|
||||
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
|
||||
Bibendum neque egestas congue quisque egestas diam. Cras 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.
|
||||
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida
|
||||
rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus
|
||||
sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris
|
||||
rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus
|
||||
dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
|
||||
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius
|
||||
morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras
|
||||
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>
|
||||
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
|
||||
suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
|
||||
nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
|
||||
turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
|
||||
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
|
||||
semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
|
||||
vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
|
||||
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.
|
||||
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque.
|
||||
Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac
|
||||
felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit
|
||||
amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed
|
||||
elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
|
||||
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra.
|
||||
Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum
|
||||
consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus
|
||||
ultricies tristique. Rhoncus dolor purus non enim praesent elementum
|
||||
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>
|
||||
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
|
||||
viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
|
||||
scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
|
||||
gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
|
||||
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
|
||||
blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
|
||||
cursus metus aliquam eleifend mi.
|
||||
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac
|
||||
ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem
|
||||
viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu
|
||||
ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac
|
||||
tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
|
||||
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim
|
||||
sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.
|
||||
Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
|
||||
nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
|
||||
tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
|
||||
ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
|
||||
proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
|
||||
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus
|
||||
imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu
|
||||
cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum.
|
||||
Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit
|
||||
libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed
|
||||
pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique
|
||||
magna.
|
||||
</p>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection, render } from 'astro:content';
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
import { type CollectionEntry, getCollection, render } from "astro:content";
|
||||
import BlogPost from "../../layouts/BlogPost.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
const posts = await getCollection("blog");
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.id },
|
||||
props: post,
|
||||
}));
|
||||
}
|
||||
type Props = CollectionEntry<'blog'>;
|
||||
type Props = CollectionEntry<"blog">;
|
||||
|
||||
const post = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
|
|
|
|||
|
|
@ -1,114 +1,75 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import { getCollection } from 'astro:content';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Footer from '../../components/Footer/Footer.astro';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
|
||||
import { Image } from "astro:assets";
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseHead from "@/components/BaseHead.astro";
|
||||
import Footer from "@/components/Footer/Footer.astro";
|
||||
import FormattedDate from "@/components/FormattedDate.astro";
|
||||
import Header from "@/components/Header/Header.astro";
|
||||
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(),
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
main {
|
||||
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>
|
||||
<BaseHead
|
||||
title={`${SITE_TITLE} | ${t("menu.blog")}`}
|
||||
description={SITE_DESCRIPTION}
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-page" id="top">
|
||||
<div class="intro-bg">
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<ul>
|
||||
<section class="container blog-hero">
|
||||
<h1>{t("menu.blog")}</h1>
|
||||
<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) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.id}/`}>
|
||||
<article class="blog-card">
|
||||
<a href={`/blog/${post.id}/`} class="blog-card__link">
|
||||
{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>
|
||||
<p class="date">
|
||||
<div class="blog-card__content">
|
||||
<h3>{post.data.title}</h3>
|
||||
<p class="blog-card__date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
{post.data.description && (
|
||||
<p class="blog-card__excerpt">{post.data.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { getCollection } from 'astro:content';
|
||||
import rss from '@astrojs/rss';
|
||||
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||
import { getCollection } from "astro:content";
|
||||
import rss from "@astrojs/rss";
|
||||
import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
|
||||
|
||||
export async function GET(context) {
|
||||
const posts = await getCollection('blog');
|
||||
const posts = await getCollection("blog");
|
||||
return rss({
|
||||
title: SITE_TITLE,
|
||||
description: SITE_DESCRIPTION,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
--gray-light: 229, 233, 240;
|
||||
--gray-dark: 34, 41, 57;
|
||||
--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%);
|
||||
|
||||
/* TODO: Here we start our custom CSS Remove above later */
|
||||
|
|
@ -25,6 +26,9 @@
|
|||
--color-accent-secondary: #b46f8e;
|
||||
|
||||
--gutter: 24px;
|
||||
|
||||
--floating-intro-image-x: 150px;
|
||||
--floating-intro-image-start-x: 300px;
|
||||
}
|
||||
|
||||
/* typography.css */
|
||||
|
|
@ -50,7 +54,7 @@ span {
|
|||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 6.25rem; /* 100px ÷ 16 */
|
||||
font-size: 5.55rem; /* 100px ÷ 16 */
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -73,6 +77,11 @@ h5 {
|
|||
font-size: 1.875rem; /* 30px ÷ 16 */
|
||||
}
|
||||
|
||||
.header5 {
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem; /* 30px ÷ 16 */
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.125rem; /* 18px ÷ 16 */
|
||||
text-transform: uppercase;
|
||||
|
|
@ -90,7 +99,16 @@ p {
|
|||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
section {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:root {
|
||||
--floating-intro-image-x: 0px;
|
||||
--floating-intro-image-start-x: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 2.5rem; /* 40px ÷ 16 */
|
||||
|
|
@ -115,7 +133,7 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
/* TODO: Remove above code later */
|
||||
/* TODO: Remove h1ve code later */
|
||||
body {
|
||||
background-color: #111111;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/* intro */
|
||||
|
||||
.intro {
|
||||
min-height: max(680px, calc(100vh - 24px));
|
||||
grid-template-rows: 1fr auto;
|
||||
row-gap: clamp(20px, 3vw, 40px);
|
||||
height: calc(100vh - 112px);
|
||||
grid-template-rows: calc(100vh - 112px - 85px - 30px) min-content;
|
||||
row-gap: unset;
|
||||
padding-top: 112px;
|
||||
|
||||
.intro__title {
|
||||
.title {
|
||||
grid-column: 1/8;
|
||||
grid-row: 1/2;
|
||||
display: flex;
|
||||
|
|
@ -14,88 +14,80 @@
|
|||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.9rem, 8vw, 6.25rem);
|
||||
line-height: 1.2;
|
||||
text-wrap: balance;
|
||||
|
||||
span {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.intro__items {
|
||||
list-style: none;
|
||||
div {
|
||||
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;
|
||||
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-row: 1/2;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
img {
|
||||
width: min(100%, 780px);
|
||||
height: auto;
|
||||
transform: translateX(clamp(0px, 7vw, 150px));
|
||||
}
|
||||
}
|
||||
|
||||
.intro__rocket {
|
||||
.rocket {
|
||||
grid-column: 1/13;
|
||||
grid-row: 2/3;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
|
||||
* {
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 14px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1350px) {
|
||||
.intro__image img {
|
||||
transform: translateX(clamp(0px, 3vw, 50px));
|
||||
.image {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
padding-top: 106px;
|
||||
grid-template-rows: 340px auto;
|
||||
row-gap: 20px;
|
||||
grid-template-rows: 400px min-content;
|
||||
|
||||
.intro__title,
|
||||
.intro__rocket,
|
||||
.intro__image {
|
||||
.title,
|
||||
.rocket,
|
||||
.image {
|
||||
grid-column: 1/7;
|
||||
}
|
||||
|
||||
.intro__image {
|
||||
.image {
|
||||
grid-row: 1/2;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
transform: none;
|
||||
max-width: 450px;
|
||||
}
|
||||
justify-content: center;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.intro__title {
|
||||
.title {
|
||||
grid-row: 2/3;
|
||||
|
||||
h1 {
|
||||
|
|
@ -106,19 +98,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.intro__items {
|
||||
div {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
|
||||
li {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro__rocket {
|
||||
.rocket {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -165,10 +154,6 @@ section.content {
|
|||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
/* card */
|
||||
|
|
@ -235,6 +220,16 @@ section.content {
|
|||
.about-us {
|
||||
margin-top: -80px;
|
||||
|
||||
.header5 {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rocket-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
grid-column: 1/7;
|
||||
|
|
@ -273,7 +268,7 @@ section.content {
|
|||
@media (max-width: 767px) {
|
||||
grid-column: 1/7;
|
||||
|
||||
h5,
|
||||
h2,
|
||||
.text {
|
||||
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",
|
||||
"about_us": "About Us",
|
||||
"portfolio": "Portfolio",
|
||||
"blog": "Blog",
|
||||
"pricing": "Pricing",
|
||||
"contact_us": "Contact Us",
|
||||
"home": "Home"
|
||||
|
|
@ -46,10 +47,14 @@
|
|||
"amount_experience": "6+",
|
||||
"experience": "Years experience"
|
||||
},
|
||||
"blog": {
|
||||
"back": "Back",
|
||||
"read_more": "Read more of our stories"
|
||||
},
|
||||
"projects": [
|
||||
{
|
||||
"title": "Inflid",
|
||||
"image": "inflid_full_1.png",
|
||||
"image": "inflid_full_1_1.png",
|
||||
"info": ["Website", "Platform", "UI / UX"],
|
||||
"text": "Smart matching platform for Streamers and Advertisers"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"services": "Servisi",
|
||||
"about_us": "Par mums",
|
||||
"portfolio": "Portfolio",
|
||||
"blog": "Blogs",
|
||||
"pricing": "Cenas",
|
||||
"contact_us": "Sazināties",
|
||||
"home": "Mājas"
|
||||
|
|
@ -46,6 +47,10 @@
|
|||
"amount_experience": "6+",
|
||||
"experience": "Gadu pieredze"
|
||||
},
|
||||
"blog": {
|
||||
"back": "Atpakaļ",
|
||||
"read_more": "Lasīt vairāk mūsu stāstus"
|
||||
},
|
||||
"projects": [
|
||||
{
|
||||
"title": "Inflid",
|
||||
|
|
|
|||
|
|
@ -1,28 +1,16 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"],
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
"@components/*": [
|
||||
"src/components/*"
|
||||
],
|
||||
"@images/*": [
|
||||
"src/assets/images/*"
|
||||
],
|
||||
"@consts": [
|
||||
"src/consts"
|
||||
]
|
||||
"@components/*": ["src/components/*"],
|
||||
"@images/*": ["src/assets/images/*"],
|
||||
"@consts": ["src/consts"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue