Skip to content

Commit 33b49fc

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#27 from realstoman/ui-refactoring-and-carousel
Refactoring
2 parents a24c55a + 61ffe5a commit 33b49fc

14 files changed

+100
-77
lines changed

‎package-lock.json

Lines changed: 19 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/HireMeModal.vue

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<!-- Hire me modal -->
33
<transition name="fade">
4-
<div v-show="modal" class="font-general-medium fixed inset-0 z-30">
4+
<div v-show="modal" class="font-general-regular fixed inset-0 z-30">
55
<!-- Modal body background as backdrop -->
66
<div
77
v-show="modal"
@@ -29,7 +29,7 @@
2929
What project are you looking for?
3030
</h5>
3131
<button
32-
class="px-4 font-bold text-primary-dark dark:text-primary-light"
32+
class="px-4 text-primary-dark dark:text-primary-light"
3333
@click="showModal()"
3434
>
3535
<i data-feather="x"></i>
@@ -39,7 +39,7 @@
3939
<form class="max-w-xl m-4 text-left">
4040
<div class="mt-0">
4141
<input
42-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
42+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
4343
id="name"
4444
name="name"
4545
type="text"
@@ -50,7 +50,7 @@
5050
</div>
5151
<div class="mt-6">
5252
<input
53-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
53+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
5454
id="email"
5555
name="email"
5656
type="text"
@@ -61,7 +61,7 @@
6161
</div>
6262
<div class="mt-6">
6363
<select
64-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
64+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
6565
id="subject"
6666
name="subject"
6767
type="text"
@@ -79,7 +79,7 @@
7979

8080
<div class="mt-6">
8181
<textarea
82-
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
82+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
8383
id="message"
8484
name="message"
8585
cols="14"
@@ -97,12 +97,10 @@
9797
py-2
9898
sm:py-2.5
9999
text-white
100-
font-normal
101-
sm:font-medium
102100
bg-indigo-500
103101
hover:bg-indigo-600
104102
rounded-md
105-
focus:ring-1 focus:ring-indigo-900"
103+
focus:ring-1 focus:ring-indigo-900 duration-500"
106104
type="submit"
107105
aria-label="Submit Request"
108106
/>
@@ -118,9 +116,7 @@
118116
sm:px-6
119117
py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
120118
rounded-md
121-
font-normal
122-
sm:font-bold
123-
focus:ring-1 focus:ring-indigo-900"
119+
focus:ring-1 focus:ring-indigo-900 duration-500"
124120
@click="showModal()"
125121
aria-label="Close Modal"
126122
/>

‎src/components/about/AboutCounter.vue

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
33
<!-- About me counters -->
44
<div
5-
class="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
5+
class="font-general-regular container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
66
>
7-
<!-- About me single counter -->
7+
<!-- Years of experience counter -->
88
<div class="mb-20 sm:mb-0">
99
<counter
1010
ref="counter"
@@ -13,16 +13,17 @@
1313
:duration="1"
1414
:autoinit="true"
1515
@finished="alert(`Counting finished!`)"
16-
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
16+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
1717
aria-label="About Status Counter"
1818
/>
1919
<span
2020
class="block text-md text-ternary-dark dark:text-ternary-light"
21-
>Years of experience</span
2221
>
22+
{{ experienceTitle }}
23+
</span>
2324
</div>
2425

25-
<!-- About me single counter -->
26+
<!-- GitHub stars counter -->
2627
<div class="mb-20 sm:mb-0">
2728
<counter
2829
ref="counter"
@@ -32,15 +33,15 @@
3233
suffix="k+"
3334
:autoinit="true"
3435
@finished="alert(`Counting finished!`)"
35-
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
36+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
3637
/>
3738
<span
3839
class="block text-md text-ternary-dark dark:text-ternary-light"
39-
>Stars on GitHub</span
40+
>{{ githubTitle }}</span
4041
>
4142
</div>
4243

43-
<!-- About me single counter -->
44+
<!-- Positive feedback counter -->
4445
<div class="mb-20 sm:mb-0">
4546
<counter
4647
ref="counter"
@@ -50,15 +51,16 @@
5051
suffix="%"
5152
:autoinit="true"
5253
@finished="alert(`Counting finished!`)"
53-
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
54+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
5455
/>
5556
<span
5657
class="block text-md text-ternary-dark dark:text-ternary-light"
57-
>Positive feedback</span
5858
>
59+
{{ feedbackTitle }}
60+
</span>
5961
</div>
6062

61-
<!-- About me single counter -->
63+
<!-- Projects completed counter -->
6264
<div class="mb-20 sm:mb-0">
6365
<counter
6466
ref="counter"
@@ -67,12 +69,13 @@
6769
:duration="1"
6870
:autoinit="true"
6971
@finished="alert(`Counting finished!`)"
70-
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
72+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
7173
/>
7274
<span
7375
class="block text-md text-ternary-dark dark:text-ternary-light"
74-
>Projects completed</span
7576
>
77+
{{ projectsTitle }}
78+
</span>
7679
</div>
7780
</div>
7881
</div>
@@ -84,6 +87,13 @@ export default {
8487
components: {
8588
counter,
8689
},
87-
setup() {},
90+
data: () => {
91+
return {
92+
experienceTitle: 'Years of experience',
93+
githubTitle: 'Stars on GitHub',
94+
feedbackTitle: 'Positive feedback',
95+
projectsTitle: 'Projects completed',
96+
};
97+
},
8898
};
8999
</script>

‎src/components/contact/ContactDetails.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
>
88
Contact details
99
</h2>
10-
<ul class="font-general-medium">
10+
<ul class="font-general-regular">
1111
<li class="flex" v-for="contact in contacts" :key="contact.id">
1212
<i
1313
:data-feather="contact.icon"

0 commit comments

Comments
 (0)