Skip to content

Commit 7d8c7cc

Browse files
dvXcodedvXcode
committed
Add features section, enhance intro styles, and update homepage content
1 parent 1025b84 commit 7d8c7cc

7 files changed

Lines changed: 281 additions & 28 deletions

File tree

‎_data/features.json‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,29 @@
1-
[]
1+
[
2+
{
3+
"title": "Azure Cloud Development",
4+
"description": "Expert cloud architecture and development using Azure services. Scalable, secure, and cost-effective solutions for modern applications.",
5+
"image": {
6+
"url": "images/features/noun_3d modeling_1885342.svg",
7+
"width": 80,
8+
"height": 80
9+
}
10+
},
11+
{
12+
"title": ".NET Core & Microservices",
13+
"description": "Modern application development with .NET Core, containerization, and microservices architecture for enterprise-grade solutions.",
14+
"image": {
15+
"url": "images/features/noun_The Process_1885341.svg",
16+
"width": 80,
17+
"height": 80
18+
}
19+
},
20+
{
21+
"title": "Cross-Platform Mobile",
22+
"description": "Flutter and Dart development for iOS and Android. Single codebase, native performance, and beautiful user experiences.",
23+
"image": {
24+
"url": "images/features/noun_branding_1885335.svg",
25+
"width": 80,
26+
"height": 80
27+
}
28+
}
29+
]

‎_sass/components/_feature.scss‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,83 @@
11
.feature {
22
height: 100%;
3-
border: 1px solid $white-offset;
4-
border-radius: 3px;
5-
padding: 20px;
3+
border: 1px solid #f0f0f0;
4+
border-radius: 12px;
5+
padding: 30px 20px;
66
background-color: #ffffff;
77
display: flex;
88
align-items: center;
99
flex-direction: column;
1010
text-align: center;
11+
transition: all 0.3s ease;
12+
position: relative;
13+
overflow: hidden;
14+
15+
&::before {
16+
content: '';
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
right: 0;
21+
height: 3px;
22+
background: linear-gradient(135deg, $primary, $secondary);
23+
transform: scaleX(0);
24+
transition: transform 0.3s ease;
25+
}
26+
27+
&:hover {
28+
transform: translateY(-5px);
29+
box-shadow: 0 15px 35px rgba(229, 38, 31, 0.1);
30+
border-color: rgba(229, 38, 31, 0.2);
31+
32+
&::before {
33+
transform: scaleX(1);
34+
}
35+
}
36+
1137
.feature-image {
1238
flex: 0 0 auto;
1339
width: 80px;
1440
height: 80px;
1541
display: flex;
16-
margin-bottom: 20px;
42+
margin-bottom: 25px;
1743
text-align: center;
44+
justify-content: center;
45+
align-items: center;
46+
background: rgba(229, 38, 31, 0.05);
47+
border-radius: 50%;
48+
transition: all 0.3s ease;
1849
}
50+
51+
&:hover .feature-image {
52+
background: rgba(229, 38, 31, 0.1);
53+
transform: scale(1.05);
54+
}
55+
1956
img {
20-
width: 100%;
21-
height: auto;
57+
width: 50px;
58+
height: 50px;
59+
filter: opacity(0.8);
60+
transition: all 0.3s ease;
61+
}
62+
63+
&:hover img {
64+
filter: opacity(1);
2265
}
66+
2367
.feature-title {
68+
font-size: 1.3rem;
69+
font-weight: 600;
70+
color: $black;
71+
margin-bottom: 15px;
72+
font-family: $font-family-heading;
73+
line-height: 1.3;
2474
}
75+
2576
.feature-content {
2677
margin-bottom: 0;
2778
margin-top: auto;
79+
font-size: 0.95rem;
80+
line-height: 1.5;
81+
color: $steel;
2882
}
2983
}

‎_sass/components/_intro.scss‎

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,86 @@
22
display: flex;
33
justify-content: flex-start;
44
align-items: center;
5-
padding-top: 60px;
6-
padding-bottom: 60px;
5+
padding-top: 80px;
6+
padding-bottom: 80px;
77
overflow: hidden;
8+
min-height: 70vh;
9+
810
@include media-breakpoint-up(md) {
9-
padding-top: 140px;
10-
padding-bottom: 140px;
11+
padding-top: 120px;
12+
padding-bottom: 120px;
1113
}
14+
1215
h1 {
1316
color: $black;
14-
font-size: 42px;
15-
font-weight: bold;
16-
line-height: 1.2;
17+
font-size: 48px;
18+
font-weight: 700;
19+
line-height: 1.1;
20+
margin-bottom: 20px;
21+
1722
@include media-breakpoint-up(md) {
18-
width: 80%;
19-
font-size: 48px;
23+
font-size: 56px;
2024
}
25+
2126
@include media-breakpoint-up(lg) {
22-
font-size: 50px;
27+
font-size: 64px;
2328
}
2429
}
30+
2531
h2 {
26-
width: 80%;
27-
font-size: 1.2rem;
32+
font-size: 1.4rem;
2833
line-height: 1.4;
29-
margin-bottom: 30px;
34+
margin-bottom: 25px;
3035
color: $black;
31-
font-family: $font-family-base;
36+
font-family: $font-family-heading;
37+
font-weight: 400;
38+
39+
@include media-breakpoint-up(md) {
40+
width: 90%;
41+
font-size: 1.5rem;
42+
}
3243
}
44+
3345
p {
34-
font-size: 1.2rem;
35-
font-weight: light;
36-
line-height: 1.5;
46+
font-size: 1.1rem;
47+
font-weight: 400;
48+
line-height: 1.6;
3749
color: $steel;
50+
margin-bottom: 0;
51+
3852
@include media-breakpoint-up(md) {
39-
width: 80%;
53+
width: 85%;
54+
font-size: 1.2rem;
4055
}
4156
}
4257
}
4358

4459
.intro-small {
4560
padding-top: 100px;
4661
padding-bottom: 30px;
62+
min-height: auto;
63+
}
64+
65+
.intro-image {
66+
max-width: 100%;
67+
height: auto;
68+
filter: drop-shadow(0 10px 20px rgba(229, 38, 31, 0.1));
69+
70+
&.intro-image-absolute {
71+
position: absolute;
72+
top: 50%;
73+
left: 50%;
74+
transform: translate(-50%, -50%);
75+
max-width: 90%;
76+
77+
@include media-breakpoint-up(md) {
78+
max-width: 80%;
79+
}
80+
}
81+
82+
&.intro-image-hide-mobile {
83+
@include media-breakpoint-down(md) {
84+
display: none;
85+
}
86+
}
4787
}

‎_sass/components/_strip.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,27 @@
22
background: white;
33
background-repeat: no-repeat;
44
}
5+
56
.strip-white {
67
background-color: white;
78
}
9+
810
.strip-grey {
9-
background-color: $white-offset;
11+
background-color: #fafafa;
12+
border-top: 1px solid #f0f0f0;
13+
position: relative;
14+
15+
&::before {
16+
content: '';
17+
position: absolute;
18+
top: 0;
19+
left: 50%;
20+
transform: translateX(-50%);
21+
width: 60px;
22+
height: 4px;
23+
background: linear-gradient(135deg, $primary, $secondary);
24+
border-radius: 2px;
25+
}
1026
}
1127
.strip-diagonal {
1228
transform: skewY(5deg);

‎_sass/pages/_page-home.scss‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,113 @@
11
.page-home {
2+
.intro {
3+
background: linear-gradient(135deg, rgba(229, 38, 31, 0.05) 0%, rgba(248, 131, 121, 0.05) 100%);
4+
border-bottom: 1px solid rgba(229, 38, 31, 0.1);
5+
}
6+
7+
.intro h1 {
8+
background: linear-gradient(135deg, #e5261f, #f88379);
9+
-webkit-background-clip: text;
10+
-webkit-text-fill-color: transparent;
11+
background-clip: text;
12+
font-weight: 700;
13+
letter-spacing: -0.02em;
14+
}
15+
16+
.intro h2 {
17+
color: #2f2f41;
18+
font-weight: 600;
19+
margin-top: 20px;
20+
margin-bottom: 25px;
21+
}
22+
23+
.intro p {
24+
font-size: 1.1rem;
25+
line-height: 1.6;
26+
color: #5c5a5a;
27+
margin-bottom: 30px;
28+
}
29+
30+
.strip-grey {
31+
background: #fafafa;
32+
border-top: 1px solid #f0f0f0;
33+
}
34+
35+
.feature {
36+
text-align: center;
37+
padding: 30px 20px;
38+
border-radius: 12px;
39+
transition: all 0.3s ease;
40+
background: white;
41+
border: 1px solid #f0f0f0;
42+
height: 100%;
43+
44+
&:hover {
45+
transform: translateY(-5px);
46+
box-shadow: 0 10px 25px rgba(229, 38, 31, 0.1);
47+
border-color: rgba(229, 38, 31, 0.2);
48+
}
49+
}
50+
51+
.feature-image {
52+
margin-bottom: 20px;
53+
54+
img {
55+
filter: opacity(0.8);
56+
transition: all 0.3s ease;
57+
}
58+
}
59+
60+
.feature:hover .feature-image img {
61+
filter: opacity(1);
62+
transform: scale(1.05);
63+
}
64+
65+
.feature-title {
66+
font-size: 1.3rem;
67+
font-weight: 600;
68+
color: #2f2f41;
69+
margin-bottom: 15px;
70+
font-family: $font-family-heading;
71+
}
72+
73+
.feature-content {
74+
font-size: 0.95rem;
75+
line-height: 1.5;
76+
color: #5c5a5a;
77+
}
78+
79+
.call {
80+
background: linear-gradient(135deg, #e5261f, #f88379);
81+
border-radius: 12px;
82+
padding: 25px;
83+
margin-top: 20px;
84+
border: none;
85+
86+
h2 {
87+
color: white !important;
88+
font-size: 1.2rem;
89+
margin-bottom: 15px;
90+
}
91+
92+
p {
93+
color: rgba(255, 255, 255, 0.9) !important;
94+
margin-bottom: 20px;
95+
}
96+
97+
.btn {
98+
background: white;
99+
color: #e5261f;
100+
border: none;
101+
font-weight: 600;
102+
padding: 12px 24px;
103+
border-radius: 8px;
104+
transition: all 0.3s ease;
105+
106+
&:hover {
107+
background: rgba(255, 255, 255, 0.9);
108+
transform: translateY(-2px);
109+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
110+
}
111+
}
112+
}
2113
}

‎index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
show_call_box: true
99
---
1010

11-
# Professional Software Consulting
11+
# Modern Software Solutions
1212

13-
Volovyk delivers scalable, maintainable solutions for modern software challenges. Based in Norway, we specialize in cloud-native development and cross-platform solutions.
13+
**Volovyk** delivers cutting-edge software consulting from Norway. We specialize in cloud-native development, enterprise applications, and cross-platform mobile solutions that scale with your business.
14+
15+
## Why Choose Volovyk?
16+
17+
We combine Norwegian quality standards with global expertise to deliver solutions that matter. From startup MVPs to enterprise transformations, we're your trusted technology partner.

‎index.md‎

Whitespace-only changes.

0 commit comments

Comments
 (0)