Skip to content

Commit 7be9cef

Browse files
ShadrackOdieloShadrackOdielo
committed
made more changes
1 parent 9a8cb5f commit 7be9cef

23 files changed

Lines changed: 351 additions & 51 deletions

‎app/components/AboutSection.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup lang="ts">
2+
</script>
3+
<template>
4+
<UCard id="about" class="relative" :ui="{body:'flex md:flex-row flex-col' , header:'bg-white'}" >
5+
<template #header>
6+
<!-- a large greyed out background text and smaller darker overlay -->
7+
<div class="relative inset-0 flex items-center justify-center">
8+
<h1 class="text-9xl text-gray-300 font-bold opacity-20">About Me</h1>
9+
<h1 class="text-6xl text-gray-800 left-10 font-bold">About Me</h1>
10+
</div>
11+
</template>
12+
<div class="flex justify-center items-center w-full md:w-1/2 p-4">
13+
<img src="/images/face.jpg" alt="About Me" class="w-48 h-auto rounded-lg shadow-lg">
14+
</div>
15+
<div class="container mx-auto md:w-1/2 px-4">
16+
<h2 class="text-3xl font-bold mb-6">About Me</h2>
17+
<p class="text-lg mb-4">
18+
I am a passionate web developer with a focus on creating beautiful and functional websites.
19+
My journey in web development started with a curiosity about how websites work, and it has grown into a full-fledged career.
20+
I love coding, learning new technologies, and sharing my knowledge with others.
21+
</p>
22+
<p class="text-lg mb-4">
23+
In my free time, I enjoy exploring new programming languages, contributing to open-source projects, and writing technical articles.
24+
I believe in continuous learning and strive to improve my skills every day.
25+
</p>
26+
<p class="text-lg mb-4">
27+
If you're interested in collaborating or just want to chat about web development, feel free to reach out!
28+
</p>
29+
30+
</div>
31+
32+
</UCard>
33+
</template>

‎app/components/AppHeader.vue‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,52 @@
11
<script setup lang="ts">
2+
import ColorModeButton from './ColorModeButton.vue';
23
4+
const open = ref(false);
5+
6+
// toggle open state of the slideover when the route or hash changes
7+
8+
const route = useRoute();
9+
watch(() => route.path + route.hash, () => {
10+
open.value = false;
11+
});
312
const navITems = [
413
{label: 'Home', to: '/', exactHash: true},
514
{label: 'About', to: '/#about', exactHash: true},
615
{label: 'Services', to: '/#services', exactHash: true},
716
{label: 'Skills', to: '/#skills', exactHash: true},
817
{label: 'Portfolio', to: '/#portfolio', exactHash: true},
9-
{label: 'Testimonials', to: '/#testimonials', exactHash: true},
18+
{label: 'Background', to: '/#background', exactHash: true},
1019
{label: 'Blog', to: '/blog'},
11-
{label: 'Contact', to: '/contact'},
20+
{label: 'Contact', to: '/contact', icon: 'i-heroicons-envelope-solid',},
1221
]
1322
</script>
1423
<template>
15-
<header class="flex items-center justify-between px-4 w-full top-0 sticky bg-elevated">
16-
<div class="text-lg font-bold">My Website</div>
17-
<nav class="flex space-x-4">
18-
<UNavigationMenu :items="navITems" variant='link' orientation="horizontal"/>
24+
<header class="flex items-center justify-between px-4 w-full top-0 z-99 sticky ">
25+
<ULink to="/#" class="flex items-center space-x-2">
26+
<img src="/images/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full">
27+
<div class="text-lg font-bold">Shadrack Odielo.</div>
28+
</ULink>
29+
<nav class="hidden md:flex space-x-4">
30+
<UNavigationMenu :items="navITems" variant='link' orientation="horizontal" highlight />
1931
</nav>
20-
<div class="flex items-center space-x-4">
21-
<UButton label="Login" variant="outline" color="neutral" />
22-
<UButton label="Sign Up" color="primary" />
23-
</div>
32+
<div class="flex items-center space-x-2">
33+
<ColorModeButton />
34+
<UButton color="neutral" icon="i-lucide-github" variant='link' href="https://github.com/ShadrackOdielo" target="_blank" />
35+
<UButton color="neutral" icon="i-lucide-linkedin" variant='link' href="https://www.linkedin.com/in/shadrack-odielo/" target="_blank" />
36+
<UButton color="neutral" icon="i-lucide-twitter" variant='link' href="https://twitter.com/ShadrackOdielo" target="_blank" />
37+
<USlideover
38+
v-model:open="open"
39+
class="md:hidden"
40+
title="Menu">
41+
<UButton icon="i-lucide-menu" color="neutral" variant="ghost" />
42+
43+
<template #body>
44+
<nav class="flex flex-col space-y-2">
45+
<!-- close slideover when a lin is clicked -->
46+
<UNavigationMenu :items="navITems" variant='link' orientation="vertical" highlight />
47+
</nav>
48+
</template>
49+
</USlideover>
50+
</div>
2451
</header>
2552
</template>

‎app/components/BackgroundSection.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
</script>
3+
<template>
4+
<section id="background" class=" py-20 min-h-screen">
5+
<div class="container mx-auto px-4">
6+
<h2 class="text-3xl font-bold mb-6">Background Section</h2>
7+
<p class="text-lg mb-4">
8+
This section provides an overview of my background, including my education and work experience.
9+
I have a strong foundation in web development and design, with a focus on creating user-friendly interfaces.
10+
</p>
11+
<ul class="list-disc pl-5 space-y-2">
12+
<li>Bachelor's Degree in Computer Science</li>
13+
<li>5+ years of experience in web development</li>
14+
<li>Expertise in HTML, CSS, JavaScript, and modern frameworks</li>
15+
<li>Strong problem-solving skills and attention to detail</li>
16+
<li>Passionate about continuous learning and improvement</li>
17+
</ul>
18+
<div class="mt-8">
19+
<img src="/images/test.jpg" alt="Background" class="w-full h-auto rounded-lg shadow-lg">
20+
</div>
21+
</div>
22+
</section>
23+
</template>

‎app/components/ColorModeButton.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup>
2+
const colorMode = useColorMode()
3+
4+
const isDark = computed({
5+
get() {
6+
return colorMode.value === 'dark'
7+
},
8+
set(_isDark) {
9+
colorMode.preference = _isDark ? 'dark' : 'light'
10+
}
11+
})
12+
</script>
13+
14+
<template>
15+
<ClientOnly v-if="!colorMode?.forced">
16+
<UButton
17+
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
18+
color="neutral"
19+
variant="ghost"
20+
@click="isDark = !isDark"
21+
/>
22+
23+
<template #fallback>
24+
<div class="size-8" />
25+
</template>
26+
</ClientOnly>
27+
</template>

‎app/components/HomeSection.vue‎

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,72 @@
11
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue'
3+
4+
const jobs = ['Web Developer', 'Writer', 'Designer']
5+
const currentText = ref('')
6+
let jobIndex = 0
7+
let charIndex = 0
8+
let isDeleting = false
9+
10+
const typeSpeed = 150
11+
const deleteSpeed = 75
12+
const delayBetween = 2000
13+
14+
function typeWriter() {
15+
const fullText = jobs[jobIndex] || ''
16+
if (!isDeleting) {
17+
currentText.value = fullText.substring(0, charIndex + 1)
18+
charIndex++
19+
if (charIndex === fullText.length) {
20+
isDeleting = true
21+
setTimeout(typeWriter, delayBetween)
22+
return
23+
}
24+
} else {
25+
currentText.value = fullText.substring(0, charIndex - 1)
26+
charIndex--
27+
if (charIndex === 0) {
28+
isDeleting = false
29+
jobIndex = (jobIndex + 1) % jobs.length
30+
}
31+
}
32+
setTimeout(typeWriter, isDeleting ? deleteSpeed : typeSpeed)
33+
}
34+
35+
onMounted(() => {
36+
typeWriter()
37+
})
238
</script>
39+
340
<template>
4-
<div>
5-
<section id='home' class="bg-gray-100 py-20">
6-
<div class="container mx-auto px-4">
7-
<h2 class="text-3xl font-bold mb-6">Welcome to My Website</h2>
8-
<p class="text-lg mb-4">This is a simple home section with a hero image.</p>
9-
<img src="/images/test.jpg" alt="Hero Image" class="w-full h-auto rounded-lg shadow-lg">
10-
</div>
11-
</section>
41+
<section
42+
id="home"
43+
class="relative w-full h-screen bg-[url(/images/test.jpg)] bg-cover bg-center flex flex-col items-center justify-center px-4 text-center"
44+
>
45+
<div class=" p-6 rounded-lg max-w-xl w-full">
46+
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-4">
47+
shadrack odielo
48+
</h1>
49+
<h2 class="text-2xl sm:text-3xl md:text-4xl font-medium text-white mb-6">
50+
<span>{{ currentText }}</span><span class="border-r-2 border-white animate-pulse ml-1"></span>
51+
</h2>
52+
<a
53+
href="#contact"
54+
class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition"
55+
>
56+
Contact Me
57+
</a>
1258
</div>
59+
60+
<a
61+
href="#about"
62+
class="absolute bottom-8 animate-bounce text-white"
63+
aria-label="Scroll down"
64+
>
65+
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none"
66+
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
67+
<path stroke-linecap="round" stroke-linejoin="round"
68+
d="M19 9l-7 7-7-7"/>
69+
</svg>
70+
</a>
71+
</section>
1372
</template>

‎app/components/PortfolioSection.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
</script>
3+
<template>
4+
<section id="portfolio" class=" py-20 min-h-screen">
5+
<div class="container mx-auto px-4">
6+
<h2 class="text-3xl font-bold mb-6">My Portfolio</h2>
7+
<p class="text-lg mb-4">
8+
Here are some of the projects I have worked on. Each project showcases my skills in web development and design.
9+
</p>
10+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
11+
<div class=" p-4 rounded-lg shadow-lg">
12+
<img src="/images/test.jpg" alt="Project 1" class="w-full h-auto rounded-lg mb-4">
13+
<h3 class="text-xl font-semibold mb-2">Project 1</h3>
14+
<p class="text-md">A brief description of Project 1.</p>
15+
</div>
16+
<div class=" p-4 rounded-lg shadow-lg">
17+
<img src="/images/test.jpg" alt="Project 2" class="w-full h-auto rounded-lg mb-4">
18+
<h3 class="text-xl font-semibold mb-2">Project 2</h3>
19+
<p class="text-gray-700">A brief description of Project 2.</p>
20+
</div>
21+
<div class=" p-4 rounded-lg shadow-lg">
22+
<img src="/images/test.jpg" alt="Project 3" class="w-full h-auto rounded-lg mb-4">
23+
<h3 class="text-xl font-semibold mb-2">Project 3</h3>
24+
<p class="text-gray-700">A brief description of Project 3.</p>
25+
</div>
26+
</div>
27+
</div>
28+
</section>
29+
</template>

‎app/components/ScrollLoader.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup>
2+
import { onMounted, onUnmounted } from 'vue'
3+
4+
onMounted(() => {
5+
const scrollProgress = document.querySelector('.scroll-top__progress')
6+
// check of there is progress before makin element visible
7+
8+
9+
const updateProgress = () => {
10+
if (scrollProgress) {
11+
const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)) * 100
12+
const radius = parseFloat(scrollProgress.getAttribute('r'))
13+
const circumference = 2 * Math.PI * radius
14+
const offset = circumference * (1 - (scrollPercentage / 100))
15+
scrollProgress.style.strokeDasharray = `${circumference} ${circumference}`
16+
scrollProgress.style.strokeDashoffset = offset
17+
}
18+
}
19+
20+
window.addEventListener('scroll', updateProgress)
21+
updateProgress()
22+
23+
onUnmounted(() => window.removeEventListener('scroll', updateProgress))
24+
})
25+
</script>
26+
<template>
27+
<a class="scroll-top " href="#">
28+
<!-- Here you can place an icon, for example -->
29+
<UIcon name="i-heroicons-arrow-up-solid" class="text-2xl" />
30+
<svg class="scroll-top__circle" viewBox="0 0 40 40">
31+
<!-- Half of the thickness of the circle must be subtracted from the radius, otherwise the graphic will be cut off -->
32+
<circle class="scroll-top__progress" cx="20" cy="20" r="18"/>
33+
</svg>
34+
</a>
35+
</template>
36+
<style scoped>
37+
38+
.scroll-top {
39+
--size: 40px;
40+
position: fixed;
41+
right: 50px;
42+
bottom: 50px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
width: var(--size);
47+
height: var(--size);
48+
color: var(--color-neutral);
49+
background-color: var(--bg-elevated);
50+
border-radius: 50%;
51+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
52+
text-decoration: none;
53+
}
54+
.scroll-top__circle {
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
width: 100%;
59+
height: 100%;
60+
transform: rotate(-90deg);
61+
pointer-events: none;
62+
paint-order: stroke;
63+
}
64+
.scroll-top__progress {
65+
fill: none;
66+
stroke: currentColor;
67+
stroke-width: 2; /* Pay attention to the radius */
68+
}
69+
</style>

‎app/components/ServicesSection.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
</script>
3+
<template>
4+
<section id="services" class="py-20 min-h-screen">
5+
<div class="container mx-auto px-4">
6+
<h2 class="text-3xl font-bold mb-6">My Services</h2>
7+
<p class="text-lg mb-4">
8+
I offer a range of web development services to help you build your online presence.
9+
Whether you need a simple website or a complex web application, I can help you achieve your goals.
10+
</p>
11+
<ul class="list-disc pl-5 space-y-2">
12+
<li>Web Development</li>
13+
<li>UI/UX Design</li>
14+
<li>Responsive Design</li>
15+
<li>Performance Optimization</li>
16+
<li>SEO Services</li>
17+
</ul>
18+
<div class="mt-8">
19+
<img src="/images/test.jpg" alt="Services" class="w-full h-auto rounded-lg shadow-lg">
20+
</div>
21+
</div>
22+
</section>
23+
</template>

‎app/components/SkillsSection.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
</script>
3+
<template>
4+
<section id="skills" class=" py-20 min-h-screen">
5+
<div class="container mx-auto px-4">
6+
<h2 class="text-3xl font-bold mb-6">My Skills</h2>
7+
<p class="text-lg mb-4">
8+
I have a diverse set of skills that I have developed over the years.
9+
My expertise includes web development, UI/UX design, and performance optimization.
10+
</p>
11+
<ul class="list-disc pl-5 space-y-2">
12+
<li>HTML, CSS, JavaScript</li>
13+
<li>Vue.js, React</li>
14+
<li>Node.js, Express</li>
15+
<li>Responsive Design</li>
16+
<li>Performance Optimization</li>
17+
</ul>
18+
<div class="mt-8">
19+
<img src="/images/test.jpg" alt="Skills" class="w-full h-auto rounded-lg shadow-lg">
20+
</div>
21+
</div>
22+
</section>
23+
</template>

0 commit comments

Comments
 (0)