Skip to content

Refactoring #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 22, 2022
Merged

Refactoring #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bacf3e9
Modal fonts updates
realstoman Jan 22, 2022
7e29f95
Contact form and contact details fonts refactoring
realstoman Jan 22, 2022
77151bb
Footer copyright refactoring
realstoman Jan 22, 2022
f2e3ef9
About counter refactoring
realstoman Jan 22, 2022
62f12c6
All buttons transition duration
realstoman Jan 22, 2022
301c1bd
Single project refactoring
realstoman Jan 22, 2022
9857689
Buttons refactoring
realstoman Jan 22, 2022
61ffe5a
Projects filer refactoring
realstoman Jan 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 8 additions & 12 deletions src/components/HireMeModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<!-- Hire me modal -->
<transition name="fade">
<div v-show="modal" class="font-general-medium fixed inset-0 z-30">
<div v-show="modal" class="font-general-regular fixed inset-0 z-30">
<!-- Modal body background as backdrop -->
<div
v-show="modal"
Expand Down Expand Up @@ -29,7 +29,7 @@
What project are you looking for?
</h5>
<button
class="px-4 font-bold text-primary-dark dark:text-primary-light"
class="px-4 text-primary-dark dark:text-primary-light"
@click="showModal()"
>
<i data-feather="x"></i>
Expand All @@ -39,7 +39,7 @@
<form class="max-w-xl m-4 text-left">
<div class="mt-0">
<input
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"
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"
id="name"
name="name"
type="text"
Expand All @@ -50,7 +50,7 @@
</div>
<div class="mt-6">
<input
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"
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"
id="email"
name="email"
type="text"
Expand All @@ -61,7 +61,7 @@
</div>
<div class="mt-6">
<select
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"
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"
id="subject"
name="subject"
type="text"
Expand All @@ -79,7 +79,7 @@

<div class="mt-6">
<textarea
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"
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"
id="message"
name="message"
cols="14"
Expand All @@ -97,12 +97,10 @@
py-2
sm:py-2.5
text-white
font-normal
sm:font-medium
bg-indigo-500
hover:bg-indigo-600
rounded-md
focus:ring-1 focus:ring-indigo-900"
focus:ring-1 focus:ring-indigo-900 duration-500"
type="submit"
aria-label="Submit Request"
/>
Expand All @@ -118,9 +116,7 @@
sm:px-6
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
rounded-md
font-normal
sm:font-bold
focus:ring-1 focus:ring-indigo-900"
focus:ring-1 focus:ring-indigo-900 duration-500"
@click="showModal()"
aria-label="Close Modal"
/>
Expand Down
38 changes: 24 additions & 14 deletions src/components/about/AboutCounter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
<!-- About me counters -->
<div
class="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
class="font-general-regular container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
>
<!-- About me single counter -->
<!-- Years of experience counter -->
<div class="mb-20 sm:mb-0">
<counter
ref="counter"
Expand All @@ -13,16 +13,17 @@
:duration="1"
:autoinit="true"
@finished="alert(`Counting finished!`)"
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
aria-label="About Status Counter"
/>
<span
class="block text-md text-ternary-dark dark:text-ternary-light"
>Years of experience</span
>
{{ experienceTitle }}
</span>
</div>

<!-- About me single counter -->
<!-- GitHub stars counter -->
<div class="mb-20 sm:mb-0">
<counter
ref="counter"
Expand All @@ -32,15 +33,15 @@
suffix="k+"
:autoinit="true"
@finished="alert(`Counting finished!`)"
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
/>
<span
class="block text-md text-ternary-dark dark:text-ternary-light"
>Stars on GitHub</span
>{{ githubTitle }}</span
>
</div>

<!-- About me single counter -->
<!-- Positive feedback counter -->
<div class="mb-20 sm:mb-0">
<counter
ref="counter"
Expand All @@ -50,15 +51,16 @@
suffix="%"
:autoinit="true"
@finished="alert(`Counting finished!`)"
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
/>
<span
class="block text-md text-ternary-dark dark:text-ternary-light"
>Positive feedback</span
>
{{ feedbackTitle }}
</span>
</div>

<!-- About me single counter -->
<!-- Projects completed counter -->
<div class="mb-20 sm:mb-0">
<counter
ref="counter"
Expand All @@ -67,12 +69,13 @@
:duration="1"
:autoinit="true"
@finished="alert(`Counting finished!`)"
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
/>
<span
class="block text-md text-ternary-dark dark:text-ternary-light"
>Projects completed</span
>
{{ projectsTitle }}
</span>
</div>
</div>
</div>
Expand All @@ -84,6 +87,13 @@ export default {
components: {
counter,
},
setup() {},
data: () => {
return {
experienceTitle: 'Years of experience',
githubTitle: 'Stars on GitHub',
feedbackTitle: 'Positive feedback',
projectsTitle: 'Projects completed',
};
},
};
</script>
2 changes: 1 addition & 1 deletion src/components/contact/ContactDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
>
Contact details
</h2>
<ul class="font-general-medium">
<ul class="font-general-regular">
<li class="flex" v-for="contact in contacts" :key="contact.id">
<i
:data-feather="contact.icon"
Expand Down
Loading