-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworks.html
196 lines (193 loc) · 12.9 KB
/
works.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<html>
<head>
<title>MWRA || Works</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<header class="h-24 sm:h-32 flex items-center z-30 w-full">
<div class="container mx-auto px-6 flex items-center justify-between">
<div class="uppercase text-gray-800 dark:text-white font-black text-3xl flex items-center">
<svg width="25" height="25" viewBox="0 0 1792 1792" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M1664 1504v-768q-32 36-69 66-268 206-426 338-51 43-83 67t-86.5 48.5-102.5 24.5h-2q-48 0-102.5-24.5t-86.5-48.5-83-67q-158-132-426-338-37-30-69-66v768q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm0-1051v-24.5l-.5-13-3-12.5-5.5-9-9-7.5-14-2.5h-1472q-13 0-22.5 9.5t-9.5 22.5q0 168 147 284 193 152 401 317 6 5 35 29.5t46 37.5 44.5 31.5 50.5 27.5 43 9h2q20 0 43-9t50.5-27.5 44.5-31.5 46-37.5 35-29.5q208-165 401-317 54-43 100.5-115.5t46.5-131.5zm128-37v1088q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1472q66 0 113 47t47 113z">
</path>
</svg>
<span class="text-xs ml-3 mt-1">
</span>
</div>
<div class="flex items-center">
<nav class="font-sen text-gray-800 dark:text-white uppercase text-lg lg:flex items-center hidden">
<a href="index.html" class="py-2 px-6 flex hover:text-black">
Portfolio
</a>
<a href="works.html" class="py-2 px-6 flex hover:text-black underline">
Works
</a>
<a href="cv.html" class="py-2 px-6 flex hover:text-black">
CV
</a>
<a href="services.html" class="py-2 px-6 flex hover:text-black">
Services
</a>
</nav>
<button class="lg:hidden flex flex-col ml-4">
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1">
</span>
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1">
</span>
<span class="w-6 h-1 bg-gray-800 dark:bg-white mb-1">
</span>
</button>
</div>
</div>
</header>
<body>
<!-- component -->
<main class="py-4">
<div class="px-4">
<div class="block md:flex justify-between md:-mx-2">
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center"
src="images/sap-em.png"
alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
SAP Encoding Matrix
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
An Offline OS-Agnostic Application that encodes the beneficaries and its roster in the SAC Form
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#electronJS</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#JS</a>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center"
src="images/uctis.png"
alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
UCT IS
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
A Information System of the program's beneficiaries' information with data visualizations
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#dataviz</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#yii2</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#php</a>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center"
src="images/txt4me.png"
alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
Txt4Me SMS Solution
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
Txt4Me is a sms blasting solution aim to reach customers at their fingertips; includes personalized message and named sender id, realtime chat an sms blast.
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#automation</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#php7</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="px-4">
<div class="block md:flex justify-between md:-mx-2">
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center" src="images/txt4me-gateway.png" alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
Txt4Me Gateway
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
An android app designed as a "mediator" in messaging.
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#android</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#gplay</a>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center" src="images/mapernando.png" alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
Mapernando
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
A Mobile Application designed to help you to find the different Government Offices in San Fernando, La Union
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#ios</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#nativescrip</a>
<a class="inline bg-gray-300 py-1 px-2 rounded-full text-xs lowercase text-gray-700"
href="#">#communityapp</a>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 md:mx-2 mb-4 md:mb-0">
<div class="bg-white rounded-lg overflow-hidden shadow relative">
<img class="h-56 w-full object-cover object-center"
src=""
alt="">
<div class="p-4 h-auto md:h-40 lg:h-48">
<a href="#"
class="block text-blue-500 hover:text-blue-600 font-semibold mb-2 text-lg md:text-base lg:text-lg">
Others
</a>
<div class="text-gray-600 text-sm leading-relaxed block md:text-xs lg:text-sm">
- Margin computation <br>
- Fingerprint Attendance and Payroll Management <br>
- Accounting Management <br>
- Client Registration App in Flask <br>
- Smart watermark and image quality assesment in python <br>
- File renaming automation of UCT Beneficiaries' Image Assets <br>
- API Service for the SMS Solution <br>
</div>
<div class="relative mt-2 lg:absolute bottom-0 mb-4 md:hidden lg:block">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>