Skip to content

task: Finalize static content #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
opax7 merged 1 commit into from
Aug 18, 2025
Merged

task: Finalize static content #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/images/hero-about.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/hero-about2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}
.dark #header.scroll > div:first-child,
#header.scroll.dark > div:first-child {
@apply bg-page md:bg-[#030621e6] border-b border-gray-500/20;
@apply bg-page md:bg-[#000] border-b border-gray-500/20;
box-shadow: none;
}
/* #header.scroll > div:last-child {
Expand Down
6 changes: 4 additions & 2 deletions src/components/CustomStyles.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ import '@fontsource-variable/inter';
--aw-color-text-muted: rgb(16 16 16 / 66%);
--aw-color-bg-page: rgb(255 255 255);

--aw-color-bg-page-dark: rgb(3 6 32);
/* --aw-color-bg-page-dark: rgb(3 6 32); */
--aw-color-bg-page-dark: black;

::selection {
background-color: lavender;
Expand All @@ -53,7 +54,8 @@ import '@fontsource-variable/inter';
--aw-color-text-heading: rgb(247, 248, 248);
--aw-color-text-default: rgb(229 236 246);
--aw-color-text-muted: rgb(229 236 246 / 66%);
--aw-color-bg-page: rgb(3 6 32);
/* --aw-color-bg-page: rgb(3 6 32); */
--aw-color-bg-page: black;

::selection {
background-color: black;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/[...blog]/[...page].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const metadata = {
<Layout metadata={metadata}>
<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
<Headline
subtitle="Do not be deceived Autobots... Complexity is our enemy, and wasteful processes are his minions. Together we can erradicate them from Earth; and beyond"
subtitle="Do not be deceived Autobots... Complexity is our enemy, and wasteful processes are his minions. Together we can erradicate them from Earth; and beyond. <br><br> I am DevOptimus Prime. Join me in my mission to defend the galaxy from the dark forces that seek to slow release cycles, decrease security, and increase failure rates and recovery times. It's time to take up arms and join the cause."
>
Prime's Mission Log
</Headline>
Expand Down
246 changes: 45 additions & 201 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,228 +1,72 @@
---
import Features2 from '~/components/widgets/Features2.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Hero from '~/components/widgets/Hero.astro';
import Stats from '~/components/widgets/Stats.astro';
import Steps2 from '~/components/widgets/Steps2.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import Layout from '~/layouts/PageLayout.astro';
import Content from '~/components/widgets/Content.astro';

const metadata = {
title: 'About us',
title: 'About',
};
---

<Layout metadata={metadata}>
<!-- Hero Widget ******************* -->
<!-- Content Widget **************** -->

<Hero
tagline="About Us"
image={{
src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
alt: 'Caos Image',
}}
>
<Fragment slot="title">
Elevate your online presence with our <br />
<span class="text-accent dark:text-white"> Beautiful Website Templates</span>
</Fragment>

<Fragment slot="subtitle">
Donec efficitur, ipsum quis congue luctus, mauris magna convallis mauris, eu auctor nisi lectus non augue. Donec
quis lorem non massa vulputate efficitur ac at turpis. Sed tincidunt ex a nunc convallis, et lobortis nisi tempus.
Suspendisse vitae nisi eget tortor luctus maximus sed non lectus.
</Fragment>
</Hero>

<!-- Stats Widget ****************** -->

<Stats
title="Statistics about us"
stats={[
{ title: 'Offices', amount: '4' },
{ title: 'Employees', amount: '248' },
{ title: 'Templates', amount: '12' },
{ title: 'Awards', amount: '24' },
]}
/>

<!-- Features3 Widget ************** -->

<Features3
title="Our templates"
subtitle="Etiam scelerisque, enim eget vestibulum luctus, nibh mauris blandit nulla, nec vestibulum risus justo ut enim. Praesent lacinia diam et ante imperdiet euismod."
columns={3}
isBeforeContent={true}
items={[
{
title: 'Educational',
description:
'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
icon: 'tabler:template',
},
{
title: 'Interior Design',
description:
'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
icon: 'tabler:template',
},
{
title: 'Photography',
description:
'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
icon: 'tabler:template',
},
]}
/>

<!-- Features3 Widget ************** -->

<Features3
columns={3}
isAfterContent={true}
<Content
title="About DevOptimus.com"
items={[
{
title: 'E-commerce',
description:
'Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet, dignissim id quam. Sed ac tincidunt sapien.',
icon: 'tabler:template',
},
{
title: 'Blog',
description:
'Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet ac vitae libero.',
icon: 'tabler:template',
},
{
title: 'Business',
description:
'Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus, mauris magna.',
icon: 'tabler:template',
title: 'DevOps:',
description: `DevOps is a term whose meaning has been transforming since its inception. As a technologist and activist for optimizing people, process, and tools; my multi-decade career has formed an ideology that has distilled into what I believe to be the true meaning of the DevOps movement. I've coined the term True DevOps to describe the representation of an organization of individuals in such a way that aligns their incentives to achieve a common goal. Typically this is to release software product value, but it can really be applied to any facet of life.`,
},
{
title: 'Branding',
description:
'Suspendisse vitae nisi eget tortor luctus maximus sed non lectus. Cras malesuada pretium placerat. Nullam venenatis dolor a ante rhoncus.',
icon: 'tabler:template',
title: 'Advantage:',
description: `The true value of this ideology is that it capitalizes on the strengths of the individuals whilst nurturing their weaknesses through those same strengths by communal edification. In other words, each individual is encouraged to use their strengths to build up and strengthen the weaknesses of others. At the same time accepting the same from others in their community to build up and stregthen their own weaknesses. It is a no-strings-attached, give and take of talent and insight, all for the good of the common goal.`,
},
{
title: 'Medical',
description:
'Vestibulum malesuada lacus id nibh posuere feugiat. Nam volutpat nulla a felis ultrices, id suscipit mauris congue. In hac habitasse platea dictumst.',
icon: 'tabler:template',
title: 'Purpose:',
description: `In concept and theory, this idealogy sounds legitimately superior and a no-brainer to seek out. However, in practice it is rarely simple to implement. As such, the aritcles here are a combination of my own experiences with establishing the typical automation and infrastructure/development experience optimization feats desired in the realm of DevOps, as well as my observations, analysis, and insight on the abundance and/or the lack of evidence of True DevOps in the world around me.`,
},
{
title: 'Fashion Design',
description:
'Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus.',
icon: 'tabler:template',
title: 'Hope:',
description: `It is my hope to highlight areas where we can improve; praise evidences of True DevOps as they shine through; and evoke the curious technologist to explore this ideology with a mind and heart of wonder and a lean toward action, so that we can defend the galaxy from the dark forces that loom in the shadows.`,
},
]}
image={{
src: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
alt: 'Colorful Image',
src: '~/assets/images/hero-about2.png',
alt: 'About Hero Image',
height: 1000,
}}
/>

<!-- Steps2 Widget ****************** -->
>
<Fragment slot="content">
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
True DevOps: <br /><span class="text-2xl">Aligned Incentives For a Common Goal</span>
</h3>
</Fragment>

<Steps2
title="Our values"
subtitle="Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus. Nulla facilisi. Vestibulum malesuada lacus."
items={[
{
title: 'Customer-centric approach',
description:
'Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo. Ut eleifend luctus condimentum.',
},
{
title: 'Constant Improvement',
description:
'Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis. Fusce eget mauris leo.',
},
{
title: 'Ethical Practices',
description:
'Vestibulum imperdiet libero et lectus molestie, et maximus augue porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
},
]}
/>
<Fragment slot="bg">
<div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
</Fragment>
</Content>

<!-- Steps2 Widget ****************** -->
<!-- Hero2 Widget ******************* -->

<Steps2
title="Achievements"
subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla."
isReversed={true}
callToAction={{
text: 'See more',
href: '/',
<Hero2
tagline="Fiction meets Reality"
image={{
src: '~/assets/images/hero-about.png',
alt: 'Cybertronian Landscape',
}}
items={[
{
title: 'Global reach',
description: 'Nam malesuada urna in enim imperdiet tincidunt. Phasellus non tincidunt nisi, at elementum mi.',
icon: 'tabler:globe',
},
{
title: 'Positive customer feedback and reviews',
description:
'Cras semper nulla leo, eget laoreet erat cursus sed. Praesent faucibus massa in purus iaculis dictum.',
icon: 'tabler:message-star',
},
{
title: 'Awards and recognition as industry experts',
description:
'Phasellus lacinia cursus velit, eu malesuada magna pretium eu. Etiam aliquet tellus purus, blandit lobortis ex rhoncus vitae.',
icon: 'tabler:award',
},
]}
/>

<!-- Features2 Widget ************** -->

<Features2
title="Our locations"
tagline="Find us"
columns={4}
items={[
{
title: 'EE.UU',
description: '1234 Lorem Ipsum St, 12345, Miami',
},
{
title: 'Spain',
description: '5678 Lorem Ipsum St, 56789, Madrid',
},
{
title: 'Australia',
description: '9012 Lorem Ipsum St, 90123, Sydney',
},
{
title: 'Brazil',
description: '3456 Lorem Ipsum St, 34567, São Paulo',
},
]}
/>

<!-- Features2 Widget ************** -->
>
<Fragment slot="title">
Inspiration from the <span class="text-blue-600 dark:text-blue-400">Transformers</span> Universe
</Fragment>

<Features2
title="Technical Support"
tagline="Contact us"
columns={2}
items={[
{
title: 'Chat with us',
description:
'Integer luctus laoreet libero, auctor varius purus rutrum sit amet. Ut nec molestie nisi, quis eleifend mi.',
icon: 'tabler:messages',
},
{
title: 'Call us',
description:
'Mauris faucibus finibus orci, in posuere elit viverra non. In hac habitasse platea dictumst. Cras lobortis metus a hendrerit congue.',
icon: 'tabler:headset',
},
]}
/>
<Fragment slot="subtitle">
Growing up in the heyday of the Transformers franchise, it's an easy parallel for me to draw between the Autobots'
mission to protect and serve the universe, and my own mission to protect and serve through the optimization of
technology.<br /><br />
Optimus Prime and his relentless pursuit to bring alignment to two vastly different worlds for a common goal, is the
perfect analogy for my own pursuit in the world of DevOps.
</Fragment>
</Hero2>
</Layout>
6 changes: 3 additions & 3 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ const metadata = {
<Layout metadata={metadata}>
<Starfield />
<Hero2L
tagline="DevOps Transformation </br> IS </br> More Than Meets the Eye"
title="DevOptimus.com"
subtitle="I am DevOptimus Prime. Join me in my mission to defend Earth from the dark forces that seek to slow release cycles, decrease security and increase failure rates and recovery times. It's time to take up arms and join the fight. </br> Autobots... Transform, and "
tagline='DevOps <br> Transformation <br><br> <span class="text-blue-400">More Than Meets the Eye</span> <br>'
title='<span class="text-red-900">DevOptimus.com</span>'
subtitle='<span class="text-blue-900">Autobots... Transform, and </span>'
actions={[{ variant: 'primary', text: 'ROLL Out!', href: '/blog', icon: 'tabler:truck-delivery' }]}
/>
</Layout>
Loading