Skip to content

Commit fb1e138

Browse files
nazmeaiman97nazmeaiman97
committed
update portfolio
1 parent 11da6b1 commit fb1e138

File tree

9 files changed

+356
-337
lines changed

9 files changed

+356
-337
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuejs-tailwindcss-portfolio",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",

‎src/assets/images/besttrack.png

755 KB
Loading

‎src/assets/images/jejudatahub.png

694 KB
Loading

‎src/assets/images/profile.jpeg

-29.7 KB
Binary file not shown.

‎src/components/about/AboutClients.vue

Lines changed: 81 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,89 @@
11
<script>
2-
import AboutClientSingle from './AboutClientSingle.vue';
2+
import AboutClientSingle from "./AboutClientSingle.vue";
33
44
export default {
5-
components: {
6-
AboutClientSingle,
7-
},
8-
data: () => {
9-
return {
10-
clientsHeading: 'Some of the frameworks/libraries I have experienced with',
11-
clients: [
12-
{
13-
id: 1,
14-
title: 'Laravel',
15-
img: 'https://laravel.com/img/logotype.min.svg',
16-
},
17-
{
18-
id: 2,
19-
title: 'JQuery',
20-
img: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/JQuery-Logo.svg',
21-
},
22-
{
23-
id: 3,
24-
title: 'Vue js',
25-
img: 'https://seeklogo.com/images/V/vuejs-logo-17D586B587-seeklogo.com.png',
26-
},
27-
{
28-
id: 4,
29-
title: 'React Native',
30-
img: 'https://seeklogo.com/images/R/react-native-logo-221C671C70-seeklogo.com.png',
31-
},
32-
{
33-
id: 5,
34-
title: 'Tailwind',
35-
img: 'https://seeklogo.com/images/T/tailwind-css-logo-5AD4175897-seeklogo.com.png',
36-
},
37-
{
38-
id: 6,
39-
title: 'Vuetify',
40-
img: 'https://iconape.com/wp-content/png_logo_vector/vuetify-logo.png',
41-
},
42-
{
43-
id: 7,
44-
title: 'Quasar',
45-
img: 'https://camo.githubusercontent.com/44def50d1ff358d19bafe61e56fe9ff486fdf9d3b3a41a90417183a6ff4b097e/68747470733a2f2f63646e2e7261776769742e636f6d2f7175617361726672616d65776f726b2f7175617361722d6172742f38363363313462642f646973742f7376672f7175617361722d6c6f676f2d66756c6c2d696e6c696e652e737667',
46-
},
47-
{
48-
id: 7,
49-
title: 'Capacitor',
50-
img: 'https://ionic.zone/capacitor/images/capacitor-logo.jpg',
51-
},
52-
],
53-
};
54-
},
5+
components: {
6+
AboutClientSingle,
7+
},
8+
data: () => {
9+
return {
10+
clientsHeading:
11+
"Some of the frameworks/libraries I have experienced with",
12+
clients: [
13+
{
14+
id: 1,
15+
title: "Laravel",
16+
img: "https://laravel.com/img/logotype.min.svg",
17+
},
18+
{
19+
id: 2,
20+
title: "JQuery",
21+
img: "https://upload.wikimedia.org/wikipedia/commons/f/fd/JQuery-Logo.svg",
22+
},
23+
{
24+
id: 3,
25+
title: "Vue js",
26+
img: "https://seeklogo.com/images/V/vuejs-logo-17D586B587-seeklogo.com.png",
27+
},
28+
{
29+
id: 4,
30+
title: "React Native",
31+
img: "https://seeklogo.com/images/R/react-native-logo-221C671C70-seeklogo.com.png",
32+
},
33+
{
34+
id: 5,
35+
title: "Tailwind",
36+
img: "https://seeklogo.com/images/T/tailwind-css-logo-5AD4175897-seeklogo.com.png",
37+
},
38+
{
39+
id: 6,
40+
title: "Vuetify",
41+
img: "https://iconape.com/wp-content/png_logo_vector/vuetify-logo.png",
42+
},
43+
{
44+
id: 7,
45+
title: "Quasar",
46+
img: "https://camo.githubusercontent.com/44def50d1ff358d19bafe61e56fe9ff486fdf9d3b3a41a90417183a6ff4b097e/68747470733a2f2f63646e2e7261776769742e636f6d2f7175617361726672616d65776f726b2f7175617361722d6172742f38363363313462642f646973742f7376672f7175617361722d6c6f676f2d66756c6c2d696e6c696e652e737667",
47+
},
48+
{
49+
id: 8,
50+
title: "Capacitor",
51+
img: "https://ionic.zone/capacitor/images/capacitor-logo.jpg",
52+
},
53+
{
54+
id: 9,
55+
title: "Pinia",
56+
img: "https://camo.githubusercontent.com/6a89c40d54fde3f7c40b827e46081e4057633764c07bc9bca4ed513689eb2a8e/68747470733a2f2f70696e69612e7675656a732e6f72672f6c6f676f2e737667",
57+
},
58+
{
59+
id: 10,
60+
title: "Element Plus",
61+
img: "https://avatars.githubusercontent.com/u/68583457?s=200&v=4",
62+
},
63+
{
64+
id: 11,
65+
title: "Nuxt",
66+
img: "https://nuxtjs.org/design-kit/colored-logo.svg",
67+
},
68+
],
69+
};
70+
},
5571
};
5672
</script>
5773

5874
<template>
59-
<div class="mt-10 sm:mt-20">
60-
<p
61-
class="font-general-medium text-2xl sm:text-3xl text-primary-dark dark:text-primary-light"
62-
>
63-
{{ clientsHeading }}
64-
</p>
65-
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
66-
<AboutClientSingle
67-
v-for="client in clients"
68-
:key="client.id"
69-
:client="client"
70-
/>
71-
</div>
72-
</div>
75+
<div class="mt-10 sm:mt-20">
76+
<p
77+
class="font-general-medium text-2xl sm:text-3xl text-primary-dark dark:text-primary-light"
78+
>
79+
{{ clientsHeading }}
80+
</p>
81+
<div class="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
82+
<AboutClientSingle
83+
v-for="client in clients"
84+
:key="client.id"
85+
:client="client"
86+
/>
87+
</div>
88+
</div>
7389
</template>

‎src/components/about/AboutCounter.vue

Lines changed: 67 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,76 @@
11
<script>
2-
import counter from 'vue3-autocounter';
2+
import counter from "vue3-autocounter";
33
export default {
4-
components: {
5-
counter,
6-
},
7-
data: () => {
8-
return {
9-
experienceTitle: 'Years of experience',
10-
programmingLanguage: 'Programming Languages',
11-
projectsTitle: 'Projects completed',
12-
};
13-
},
4+
components: {
5+
counter,
6+
},
7+
data: () => {
8+
return {
9+
experienceTitle: "Years of experience",
10+
programmingLanguage: "Programming Languages",
11+
projectsTitle: "Projects completed",
12+
};
13+
},
1414
};
1515
</script>
1616

1717
<template>
18-
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
19-
<!-- About me counters -->
20-
<div
21-
class="font-general-regular container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
22-
>
23-
<!-- Years of experience counter -->
24-
<div class="mb-20 sm:mb-0">
25-
<counter
26-
ref="counter"
27-
:startAmount="0"
28-
:endAmount="2"
29-
:duration="1"
30-
:autoinit="true"
31-
@finished="alert(`Counting finished!`)"
32-
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
33-
aria-label="About Status Counter"
34-
/>
35-
<span
36-
class="block text-md text-ternary-dark dark:text-ternary-light"
37-
>
38-
{{ experienceTitle }}
39-
</span>
40-
</div>
18+
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
19+
<!-- About me counters -->
20+
<div
21+
class="font-general-regular container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
22+
>
23+
<!-- Years of experience counter -->
24+
<div class="mb-20 sm:mb-0">
25+
<counter
26+
ref="counter"
27+
:startAmount="0"
28+
:endAmount="2"
29+
:duration="1"
30+
:autoinit="true"
31+
@finished="alert(`Counting finished!`)"
32+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
33+
aria-label="About Status Counter"
34+
/>
35+
<span class="block text-md text-ternary-dark dark:text-ternary-light">
36+
{{ experienceTitle }}
37+
</span>
38+
</div>
4139

40+
<!-- Positive feedback counter -->
41+
<div class="mb-20 sm:mb-0">
42+
<counter
43+
ref="counter"
44+
:startAmount="0"
45+
:endAmount="5"
46+
:duration="1"
47+
:autoinit="true"
48+
@finished="alert(`Counting finished!`)"
49+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
50+
/>
51+
<span class="block text-md text-ternary-dark dark:text-ternary-light">
52+
{{ programmingLanguage }}
53+
</span>
54+
<p class="text-ternary-dark dark:text-ternary-light">
55+
PHP, SQL, Javascript, Typescript
56+
</p>
57+
</div>
4258

43-
<!-- Positive feedback counter -->
44-
<div class="mb-20 sm:mb-0">
45-
<counter
46-
ref="counter"
47-
:startAmount="0"
48-
:endAmount="3"
49-
:duration="1"
50-
:autoinit="true"
51-
@finished="alert(`Counting finished!`)"
52-
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
53-
/>
54-
<span
55-
class="block text-md text-ternary-dark dark:text-ternary-light"
56-
>
57-
{{ programmingLanguage }}
58-
</span>
59-
<p>PHP, SQL, Javascript</p>
60-
</div>
61-
62-
<!-- Projects completed counter -->
63-
<div class="mb-20 sm:mb-0">
64-
<counter
65-
ref="counter"
66-
:startAmount="0"
67-
:endAmount="5"
68-
:duration="1"
69-
:autoinit="true"
70-
@finished="alert(`Counting finished!`)"
71-
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
72-
/>
73-
<span
74-
class="block text-md text-ternary-dark dark:text-ternary-light"
75-
>
76-
{{ projectsTitle }}
77-
</span>
78-
</div>
79-
</div>
80-
</div>
59+
<!-- Projects completed counter -->
60+
<div class="mb-20 sm:mb-0">
61+
<counter
62+
ref="counter"
63+
:startAmount="0"
64+
:endAmount="7"
65+
:duration="1"
66+
:autoinit="true"
67+
@finished="alert(`Counting finished!`)"
68+
class="font-general-medium text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
69+
/>
70+
<span class="block text-md text-ternary-dark dark:text-ternary-light">
71+
{{ projectsTitle }}
72+
</span>
73+
</div>
74+
</div>
75+
</div>
8176
</template>

‎src/components/about/AboutMe.vue

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,40 @@
11
<script>
22
export default {
3-
setup() {
4-
return {
5-
bios: [
6-
{
7-
id: 1,
8-
bio:
9-
'Good day, my name is Nazme Aiman bin Yunus, 25 years old, a full stack engineer who is currently a freelancer. I have a diploma in Computer Science and a Bachelor’s Degree of Information Technology majoring in Business Computing. I have 2 years of experiences in sofware engineering field. ',
10-
},
11-
{
12-
id: 2,
13-
bio:
14-
'For the time being i am focusing on my start-up which is called Go-Tadika. I am developing this project to enhance my programming, logical, communications skill. For further information on this project, visit <a href="https://gotadika.com/" target="_blank" class="text-indigo-500"> Go-Tadika</a>',
15-
},
16-
],
17-
};
18-
},
3+
setup() {
4+
return {
5+
bios: [
6+
{
7+
id: 1,
8+
bio: "Good day, my name is Nazme Aiman bin Yunus, 26 years old (1997), a full stack engineer who is currently a freelancer. I have a diploma in Computer Science and a Bachelor’s Degree of Information Technology majoring in Business Computing. I have 3 years of experiences in sofware engineering field. ",
9+
},
10+
],
11+
};
12+
},
1913
};
2014
</script>
2115

2216
<template>
23-
<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
24-
<!-- About profile image -->
25-
<div class="w-full sm:w-1/4 mb-7 sm:mb-0">
26-
<img
27-
src="@/assets/images/profilepicture.png"
28-
class="rounded-xl w-96"
29-
alt=""
30-
/>
31-
</div>
17+
<div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
18+
<!-- About profile image -->
19+
<div
20+
class="w-full flex place-content-center sm:w-1/4 xs:w-1/4 mb-7 sm:mb-0"
21+
>
22+
<img
23+
src="@/assets/images/profilepicture.png"
24+
class="rounded-xl w-40 sm:w-52 sm:h-40 md:h-60"
25+
alt=""
26+
/>
27+
</div>
3228

33-
<!-- About details -->
34-
<div class="w-full sm:w-3/4 text-left">
35-
<div
36-
v-for="bio in bios"
37-
:key="bio.id"
38-
class="font-general-regular mb-4 text-ternary-dark dark:text-ternary-light text-lg"
39-
>
40-
<p v-html="bio.bio"></p>
41-
</div>
42-
</div>
43-
</div>
29+
<!-- About details -->
30+
<div class="w-full sm:w-3/4 text-center">
31+
<div
32+
v-for="bio in bios"
33+
:key="bio.id"
34+
class="font-general-regular mb-4 text-ternary-dark dark:text-ternary-light text-lg"
35+
>
36+
<p v-html="bio.bio"></p>
37+
</div>
38+
</div>
39+
</div>
4440
</template>

0 commit comments

Comments
 (0)