Skip to content

Commit 5a3df73

Browse files
coder-writescoder-writes
committed
whole file structure changed
1 parent e41df1b commit 5a3df73

Some content is hidden

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

42 files changed

+665
-1180
lines changed

‎.env.example‎

Whitespace-only changes.

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +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
21+
- **3D Elements**: Interactive 3D components using React Three Fiber
2222
- **Dark Theme**: Professional dark theme optimized for developers
2323

2424
### 📱 Key Pages
@@ -46,7 +46,9 @@ DevTinder is a modern, interactive web application that connects developers base
4646
- **Lucide React 0.525.0** - Beautiful & consistent icons
4747

4848
### 3D Graphics
49-
- **CSS Animations** - Pure CSS-based animated backgrounds and effects
49+
- **React Three Fiber 9.2.0** - React renderer for Three.js
50+
- **React Three Drei 10.4.2** - Useful helpers for R3F
51+
- **Three.js 0.178.0** - 3D graphics library
5052

5153
### HTTP & API
5254
- **Axios 1.10.0** - Promise-based HTTP client
@@ -63,7 +65,6 @@ DevTinder is a modern, interactive web application that connects developers base
6365

6466
## 🚀 Getting Started
6567

66-
6768
### Prerequisites
6869
- Node.js (v18 or higher)
6970
- npm or yarn package manager
@@ -74,7 +75,6 @@ DevTinder is a modern, interactive web application that connects developers base
7475
```bash
7576
git clone https://github.com/your-username/devtinder-frontend.git
7677
cd devtinder-frontend
77-
Also Start you Backend Server also you Can find it here https://github.com/coder-writes/dev-tinder
7878
```
7979

8080
2. **Install dependencies**
@@ -112,7 +112,7 @@ src/
112112
│ ├── layout/ # Layout and wrapper components
113113
│ ├── profile/ # Profile related components
114114
│ ├── ui/ # Generic UI components
115-
│ └── background/ # Background and visual effect components
115+
│ └── 3d/ # 3D graphics components
116116
├── pages/ # Page components
117117
│ ├── Body.jsx # Main layout wrapper
118118
│ ├── Feed.jsx # Profile swiping interface

‎index.html‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,37 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
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+
6+
<!-- Favicon -->
7+
<link rel="icon" type="image/svg+xml" href="/src/assets/code-svgrepo-com.svg" />
8+
9+
<!-- Viewport for Responsive Design -->
610
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>DevTinder</title>
11+
12+
<!-- Primary Meta Tags -->
13+
<title>DevTinder — Connect With Like-Minded Developers</title>
14+
<meta name="title" content="DevTinder — Connect With Like-Minded Developers" />
15+
<meta name="description" content="DevTinder helps developers connect, collaborate, and build amazing things together. Join a vibrant tech community today!" />
16+
<meta name="keywords" content="DevTinder, developer networking, coding partners, tech matchmaking, developer community" />
17+
<meta name="author" content="DevTinder Team" />
18+
19+
<!-- Open Graph / Facebook -->
20+
<meta property="og:type" content="website" />
21+
<meta property="og:url" content="https://devtinder.com/" />
22+
<meta property="og:title" content="DevTinder — Connect With Like-Minded Developers" />
23+
<meta property="og:description" content="Find your perfect coding partner on DevTinder. Collaborate, learn, and grow together." />
24+
<meta property="og:image" content="https://devtinder.com/preview-image.png" />
25+
26+
<!-- Twitter -->
27+
<meta property="twitter:card" content="summary_large_image" />
28+
<meta property="twitter:url" content="https://devtinder.com/" />
29+
<meta property="twitter:title" content="DevTinder — Connect With Like-Minded Developers" />
30+
<meta property="twitter:description" content="Join a thriving community of developers looking to collaborate and innovate together." />
31+
<meta property="twitter:image" content="https://devtinder.com/preview-image.png" />
32+
33+
<!-- Canonical -->
34+
<link rel="canonical" href="https://devtinder.com/" />
835
</head>
936
<body>
1037
<div id="root"></div>

‎public/_redirects‎

Whitespace-only changes.

‎public/netlify.toml‎

Whitespace-only changes.

‎public/vercel.json‎

Whitespace-only changes.

‎src/App.css‎

Lines changed: 0 additions & 239 deletions
Original file line numberDiff line numberDiff line change
@@ -1,244 +1,5 @@
1-
/* Global Styles for Smooth UI */
2-
*, *::before, *::after {
3-
box-sizing: border-box;
4-
}
5-
61
body, html, #root {
72
margin: 0;
83
padding: 0;
94
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;
2445
}

0 commit comments

Comments
 (0)