Skip to content

Commit

Permalink
fix projects page images
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexandzors
alexandzors committed Nov 22, 2024
1 parent 805bd6e commit dcb3aea
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 117 deletions.
55 changes: 55 additions & 0 deletions src/assets/scss/base/_color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,61 @@ $colors: (
800: hsl(212 9% 22%),
900: hsl(210 10% 14%),
),
highlight-blue: (
100: hsl(217, 72%, 90%),
200: hsl(217, 63%, 75%),
300: hsl(217, 46%, 58%),
400: hsl(218, 33%, 43%),
500: hsl(217, 33%, 35%),
600: hsl(218, 28%, 30%),
700: hsl(218, 24%, 25%),
800: hsl(218, 20%, 20%),
900: hsl(218, 16%, 15%),
),
highlight-purple: (
100: hsl(292, 60%, 90%),
200: hsl(292, 45%, 70%),
300: hsl(292, 33%, 47%),
400: hsl(291, 34%, 32%),
500: hsl(291, 34%, 24%),
600: hsl(290, 29%, 20%),
700: hsl(291, 24%, 16%),
800: hsl(291, 20%, 12%),
900: hsl(291, 15%, 9%),
),
highlight-green: (
100: hsl(136, 65%, 90%),
200: hsl(136, 55%, 70%),
300: hsl(136, 48%, 46%),
400: hsl(136, 48%, 33%),
500: hsl(135, 48%, 26%),
600: hsl(134, 42%, 22%),
700: hsl(135, 36%, 18%),
800: hsl(135, 30%, 14%),
900: hsl(135, 25%, 10%),
),
highlight-yellow: (
100: hsl(45, 96%, 90%),
200: hsl(45, 96%, 75%),
300: hsl(45, 96%, 55%),
400: hsl(45, 78%, 44%),
500: hsl(45, 78%, 38%),
600: hsl(45, 68%, 32%),
700: hsl(45, 58%, 26%),
800: hsl(45, 48%, 20%),
900: hsl(45, 38%, 15%),
),
highlight-red: (
100: hsl(5, 90%, 90%),
200: hsl(5, 86%, 70%),
300: hsl(5, 82%, 57%),
400: hsl(5, 61%, 45%),
500: hsl(4, 61%, 38%),
600: hsl(4, 55%, 32%),
700: hsl(4, 48%, 26%),
800: hsl(4, 42%, 20%),
900: hsl(4, 36%, 15%),
),
dark: (
100: hsl(240, 4%, 9%),
),
Expand Down
57 changes: 42 additions & 15 deletions src/components/Feature.astro
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,57 @@
---
import { Icon } from 'astro-icon/components'
import { Icon } from 'astro-icon/components';
const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
const FeatureColors = {
blue: {
main: '#6388c5',
dark: '#374762',
},
purple: {
main: '#95509f',
dark: '#3d2442',
},
green: {
main: '#3dae5b',
dark: '#21502c',
},
yellow: {
main: '#fac31e',
dark: '#896d1a',
},
red: {
main: '#eb4637',
dark: '#7e2b25',
},
} as const;
type FeatureColorsType = keyof typeof FeatureColors;
interface Props {
color: FeatureColorsType;
icon: string;
title: string;
}
const { icon = 'mdi:rocket', title = 'Title', color } = Astro.props;
const selectedColor = FeatureColors[color];
---

<div class="feature flex flex-col gap-4">
<Icon name={icon} />
<div class="content">
<h3>{title}</h3>
<p>
<div class=`relative p-8 flex flex-col gap-4 before:border-[3px] before:border-[${selectedColor.main}] after:bg-[${selectedColor.dark}]` >
<Icon name={icon} class="relative z-[2]" style=`color: ${selectedColor.main};`/>
<div class="relative z-[2] content">
<h3 class="relative z-[2]">{title}</h3>
<p class="relative z-[2]">
{selectedColor.main}
<slot>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, corporis.</slot>
</p>
</div>
</div>

<style lang="scss">
<!-- <style lang="scss">
@use '../assets/scss/base/breakpoint' as *;
.feature {
position: relative;
width: calc(100% - 0.5rem);
padding: 2rem;
> * {
position: relative;
z-index: 2;
}
Expand All @@ -40,14 +68,13 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
&::before {
inset: 0;
background-color: var(--neutral-100);
border: 3px solid var(--neutral-700);
border-radius: 1rem;
box-shadow: 0 0 0 6px var(--neutral-100);
z-index: 1;
}
&::after {
background-color: var(--action-color);
// background-color: var(--neutral-400);
inset: 1rem -0.85rem -0.85rem 1rem;
border-radius: 1rem;
z-index: 0;
Expand All @@ -57,11 +84,11 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
:global(.feature [data-icon]) {
height: auto;
width: 4rem;
color: var(--action-color);
// color: var(--feature-action-color, var(--action-color));
}
:global(.darkmode .feature::before) {
background-color: var(--dark-100);
box-shadow: 0 0 0 6px var(--dark-100);
}
</style>
</style> -->
4 changes: 2 additions & 2 deletions src/components/Hero.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@ const { src = '/hero.webp' } = Astro.props

<style lang="scss">
.text-gradient {
background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
background: linear-gradient(315deg, var(--hl-purple) 25%, var(--primary-200));
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

:global(.darkmode .text-gradient) {
background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-400));
background: linear-gradient(315deg, var(--hl-purple) 25%, var(--primary-200));
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Expand Down
42 changes: 7 additions & 35 deletions src/components/ProjectCard.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,12 @@ interface Props {
const { img = b64image, aux, title, body } = Astro.props
---

<!-- <div class="project-item relative overflow-hidden aspect-video max-h-64"> -->
<div class="project-item overflow-hidden">
<img class="" alt="project image" src={img} />
<div class=""> <!-- relative h-full w-full bg-white p-6 opacity-0 transition duration-300 ease-in-out hover:opacity-85 -->
<h2>{title}</h2>
<h3>{body}</h3>
<p>{aux}</p>
<!-- DEBUG: class="outline-dashed outline-2 outline-red-500" -->
<div class="relative project-item overflow-hidden h-[250px] w-[350px]">
<Image class="absolute w-full h-full object-cover" alt="project image" src={img} width="350" height="250"/>
<div class="absolute h-full w-full bg-white p-6 opacity-0 transition duration-300 ease-in-out hover:opacity-85">
<h2 class="text-lg leading-7 text-gray-900">{title}</h2>
<h3 class="text-sm leading-5 text-gray-900">{body}</h3>
<p class="text-sm leading-5 text-gray-900">{aux}</p>
</div>
</div>

<!-- TODO: Move style back to Tailwind -->
<style>
.project-item {
height: 200px;
width: 300px;
/* outline: dashed 2px red; */
}
img {
width: 100%;
height: 100%;
}
h2 {
font-size: 18px;
line-height: 28px;
color: rgb(17 24 39);
}
h3 {
font-size: 14px;
line-height: 20px;
color: rgb(17 24 39);
}
p {
font-size: 14px;
line-height: 20px;
color: rgb(17 24 39);
}
</style>
33 changes: 3 additions & 30 deletions src/components/TestimonialCarousel.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,7 @@ import '../assets/scss/globals.scss'
import { Icon } from 'astro-icon/components'
---

<style lang="scss" is:global>
// theme settings
:root {
--radius-small: 3px;
--radius-large: 6px;
--gap-default: 2rem;
--font-measure: 70ch;
--font-family-default: 'Open Sans', sans-serif;
--font-family-special: 'Open Sans', sans-serif;
// light theme
--font-color: var(--neutral-900);
--action-color: var(--primary-300);
--action-color-state: var(--primary-500);
--background: var(--neutral-100);
--primary-background: var(--primary-100);
--neutral-background: var(--neutral-200);
}

// dark color scheme overrides
.dark-mode {
--font-color: var(--neutral-100);
--action-color: var(--secondary-100);
--action-color-state: var(--secondary-500);
--background: var(--dark-100);
--primary-background: var(--primary-500);
--neutral-background: var(--neutral-900);
}

<style lang="scss">
.carousel {
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -87,7 +60,7 @@ import { Icon } from 'astro-icon/components'

.star {
font-size: 1.5rem;
color: var(--action-color);
color: var(--hl-yellow);
margin: 0 0.1rem;
}

Expand All @@ -111,7 +84,7 @@ import { Icon } from 'astro-icon/components'
}

.dark-mode .star {
color: var(--action-color-state);
color: var(--hl-yellow);
}
</style>

Expand Down
9 changes: 8 additions & 1 deletion src/layouts/DefaultLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,16 @@ const {
--font-color: var(--neutral-900);
--action-color: var(--primary-300);
--action-color-state: var(--primary-500);
--background: var(--neutral-100);
--background: var(--neutral-200);
--primary-background: var(--primary-100);
--neutral-background: var(--neutral-200);
// logo color highlights
--hl-blue: var(--highlight-blue-300);
--hl-purple: var(--highlight-purple-300);
--hl-green: var(--highlight-green-300);
--hl-yellow: var(--highlight-yellow-300);
--hl-red: var(--highlight-red-300);

}

// dark color scheme overrides
Expand Down
47 changes: 26 additions & 21 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,55 +10,60 @@ import TestimonialCarousel from '../components/TestimonialCarousel.astro'
<Hero />
<section class="my-64">
<div class="container">
<h2 class="mb-16 text-6xl text-center">Services</h2>
<h4 style="font-size: 1rem text-center">
<h2 class="mb-10 text-6xl text-center">Services</h2>
<p class="mb-2 text-lg text-center">
We offer a lot of different services for end users and small businesses. Don't see something listed here? Reach
out anyway and we can see about helping or point you in the right direction!
</h4>
</p>
<br />
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
<Feature icon="ion:call" title="Remote Support">
Fast and reliable remote troubleshooting and support to resolve your IT issues without needing a site visit.
</Feature>
<Feature icon="ion:wrench" title="Device Maintenance">
<div>
<Feature icon="ion:call" title="Remote Support" color="blue">
Fast and reliable remote troubleshooting and support to resolve your IT issues without needing a site visit.
</Feature>
</div>
<Feature icon="ion:wrench" title="Device Maintenance" color="blue">
Ensure your devices run smoothly and efficiently with our comprehensive maintenance services. Extend the life
of your devices!
</Feature>
<Feature icon="mdi:wallet" title="Device Consultancy">
Expert advice on selecting, setting up, and optimizing devices to meet your specific needs, ensuring seamless
integration and enhanced performance.
</Feature>
<Feature icon="mdi:virus" title="Virus and Malware Removal">
<div>
<Feature icon="mdi:wallet" title="Device Consultancy" color="green">
Expert advice on selecting, setting up, and optimizing devices to meet your specific needs, ensuring seamless
integration and enhanced performance.
</Feature>

</div>
<Feature icon="mdi:virus" title="Virus and Malware Removal" color="yellow">
Is your PC infected with malware or viruses? We can help eliminate threats and secure your system!
</Feature>
<Feature icon="mdi:server" title="Home Server Setup">
<Feature icon="mdi:server" title="Home Server Setup" color="red">
Host your own services at home or decouple from the cloud with our expert home server solutions.
</Feature>
<Feature icon="mdi:cable-data" title="Network Design and Upgrade">
<Feature icon="mdi:cable-data" title="Network Design and Upgrade" color="red">
Upgrade your network with our tailored design and optimization services for better connectivity and
performance.
</Feature>
<Feature icon="mdi:hammer-screwdriver" title="Custom PC Builds">
<Feature icon="mdi:hammer-screwdriver" title="Custom PC Builds" color="red">
Whether you need a high-performance PC or one that fits your budget, we can build it for you!
</Feature>
<Feature icon="mdi:data" title="Data Recovery Services">
<Feature icon="mdi:data" title="Data Recovery Services" color="yellow">
Recover lost data from failed or broken devices with our specialized recovery solutions.
</Feature>
<Feature icon="mdi:cctv" title="Home & SMB Surveillance Solutions">
<Feature icon="mdi:cctv" title="Home & SMB Surveillance Solutions" color="yellow">
Secure your home or business with our comprehensive security camera systems, providing peace of mind while
you’re away.
</Feature>
<Feature icon="ion:md-cloud-upload" title="Backup Solutions">
<Feature icon="ion:md-cloud-upload" title="Backup Solutions" color="green">
Protect your data with automated onsite or cloud backup services. Ensure your information is safe and easily
recoverable in the event of a disaster.
</Feature>
<Feature icon="ion:ios-settings" title="Software Installation and Configuration">
<Feature icon="ion:ios-settings" title="Software Installation and Configuration" color="blue">
Assistance with installing and configuring software to ensure it runs optimally on your devices.
</Feature>
<Feature icon="ion:hardware-chip" title="Hardware Upgrades">
<Feature icon="ion:hardware-chip" title="Hardware Upgrades" color="blue">
Boost the performance of your existing devices with our hardware upgrade services.
</Feature>
<Feature icon="mdi:printer-wireless" title="Printer Setup and Troubleshooting">
<Feature icon="mdi:printer-wireless" title="Printer Setup and Troubleshooting" color="green">
Ensure your printers are correctly set up and maintained for hassle-free printing.
</Feature>
</div>
Expand Down
Loading

0 comments on commit dcb3aea

Please sign in to comment.