Hugging Face's logo

Spaces:
Mpho-AI
/
personal-project
Running

App Files Community
Mpho-AI commited on
Commit
3c92477
·
verified ·
1 Parent(s): 51492f5

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +153 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Personal Project
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: personal-project
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,153 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cecil Garapo - Case Studies</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .case-study-card {
11
+ transition: all 0.3s ease;
12
+ transform-style: preserve-3d;
13
+ }
14
+ .case-study-card:hover {
15
+ transform: translateY(-10px) scale(1.02);
16
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
20
+ }
21
+ .project-title {
22
+ background-clip: text;
23
+ -webkit-background-clip: text;
24
+ color: transparent;
25
+ background-image: linear-gradient(to right, #4f46e5, #10b981);
26
+ }
27
+ .animated-underline {
28
+ position: relative;
29
+ display: inline-block;
30
+ }
31
+ .animated-underline::after {
32
+ content: '';
33
+ position: absolute;
34
+ width: 100%;
35
+ height: 3px;
36
+ bottom: -5px;
37
+ left: 0;
38
+ background: linear-gradient(to right, #4f46e5, #10b981);
39
+ transform: scaleX(0);
40
+ transform-origin: bottom right;
41
+ transition: transform 0.3s ease-out;
42
+ }
43
+ .animated-underline:hover::after {
44
+ transform: scaleX(1);
45
+ transform-origin: bottom left;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="gradient-bg min-h-screen font-sans antialiased">
50
+ <div class="container mx-auto px-4 py-12">
51
+ <!-- Header -->
52
+ <header class="text-center mb-16">
53
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 project-title">Case Studies</h1>
54
+ <p class="text-gray-600 max-w-2xl mx-auto">Exploring innovative solutions and creative approaches to modern challenges</p>
55
+ <div class="mt-8">
56
+ <span class="inline-block h-1 w-20 bg-indigo-500 rounded-full"></span>
57
+ <span class="inline-block h-1 w-8 bg-indigo-500 rounded-full mx-1"></span>
58
+ <span class="inline-block h-1 w-4 bg-indigo-500 rounded-full"></span>
59
+ </div>
60
+ </header>
61
+
62
+ <!-- Case Studies Grid -->
63
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
64
+ <!-- Firehook Card -->
65
+ <div class="case-study-card bg-white rounded-xl overflow-hidden shadow-lg relative group">
66
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-emerald-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
67
+ <div class="p-6 h-full flex flex-col">
68
+ <div class="flex items-center mb-4">
69
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
70
+ <i class="fas fa-campground text-blue-500 text-xl"></i>
71
+ </div>
72
+ <span class="text-xs font-semibold px-3 py-1 bg-blue-100 text-blue-800 rounded-full">OUTDOORS</span>
73
+ </div>
74
+ <h3 class="text-2xl font-bold mb-2">Firehook</h3>
75
+ <p class="text-gray-600 mb-4 flex-grow">The ultimate outdoor sportsman utility application built to foster a network of like minded individuals who engage in outdoor sports.</p>
76
+ <a href="https://cecilgarapo.com/portfolio/firehook/" class="animated-underline font-medium text-indigo-600 inline-block mt-auto">
77
+ View Case Study
78
+ <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
79
+ </a>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- NFT Marketplace Card -->
84
+ <div class="case-study-card bg-white rounded-xl overflow-hidden shadow-lg relative group">
85
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
86
+ <div class="p-6 h-full flex flex-col">
87
+ <div class="flex items-center mb-4">
88
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
89
+ <i class="fas fa-coins text-purple-500 text-xl"></i>
90
+ </div>
91
+ <span class="text-xs font-semibold px-3 py-1 bg-purple-100 text-purple-800 rounded-full">BLOCKCHAIN</span>
92
+ </div>
93
+ <h3 class="text-2xl font-bold mb-2">NFT Marketplace</h3>
94
+ <p class="text-gray-600 mb-4 flex-grow">The Creator Meets The Collector - A platform bridging artists and collectors in the digital art space.</p>
95
+ <a href="https://cecilgarapo.com/portfolio/nft-marketplace/" class="animated-underline font-medium text-purple-600 inline-block mt-auto">
96
+ View Case Study
97
+ <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- DreamWorth Card -->
103
+ <div class="case-study-card bg-white rounded-xl overflow-hidden shadow-lg relative group">
104
+ <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-red-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
105
+ <div class="p-6 h-full flex flex-col">
106
+ <div class="flex items-center mb-4">
107
+ <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mr-4">
108
+ <i class="fas fa-lightbulb text-amber-500 text-xl"></i>
109
+ </div>
110
+ <span class="text-xs font-semibold px-3 py-1 bg-amber-100 text-amber-800 rounded-full">INNOVATION</span>
111
+ </div>
112
+ <h3 class="text-2xl font-bold mb-2">DreamWorth</h3>
113
+ <p class="text-gray-600 mb-4 flex-grow">...embrace the unusual - A platform celebrating unconventional ideas and creative solutions.</p>
114
+ <a href="https://cecilgarapo.com/portfolio/dreamworth/" class="animated-underline font-medium text-amber-600 inline-block mt-auto">
115
+ View Case Study
116
+ <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
117
+ </a>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Footer -->
123
+ <footer class="mt-20 text-center text-gray-500 text-sm">
124
+ <p>Published on <time datetime="2021-03-23T15:18:31+00:00">March 23, 2021</time></p>
125
+ <p class="mt-2">© 2021 Cecil Garapo. All rights reserved.</p>
126
+ <div class="flex justify-center space-x-4 mt-4">
127
+ <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors">
128
+ <i class="fab fa-twitter"></i>
129
+ </a>
130
+ <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors">
131
+ <i class="fab fa-linkedin"></i>
132
+ </a>
133
+ <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors">
134
+ <i class="fab fa-dribbble"></i>
135
+ </a>
136
+ </div>
137
+ </footer>
138
+ </div>
139
+
140
+ <script>
141
+ // Simple animation on page load
142
+ document.addEventListener('DOMContentLoaded', () => {
143
+ const cards = document.querySelectorAll('.case-study-card');
144
+ cards.forEach((card, index) => {
145
+ setTimeout(() => {
146
+ card.style.opacity = '1';
147
+ card.style.transform = 'translateY(0)';
148
+ }, 150 * index);
149
+ });
150
+ });
151
+ </script>
152
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mpho-AI/personal-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
153
+ </html>