Skip to content

Commit c37be9c

Browse files
devnamdev2003devnamdev2003
committed
add rd fd calculator
1 parent 78a3bd4 commit c37be9c

2 files changed

Lines changed: 881 additions & 0 deletions

File tree

‎public/link.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Links</title>
8+
<meta name="description"
9+
content="ExWise is a mobile-first, privacy-focused expense tracker app built with Angular and Tailwind. Track daily expenses, set budgets, and analyze spending habits locally without a server.">
10+
<meta name="keywords"
11+
content="expense tracker, finance app, budget planner, personal finance, angular app, mobile-first, localstorage, privacy focused, exwise, offline finance, pwa">
12+
<meta name="author" content="devnamdev">
13+
<meta name="robots" content="index, follow">
14+
<link rel="canonical" href="https://exwise.vercel.app/">
15+
16+
<!-- Open Graph / Facebook -->
17+
<meta property="og:type" content="website">
18+
<meta property="og:url" content="https://exwise.vercel.app/">
19+
<meta property="og:title" content="ExWise - Private Mobile Expense Tracker">
20+
<meta property="og:description"
21+
content="Stop playing hide and seek with your money. ExWise is a secure, offline-first expense tracker that keeps your financial data private on your device.">
22+
<meta property="og:image" content="https://exwise.vercel.app/images/share.png">
23+
24+
<!-- Twitter -->
25+
<meta property="twitter:card" content="summary_large_image">
26+
<meta property="twitter:url" content="https://exwise.vercel.app/">
27+
<meta property="twitter:title" content="ExWise - Private Mobile Expense Tracker">
28+
<meta property="twitter:description"
29+
content="Stop playing hide and seek with your money. ExWise is a secure, offline-first expense tracker that keeps your financial data private.">
30+
<meta property="twitter:image" content="https://exwise.vercel.app/images/share.png">
31+
32+
<!-- PWA / Mobile -->
33+
<meta name="theme-color" content="#050507">
34+
<link rel="apple-touch-icon" href="https://exwise.vercel.app/icons/icon-512x512.png">
35+
<meta name="apple-mobile-web-app-capable" content="yes">
36+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
37+
38+
<!-- Favicon -->
39+
<link rel="icon" type="image/png" href="https://exwise.vercel.app/favicon.ico">
40+
<!-- Tailwind CSS -->
41+
<script src="https://cdn.tailwindcss.com"></script>
42+
43+
<!-- Phosphor Icons for modern, clean icons -->
44+
<script src="https://unpkg.com/@phosphor-icons/web"></script>
45+
46+
<!-- Google Fonts: Inter -->
47+
<link rel="preconnect" href="https://fonts.googleapis.com">
48+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
49+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
50+
51+
<!-- Tailwind Configuration -->
52+
<script>
53+
tailwind.config = {
54+
theme: {
55+
extend: {
56+
fontFamily: {
57+
sans: ['Inter', 'sans-serif'],
58+
},
59+
animation: {
60+
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
61+
},
62+
keyframes: {
63+
fadeInUp: {
64+
'0%': { opacity: '0', transform: 'translateY(20px)' },
65+
'100%': { opacity: '1', transform: 'translateY(0)' },
66+
}
67+
}
68+
}
69+
}
70+
}
71+
</script>
72+
73+
<style>
74+
/* Custom subtle scrollbar */
75+
::-webkit-scrollbar {
76+
width: 8px;
77+
}
78+
79+
::-webkit-scrollbar-track {
80+
background: #020617;
81+
}
82+
83+
/* slate-950 */
84+
::-webkit-scrollbar-thumb {
85+
background: #1e293b;
86+
border-radius: 4px;
87+
}
88+
89+
/* slate-800 */
90+
::-webkit-scrollbar-thumb:hover {
91+
background: #334155;
92+
}
93+
94+
/* slate-700 */
95+
96+
/* Remove tap highlight on mobile for cleaner feel */
97+
body {
98+
-webkit-tap-highlight-color: transparent;
99+
}
100+
101+
/* Staggered animation delays for the list items */
102+
.delay-100 {
103+
animation-delay: 100ms;
104+
}
105+
106+
.delay-200 {
107+
animation-delay: 200ms;
108+
}
109+
110+
.delay-300 {
111+
animation-delay: 300ms;
112+
}
113+
114+
.delay-400 {
115+
animation-delay: 400ms;
116+
}
117+
118+
.delay-500 {
119+
animation-delay: 500ms;
120+
}
121+
</style>
122+
</head>
123+
124+
<body
125+
class="bg-slate-950 text-slate-300 font-sans antialiased min-h-screen relative overflow-x-hidden selection:bg-indigo-500/30 selection:text-white">
126+
127+
<!-- Ambient Background Glow Effects -->
128+
<div
129+
class="fixed top-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-indigo-600/20 blur-[120px] rounded-full pointer-events-none z-0">
130+
</div>
131+
<div
132+
class="fixed bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-purple-600/10 blur-[150px] rounded-full pointer-events-none z-0">
133+
</div>
134+
135+
<!-- Main Container -->
136+
<main class="relative z-10 w-full max-w-2xl mx-auto px-6 py-16 sm:py-24 flex flex-col items-center min-h-screen">
137+
138+
<!-- Profile Header Section -->
139+
<header class="flex flex-col items-center text-center mb-12 opacity-0 animate-fade-in-up">
140+
<!-- Profile Image / Avatar -->
141+
<div class="relative group cursor-pointer mb-5">
142+
<div
143+
class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full blur opacity-40 group-hover:opacity-75 transition duration-500">
144+
</div>
145+
<img src="https://api.dicebear.com/7.x/notionists/svg?seed=Felix&backgroundColor=e2e8f0"
146+
alt="Profile avatar"
147+
class="relative w-24 h-24 rounded-full border-2 border-slate-800 object-cover bg-slate-200">
148+
</div>
149+
150+
<h1 class="text-3xl font-bold text-white tracking-tight mb-2">Dev Developer</h1>
151+
<p class="text-slate-400 font-medium max-w-md">
152+
Full-Stack Engineer & UI/UX Enthusiast. Exploring the intersection of design and code.
153+
</p>
154+
155+
<!-- Quick Social Icons -->
156+
<!-- <div class="flex gap-4 mt-6">
157+
<a href="#" class="text-slate-400 hover:text-white transition-colors p-2 hover:bg-white/5 rounded-full"
158+
aria-label="GitHub">
159+
<i class="ph ph-github-logo text-2xl"></i>
160+
</a>
161+
<a href="#"
162+
class="text-slate-400 hover:text-[#0a66c2] transition-colors p-2 hover:bg-white/5 rounded-full"
163+
aria-label="LinkedIn">
164+
<i class="ph ph-linkedin-logo text-2xl"></i>
165+
</a>
166+
<a href="#"
167+
class="text-slate-400 hover:text-[#1da1f2] transition-colors p-2 hover:bg-white/5 rounded-full"
168+
aria-label="Twitter">
169+
<i class="ph ph-twitter-logo text-2xl"></i>
170+
</a>
171+
<a href="mailto:hello@example.com"
172+
class="text-slate-400 hover:text-rose-400 transition-colors p-2 hover:bg-white/5 rounded-full"
173+
aria-label="Email">
174+
<i class="ph ph-envelope-simple text-2xl"></i>
175+
</a>
176+
</div> -->
177+
</header>
178+
179+
<!-- Links Section -->
180+
<div class="w-full flex flex-col gap-4">
181+
182+
<!-- Section Title -->
183+
<h2
184+
class="text-sm font-semibold uppercase tracking-wider text-slate-500 mb-2 pl-2 opacity-0 animate-fade-in-up delay-100">
185+
Featured Projects</h2>
186+
187+
<!-- Project Link Card 1 -->
188+
<a href="/public/rd-fd.html"
189+
class="group relative flex items-center gap-5 p-4 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.05] hover:border-indigo-500/30 rounded-2xl transition-all duration-300 backdrop-blur-sm opacity-0 animate-fade-in-up delay-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-950">
190+
<div
191+
class="flex items-center justify-center w-12 h-12 rounded-xl bg-indigo-500/10 text-indigo-400 group-hover:scale-110 group-hover:bg-indigo-500 group-hover:text-white transition-all duration-300 shadow-[0_0_15px_rgba(99,102,241,0)] group-hover:shadow-[0_0_20px_rgba(99,102,241,0.4)]">
192+
<i class="ph ph-bank text-2xl"></i>
193+
</div>
194+
<div class="flex-1">
195+
<div class="flex items-center gap-3 mb-1">
196+
<h3 class="text-lg font-semibold text-slate-100 group-hover:text-indigo-300 transition-colors">
197+
RD → FD Rolling Calculator</h3>
198+
<span
199+
class="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-indigo-500/20 text-indigo-300 rounded-full border border-indigo-500/20">Live</span>
200+
</div>
201+
<p class="text-sm text-slate-400 line-clamp-1">Plan your rolling deposits and fixed deposit
202+
compounding seamlessly.</p>
203+
</div>
204+
<div
205+
class="text-slate-500 group-hover:text-white transform group-hover:translate-x-1 transition-all duration-300">
206+
<i class="ph ph-arrow-right text-xl"></i>
207+
</div>
208+
</a>
209+
210+
<!-- Project Link Card 2
211+
<a href="#project-2"
212+
class="group relative flex items-center gap-5 p-4 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.05] hover:border-emerald-500/30 rounded-2xl transition-all duration-300 backdrop-blur-sm opacity-0 animate-fade-in-up delay-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-slate-950">
213+
<div
214+
class="flex items-center justify-center w-12 h-12 rounded-xl bg-emerald-500/10 text-emerald-400 group-hover:scale-110 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300 shadow-[0_0_15px_rgba(16,185,129,0)] group-hover:shadow-[0_0_20px_rgba(16,185,129,0.4)]">
215+
<i class="ph ph-chart-line-up text-2xl"></i>
216+
</div>
217+
<div class="flex-1">
218+
<h3
219+
class="text-lg font-semibold text-slate-100 group-hover:text-emerald-300 transition-colors mb-1">
220+
FinTrack Dashboard</h3>
221+
<p class="text-sm text-slate-400 line-clamp-1">Personal finance visualization tool using React and
222+
D3.js.</p>
223+
</div>
224+
<div
225+
class="text-slate-500 group-hover:text-white transform group-hover:translate-x-1 transition-all duration-300">
226+
<i class="ph ph-arrow-right text-xl"></i>
227+
</div>
228+
</a>
229+
230+
231+
<a href="#project-3"
232+
class="group relative flex items-center gap-5 p-4 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.05] hover:border-purple-500/30 rounded-2xl transition-all duration-300 backdrop-blur-sm opacity-0 animate-fade-in-up delay-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-950">
233+
<div
234+
class="flex items-center justify-center w-12 h-12 rounded-xl bg-purple-500/10 text-purple-400 group-hover:scale-110 group-hover:bg-purple-500 group-hover:text-white transition-all duration-300 shadow-[0_0_15px_rgba(168,85,247,0)] group-hover:shadow-[0_0_20px_rgba(168,85,247,0.4)]">
235+
<i class="ph ph-cloud-sun text-2xl"></i>
236+
</div>
237+
<div class="flex-1">
238+
<h3 class="text-lg font-semibold text-slate-100 group-hover:text-purple-300 transition-colors mb-1">
239+
SkyCast Weather</h3>
240+
<p class="text-sm text-slate-400 line-clamp-1">Real-time weather application consuming OpenWeather
241+
API.</p>
242+
</div>
243+
<div
244+
class="text-slate-500 group-hover:text-white transform group-hover:translate-x-1 transition-all duration-300">
245+
<i class="ph ph-arrow-right text-xl"></i>
246+
</div>
247+
</a> -->
248+
249+
<!-- Divider / Secondary Section -->
250+
<!-- <h2
251+
class="text-sm font-semibold uppercase tracking-wider text-slate-500 mt-6 mb-2 pl-2 opacity-0 animate-fade-in-up delay-500">
252+
Resources & Content</h2>
253+
254+
255+
<a href="#blog"
256+
class="group relative flex items-center gap-4 p-4 bg-white/[0.02] hover:bg-white/[0.05] border border-transparent hover:border-white/10 rounded-2xl transition-all duration-300 opacity-0 animate-fade-in-up delay-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-950">
257+
<i class="ph ph-article text-2xl text-slate-400 group-hover:text-white transition-colors"></i>
258+
<span class="flex-1 text-base font-medium text-slate-300 group-hover:text-white transition-colors">Read
259+
my technical blog</span>
260+
<i class="ph ph-arrow-up-right text-slate-500 group-hover:text-white transition-colors"></i>
261+
</a>
262+
263+
264+
<a href="#resume"
265+
class="group relative flex items-center gap-4 p-4 bg-white/[0.02] hover:bg-white/[0.05] border border-transparent hover:border-white/10 rounded-2xl transition-all duration-300 opacity-0 animate-fade-in-up delay-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-950">
266+
<i class="ph ph-file-pdf text-2xl text-slate-400 group-hover:text-white transition-colors"></i>
267+
<span class="flex-1 text-base font-medium text-slate-300 group-hover:text-white transition-colors">View
268+
my Resume</span>
269+
<i class="ph ph-arrow-up-right text-slate-500 group-hover:text-white transition-colors"></i>
270+
</a> -->
271+
272+
</div>
273+
274+
<!-- Footer -->
275+
<footer class="mt-auto pt-16 pb-4 w-full text-center opacity-0 animate-fade-in-up delay-500">
276+
<p class="text-sm text-slate-500">
277+
© <span id="year"></span> Dev Developer. All rights reserved.
278+
</p>
279+
</footer>
280+
281+
</main>
282+
283+
<!-- Script to automatically update the copyright year -->
284+
<script>
285+
document.getElementById('year').textContent = new Date().getFullYear();
286+
</script>
287+
</body>
288+
289+
</html>

0 commit comments

Comments
 (0)