-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
160 lines (141 loc) · 7.93 KB
/
index.html
File metadata and controls
160 lines (141 loc) · 7.93 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<script>fetch('https://api.countapi.net/hit/rmkr-dev.github.io/home');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ramkumar Ethiraj | RMKR Dev</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC300' d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z'/%3E%3C/svg%3E">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<style>
:root {
--color-bg: #0C1524; --color-card: #18233C;
--color-accent: #FFC300; --color-text: #F0F4F8;
--color-muted: #A0AEC0; --color-line: #2D3748;
}
body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); }
.wrap { max-width: 900px; margin: 0 auto; padding: 2rem; }
.section-title {
position: relative; font-size: 1.5rem; font-weight: 700;
margin-bottom: 1.5rem; padding-left: 1rem; color: var(--color-accent);
}
.section-title::before {
content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
background: var(--color-accent); border-radius: 2px;
}
.tool-card {
background: var(--color-card); border-radius: 16px; padding: 1.5rem;
border: 1px solid var(--color-line); transition: all 0.3s ease;
display: flex; flex-direction: column; gap: 8px;
}
.tool-card:hover { transform: translateY(-5px); border-color: var(--color-accent); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.cta-gold {
background: var(--color-accent); color: var(--color-bg);
padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 700;
display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s;
}
</style>
</head>
<body>
<div class="wrap min-h-screen flex flex-col justify-center">
<header class="mb-12">
<h1 class="text-5xl font-black mb-2 tracking-tight">Ramkumar Ethiraj</h1>
<p class="text-2xl text-[--color-accent] font-medium mb-6">Principal Software Engineer & Architect</p>
<div class="flex flex-wrap gap-4 items-center">
<a href="profile.html" class="cta-gold uppercase text-sm">
<i class="fa-solid fa-address-card"></i> View Full Profile
</a>
<div class="flex gap-4 text-2xl ml-2">
<a href="https://github.com/rmkr-dev" target="_blank" class="hover:text-[--color-accent] transition"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/ramkumarethiraj" target="_blank" class="hover:text-[--color-accent] transition"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</header>
<div class="section-title">Developer Toolkit</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
<a href="/md" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-file-lines text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Markdown Viewer</h3>
<p class="text-xs text-[--color-muted]">Preview and Export MD to PDF.</p>
</a>
<a href="/jwt" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-shield-halved text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">JWT Debugger</h3>
<p class="text-xs text-[--color-muted]">Decode JWT tokens and verify.</p>
</a>
<a href="/time" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-clock text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Time Overlay</h3>
<p class="text-xs text-[--color-muted]">Compare and check global timezones overlaps.</p>
</a>
<a href="/draw" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-paintbrush text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Architect Draw</h3>
<p class="text-xs text-[--color-muted]">Client-side whiteboard for sketching system diagrams.</p>
</a>
<a href="/transform" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-wand-magic-sparkles text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Payload Knife</h3>
<p class="text-xs text-[--color-muted]">Transform JSON to CSV, CURL to Fetch, and Prettify logs.</p>
</a>
<a href="/diff" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-code-compare text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Payload Diff</h3>
<p class="text-xs text-[--color-muted]">Side-by-side JSON/Text comparison and delta highlighting.</p>
</a>
<a href="/roadmap" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-timeline text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Roadmap Planner</h3>
<p class="text-xs text-[--color-muted]">High-level executive timeline visualizer for initiatives.</p>
</a>
<a href="/mock" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-vial-circle-check text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">Mock Generator</h3>
<p class="text-xs text-[--color-muted]">Generate randomized JSON datasets from schemas.</p>
</a>
<a href="/json-schema" class="tool-card">
<div class="flex justify-between items-start">
<i class="fa-solid fa-vial-circle-check text-2xl text-[--color-accent]"></i>
<i class="fa-solid fa-arrow-up-right-from-square text-xs opacity-30"></i>
</div>
<h3 class="font-bold text-lg">JSON Schema Studio</h3>
<p class="text-xs text-[--color-muted]">Visualize Json Schema.</p>
</a>
<div class="tool-card opacity-50 border-dashed border-2">
<i class="fa-solid fa-plus text-2xl mb-2"></i>
<h3 class="font-bold">Next Tool</h3>
<p class="text-xs">Coming soon...</p>
</div>
</div>
<footer class="text-[--color-line] text-xs font-mono">
© 2026 // RMKR-DEV.GITHUB.IO
</footer>
</div>
</body>
</html>