Skip to content

Commit b9d2002

Browse files
leighfallleighfall
committed
Add Services section
1 parent 16a8229 commit b9d2002

File tree

7 files changed

+113
-46
lines changed

7 files changed

+113
-46
lines changed

‎src/assets/main.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@
3131
@uscc-blue: #322FFD;
3232
@vue-green: #42B883;
3333
@background: rgb(26, 26, 26);
34+
@box-backround: fade(@white-light, 3%);

‎src/components/Collapsible.vue‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const toggle = () => {
1818
1919
const style = computed(() => ({
2020
maxHeight: height.value,
21-
transition: 'max-height 0.3s ease',
21+
transition: 'max-height 0.5s ease',
2222
overflow: 'hidden',
2323
}));
2424
@@ -55,6 +55,8 @@ watch(expanded, async () => {
5555
</template>
5656

5757
<style lang="less" scoped>
58+
@import '@/assets/main.less';
59+
5860
.collapsing {
5961
display: flex;
6062
flex-direction: column;
@@ -67,14 +69,14 @@ watch(expanded, async () => {
6769
cursor: pointer;
6870
border: none;
6971
background: none;
70-
padding: 0.5rem 0;
71-
font-size: 1rem;
72+
padding: 1vh 1vw 1vh 0;
73+
font-size: 1.3rem;
7274
width: 100%;
7375
text-align: left;
76+
color: @white-light;
7477
7578
&:focus {
76-
outline: 2px solid #555;
77-
outline-offset: 2px;
79+
outline: 2px solid @white-light;
7880
}
7981
8082
.main-text {
@@ -83,11 +85,13 @@ watch(expanded, async () => {
8385
8486
.caret {
8587
display: inline-block;
86-
transition: transform 0.3s ease;
87-
transform: rotate(0deg);
88+
transition: transform 0.5s ease;
89+
transform: rotate(0deg) scaleX(1.8);
90+
transform-origin: center center;
8891
8992
&.rotated {
90-
transform: rotate(180deg);
93+
transform: rotate(180deg) scaleX(1.8);
94+
transform-origin: center center;
9195
}
9296
}
9397
}
@@ -96,7 +100,8 @@ watch(expanded, async () => {
96100
overflow: hidden;
97101
98102
.collapsing-body-inner {
99-
padding: 0.5rem 0;
103+
padding: 1vh 1vw 1vh 0;
104+
background: @box-backround;
100105
}
101106
}
102107
}

‎src/components/TopNav.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { ref } from 'vue';
44
defineOptions({ name: 'TopNav' });
55
66
const emit = defineEmits<{
7-
'page-selection': ['home' | 'about' | 'experience' | 'contact' | 'blog'];
7+
'page-selection': ['home' | 'about' | 'experience' | 'contact' | 'blog' | 'services'];
88
}>();
99
10-
const activePage = ref<'home' | 'about' | 'experience' | 'contact' | 'blog'>('home');
10+
const activePage = ref<'home' | 'about' | 'experience' | 'contact' | 'blog' | 'services'>('home');
1111
12-
function changePage(pageType: 'home' | 'about' | 'experience' | 'contact' | 'blog') {
12+
function changePage(pageType: 'home' | 'about' | 'experience' | 'contact' | 'blog' | 'services') {
1313
activePage.value = pageType;
1414
emit('page-selection', activePage.value);
1515
}
@@ -26,12 +26,12 @@ function changePage(pageType: 'home' | 'about' | 'experience' | 'contact' | 'blo
2626
@click="changePage('experience')">
2727
Experience
2828
</div>
29-
<!-- <div
29+
<div
3030
class="nav-link"
31-
:class="{ active: activePage === 'contact' }"
32-
@click="changePage('contact')">
33-
Contact
34-
</div> -->
31+
:class="{ active: activePage === 'services' }"
32+
@click="changePage('services')">
33+
Services
34+
</div>
3535
</nav>
3636
</template>
3737

‎src/constants/FreelanceOpps.ts‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,27 @@ import type { Freelance } from '@/models/Freelance';
22

33
export const FreelanceOpps: Freelance[] = [
44
{
5-
header: 'header1',
6-
info: 'body1',
5+
header: 'Dark Mode',
6+
info: "Ever sat in bed scrolling, clicked on a link, and ended up blinding yourself when the webpage opened? Is that your website? I can help transform your website's color palette to a dark mode or offer users the option to switch between light and dark themes, improving comfort, style, and accessibility.",
77
},
88
{
9-
header: 'header2',
10-
info: 'body2',
9+
header: 'Accessibility Upgrades',
10+
info: 'Making your website accessible isn’t just the right thing to do, but it can also expand your audience, improve SEO, and protect against legal risks. I can audit and enhance your site to meet accessibility standards: keyboard navigation, screen reader support, color contrast fixes, alt text, and more.',
11+
},
12+
{
13+
header: 'Mobile/Responsive Implementation',
14+
info: "Does your website look perfect on desktop but break down on phones or tablets? I can fix glitches, adjust layouts, and fully optimize your website for every screen size. Whether it's small tweaks or a complete responsive redesign, I’ll make sure your site looks and works beautifully everywhere.",
15+
},
16+
{
17+
header: 'Content and Bug Fixes',
18+
info: 'Have a typo, outdated content, or an annoying glitch that’s been bothering you or your users? I offer quick-turnaround updates for text, images, links, and bug fixes to keep your site polished, professional, and functional without the need for a full rebuild.',
19+
},
20+
{
21+
header: 'TypeScript Implementation',
22+
info: "Want to future-proof your web app? I can help migrate your JavaScript codebase to TypeScript, adding type safety, better tooling, and fewer runtime errors. Whether it's a full conversion or adding TypeScript to new features, I’ll help you level up your code quality and maintainability.",
23+
},
24+
{
25+
header: 'Vue 3 Upgrades & Rewrites',
26+
info: 'Still running on Vue 2 or dealing with messy legacy code? I specialize in upgrading projects to Vue 3 with the Composition API for better performance, scalability, and maintainability. I can also help refactor spaghetti code into clean, modern Vue architecture.',
1127
},
1228
];

‎src/views/Contact.vue‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/views/HomeView.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import JobsView from './JobsView.vue';
99
import SkillsView from '../components/SkillsView.vue';
1010
import SideNav from '../components/SideNav.vue';
1111
import TopNav from '../components/TopNav.vue';
12-
import Contact from './Contact.vue';
12+
import Services from './Services.vue';
1313
import { ManagementExperience, SoftwareExperience } from '../constants/JobExperience';
1414
15-
const activeSection = ref<'home' | 'about' | 'experience' | 'project' | 'contact' | 'blog'>('home');
15+
const activeSection = ref<
16+
'home' | 'about' | 'experience' | 'project' | 'contact' | 'blog' | 'services'
17+
>('home');
1618
</script>
1719

1820
<template>
@@ -130,8 +132,10 @@ const activeSection = ref<'home' | 'about' | 'experience' | 'project' | 'contact
130132
<JobsView :job-experience="ManagementExperience" />
131133
</div>
132134
</div>
133-
<div v-else-if="activeSection === 'contact'" style="display: flex; flex-flow: column">
134-
<Contact />
135+
<div v-else-if="activeSection === 'services'" style="display: flex; flex-flow: column">
136+
<div class="section">
137+
<Services />
138+
</div>
135139
</div>
136140
</Transition>
137141
<!-- <div class="section" id="projects">

‎src/views/Services.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script setup lang="ts">
2+
import Collapsible from '@/components/Collapsible.vue';
3+
import SectionHeader from '@/components/SectionHeader.vue';
4+
import { FreelanceOpps } from '@/constants/FreelanceOpps';
5+
6+
defineOptions({ name: 'Services' });
7+
</script>
8+
9+
<template>
10+
<div class="services">
11+
<SectionHeader>Let’s Build Something Great!</SectionHeader>
12+
I’m currently available for freelance contract work. Below, you’ll find a list of services I
13+
offer to help improve, enhance, or build your website. If you have something in mind that isn’t
14+
listed, feel free to reach out. I’m always open to discussing new ideas and seeing how we can
15+
work together!
16+
<div v-for="(opp, idx) in FreelanceOpps" :key="idx" class="opp-item">
17+
<Collapsible :main-text="opp.header" :id="opp.header">{{ opp.info }}</Collapsible>
18+
</div>
19+
<div class="get-in-touch">
20+
<div class="connect">Let's Connect!</div>
21+
<div>
22+
<a
23+
href="mailto:[email protected]"
24+
title="mailto:[email protected]">
25+
<i class="fa-solid fa-envelope icons" />
26+
</a>
27+
</div>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<style lang="less" scoped>
33+
@import '@/assets/main.less';
34+
35+
.services {
36+
display: flex;
37+
flex-flow: column;
38+
width: 100%;
39+
}
40+
41+
.opp-item {
42+
display: flex;
43+
margin: 3vh 0;
44+
}
45+
46+
.get-in-touch {
47+
display: flex;
48+
flex-flow: column;
49+
align-items: center;
50+
gap: 2vh;
51+
margin: 2vh 0;
52+
}
53+
54+
.connect {
55+
font-size: 1.6rem;
56+
letter-spacing: 0.3vw;
57+
}
58+
59+
.icons {
60+
font-size: 1.8rem;
61+
}
62+
</style>

0 commit comments

Comments
 (0)