Skip to content

Commit e41df1b

Browse files
coder-writescoder-writes
committed
some changes
1 parent 2271cb1 commit e41df1b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1131
-1099
lines changed

‎.env.example‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +0,0 @@
1-
# Google OAuth Configuration
2-
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here
3-
4-
# Backend API URL
5-
VITE_BASE_URL=http://localhost:7777

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ DevTinder is a modern, interactive web application that connects developers base
1818
### 🎨 Modern UI/UX
1919
- **Responsive Design**: Mobile-first approach with Tailwind CSS
2020
- **Smooth Animations**: Framer Motion powered transitions and micro-interactions
21+
- **Animated Backgrounds**: CSS-powered animated backgrounds and visual effects
2122
- **Dark Theme**: Professional dark theme optimized for developers
2223

2324
### 📱 Key Pages
@@ -44,6 +45,9 @@ DevTinder is a modern, interactive web application that connects developers base
4445
- **React Icons 5.5.0** - Popular icon library
4546
- **Lucide React 0.525.0** - Beautiful & consistent icons
4647

48+
### 3D Graphics
49+
- **CSS Animations** - Pure CSS-based animated backgrounds and effects
50+
4751
### HTTP & API
4852
- **Axios 1.10.0** - Promise-based HTTP client
4953
- **Centralized API Configuration** - Environment-based URL management
@@ -108,7 +112,7 @@ src/
108112
│ ├── layout/ # Layout and wrapper components
109113
│ ├── profile/ # Profile related components
110114
│ ├── ui/ # Generic UI components
111-
│ └── 3d/ # 3D graphics components
115+
│ └── background/ # Background and visual effect components
112116
├── pages/ # Page components
113117
│ ├── Body.jsx # Main layout wrapper
114118
│ ├── Feed.jsx # Profile swiping interface

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="./src/assets/logo.png" />
5+
<link rel="icon" type="image/svg+xml" href="/src/assets/logo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>DevTinder</title>
88
</head>

‎package-lock.json‎

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

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@react-oauth/google": "^0.12.2",
1413
"@reduxjs/toolkit": "^2.8.2",
1514
"@tailwindcss/vite": "^4.1.11",
1615
"axios": "^1.10.0",

‎public/_redirects‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
/* /index.html 200

‎public/netlify.toml‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
[[redirects]]
2-
from = "/*"
3-
to = "/index.html"
4-
status = 200

‎public/vercel.json‎

Whitespace-only changes.

‎src/App.css‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,244 @@
1+
/* Global Styles for Smooth UI */
2+
*, *::before, *::after {
3+
box-sizing: border-box;
4+
}
5+
16
body, html, #root {
27
margin: 0;
38
padding: 0;
49
height: 100%;
10+
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11+
scroll-behavior: smooth;
12+
overflow-x: hidden;
13+
}
14+
15+
/* Smooth scrollbar */
16+
::-webkit-scrollbar {
17+
width: 8px;
18+
}
19+
20+
::-webkit-scrollbar-track {
21+
background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(31, 41, 55, 0.8));
22+
border-radius: 10px;
23+
}
24+
25+
::-webkit-scrollbar-thumb {
26+
background: linear-gradient(135deg, #ff512f, #dd2476);
27+
border-radius: 10px;
28+
transition: all 0.3s ease;
29+
}
30+
31+
::-webkit-scrollbar-thumb:hover {
32+
background: linear-gradient(135deg, #ff6b4a, #e53e3e);
33+
transform: scale(1.1);
34+
}
35+
36+
/* Global smooth transitions */
37+
* {
38+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
39+
}
40+
41+
/* Improved focus states */
42+
button:focus-visible,
43+
input:focus-visible,
44+
select:focus-visible,
45+
textarea:focus-visible {
46+
outline: 2px solid rgba(236, 72, 153, 0.6);
47+
outline-offset: 2px;
48+
box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
49+
}
50+
51+
/* Enhanced button hover effects */
52+
button {
53+
cursor: pointer;
54+
border: none;
55+
outline: none;
56+
transform-origin: center;
57+
will-change: transform;
58+
}
59+
60+
button:hover {
61+
transform: translateY(-1px);
62+
}
63+
64+
button:active {
65+
transform: translateY(0);
66+
}
67+
68+
/* Smooth image loading */
69+
img {
70+
transition: all 0.3s ease;
71+
will-change: transform;
72+
}
73+
74+
img:hover {
75+
transform: scale(1.02);
76+
}
77+
78+
/* Loading animation keyframes */
79+
@keyframes pulse {
80+
0%, 100% {
81+
opacity: 1;
82+
}
83+
50% {
84+
opacity: 0.5;
85+
}
86+
}
87+
88+
@keyframes slideInFromRight {
89+
0% {
90+
transform: translateX(100%);
91+
opacity: 0;
92+
}
93+
100% {
94+
transform: translateX(0);
95+
opacity: 1;
96+
}
97+
}
98+
99+
@keyframes slideInFromLeft {
100+
0% {
101+
transform: translateX(-100%);
102+
opacity: 0;
103+
}
104+
100% {
105+
transform: translateX(0);
106+
opacity: 1;
107+
}
108+
}
109+
110+
@keyframes fadeInUp {
111+
0% {
112+
transform: translateY(30px);
113+
opacity: 0;
114+
}
115+
100% {
116+
transform: translateY(0);
117+
opacity: 1;
118+
}
119+
}
120+
121+
@keyframes bounceIn {
122+
0%, 20%, 40%, 60%, 80%, 100% {
123+
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
124+
}
125+
0% {
126+
opacity: 0;
127+
transform: scale3d(.3, .3, .3);
128+
}
129+
20% {
130+
transform: scale3d(1.1, 1.1, 1.1);
131+
}
132+
40% {
133+
transform: scale3d(.9, .9, .9);
134+
}
135+
60% {
136+
opacity: 1;
137+
transform: scale3d(1.03, 1.03, 1.03);
138+
}
139+
80% {
140+
transform: scale3d(.97, .97, .97);
141+
}
142+
100% {
143+
opacity: 1;
144+
transform: scale3d(1, 1, 1);
145+
}
146+
}
147+
148+
/* Utility animation classes */
149+
.animate-pulse {
150+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
151+
}
152+
153+
.animate-slide-in-right {
154+
animation: slideInFromRight 0.5s ease-out;
155+
}
156+
157+
.animate-slide-in-left {
158+
animation: slideInFromLeft 0.5s ease-out;
159+
}
160+
161+
.animate-fade-in-up {
162+
animation: fadeInUp 0.6s ease-out;
163+
}
164+
165+
.animate-bounce-in {
166+
animation: bounceIn 0.8s ease-out;
167+
}
168+
169+
/* Glass morphism effect */
170+
.glass {
171+
background: rgba(255, 255, 255, 0.05);
172+
backdrop-filter: blur(20px);
173+
border: 1px solid rgba(255, 255, 255, 0.1);
174+
border-radius: 16px;
175+
}
176+
177+
/* Gradient text effect */
178+
.gradient-text {
179+
background: linear-gradient(135deg, #ff512f, #dd2476, #ffd93d);
180+
background-size: 300% 300%;
181+
background-clip: text;
182+
-webkit-background-clip: text;
183+
color: transparent;
184+
animation: gradientShift 3s ease infinite;
185+
}
186+
187+
@keyframes gradientShift {
188+
0%, 100% {
189+
background-position: 0% 50%;
190+
}
191+
50% {
192+
background-position: 100% 50%;
193+
}
194+
}
195+
196+
/* Enhanced card styles */
197+
.card {
198+
background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8));
199+
backdrop-filter: blur(20px);
200+
border: 1px solid rgba(255, 255, 255, 0.1);
201+
border-radius: 20px;
202+
box-shadow: 0 8px 32px 0 rgba(236, 72, 153, 0.2);
203+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
204+
}
205+
206+
.card:hover {
207+
transform: translateY(-4px);
208+
box-shadow: 0 20px 50px 0 rgba(236, 72, 153, 0.3);
209+
border-color: rgba(236, 72, 153, 0.3);
210+
}
211+
212+
/* Responsive typography */
213+
@media (max-width: 640px) {
214+
html {
215+
font-size: 14px;
216+
}
217+
}
218+
219+
@media (min-width: 641px) and (max-width: 768px) {
220+
html {
221+
font-size: 15px;
222+
}
223+
}
224+
225+
@media (min-width: 769px) {
226+
html {
227+
font-size: 16px;
228+
}
229+
}
230+
231+
/* Performance optimizations */
232+
.will-change-transform {
233+
will-change: transform;
234+
}
235+
236+
.will-change-opacity {
237+
will-change: opacity;
238+
}
239+
240+
.gpu-accelerate {
241+
transform: translateZ(0);
242+
backface-visibility: hidden;
243+
perspective: 1000px;
5244
}

‎src/App.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@ import Settings from './pages/Settings.jsx';
1313
import Connections from './pages/Connections.jsx';
1414
import Requests from './pages/Requests.jsx';
1515
import NewFeature from './pages/NewFeature.jsx';
16-
import { GoogleOAuthProvider } from '@react-oauth/google';
1716
const App = () => {
1817
return (
1918
<>
2019
<Provider store = {store}>
21-
<GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
20+
2221
<BrowserRouter>
2322
<div className="min-h-screen flex flex-col bg-gradient-to-br from-[#232526] to-[#414345] text-white">
2423
<main className="flex-grow">
@@ -40,7 +39,6 @@ const App = () => {
4039
</main>
4140
</div>
4241
</BrowserRouter>
43-
</GoogleOAuthProvider>
4442
</Provider>
4543
</>
4644
);

0 commit comments

Comments
 (0)