File size: 14,459 Bytes
750bbe6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
{{template "views/partials/head" .}}
<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] font-sans antialiased">
<div class="flex flex-col min-h-screen">

    {{template "views/partials/navbar" .}}

    <!-- Main Content -->
    <div class="flex-1 container mx-auto px-4 py-12 max-w-5xl">
        
        <!-- Hero Section -->
        <div class="text-center mb-16 relative z-10">
            <div class="inline-block px-4 py-1 mb-6 rounded-full border border-[var(--color-accent)]/30 bg-[var(--color-accent)]/5 text-[var(--color-accent)] text-xs tracking-[0.2em] font-bold uppercase animate-fade-in-up">
                The Mind Behind LocalAI
            </div>
            
            <h1 class="text-5xl md:text-6xl font-bold mb-6 text-[var(--color-text-primary)]">
                Everything starts with <span class="text-[var(--color-primary)]">Passion</span>
            </h1>
            
            <p class="text-[var(--color-text-secondary)] max-w-3xl mx-auto text-lg leading-relaxed mb-12">
                Redefining AI through uncompromised excellence and curated experiences.
            </p>

            <div class="flex justify-center mb-12">
                <div class="relative group">
                    <div class="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] rounded-full blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
                    <img src="static/assets/profile.jpeg" alt="Amlan Mallick" class="relative w-32 h-32 rounded-full border-4 border-[var(--color-bg-secondary)] object-cover shadow-xl transform group-hover:scale-105 transition duration-300">
                </div>
            </div>

            <h2 class="text-4xl font-bold text-[var(--color-text-primary)] mb-2">Amlan Mallick</h2>
            <p class="text-[var(--color-text-secondary)] font-medium text-xl">Founder & Lead Architect</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            
            <!-- Main Content Column -->
            <div class="lg:col-span-2 space-y-12">
                
                <!-- Professional Summary -->
                <section class="bg-[var(--color-bg-secondary)] p-8 rounded-xl border border-[var(--color-border-subtle)] shadow-lg hover:border-[var(--color-primary)]/30 transition duration-300">
                    <h2 class="text-2xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-user-circle mr-3 text-[var(--color-primary)]"></i> Professional Summary
                    </h2>
                    <p class="text-[var(--color-text-secondary)] leading-relaxed">
                        A passionate Web Developer & Software Engineer with a strong focus on building fast, SEO-optimized, 
                        and visually engaging websites. Specializing in high-performance web applications, browser extensions, 
                        and automation tools. I combine engineering principles with a creative design mindset to deliver products 
                        that are technically robust and aesthetically pleasing.
                    </p>
                </section>

                <!-- Core Expertise -->
                <section>
                    <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-code mr-3 text-[var(--color-accent)]"></i> Core Expertise
                    </h2>
                    <div class="flex flex-wrap gap-3">
                        {{ range $skill := slice "HTML/CSS/JS" "React.jsx" "Java" "Kotlin" "Android Development" "Chrome Extensions" "UI/UX Design" "SEO Optimization" "Web Automation" "JSON/APIs" "Data Scraping" "ML-Assisted Workflows" }}
                        <span class="px-4 py-2 bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] rounded-lg text-sm font-medium border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-colors cursor-default">
                            {{ $skill }}
                        </span>
                        {{ end }}
                    </div>
                </section>

                <!-- Experience -->
                <section>
                    <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-briefcase mr-3 text-[var(--color-success)]"></i> Professional Journey
                    </h2>
                    <div class="space-y-6">
                        <div class="relative pl-8 border-l-2 border-[var(--color-border-default)]">
                            <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-[var(--color-primary)] border-4 border-[var(--color-bg-primary)]"></div>
                            <h3 class="text-xl font-bold text-[var(--color-text-primary)]">Web Developer & Software Engineer</h3>
                            <div class="text-[var(--color-text-secondary)] mb-1">NWU Digital Solutions <span class="mx-2"></span> <span class="text-xs font-mono bg-[var(--color-bg-tertiary)] px-2 py-0.5 rounded">April 2024 – Present</span></div>
                            <p class="text-[var(--color-text-muted)] mt-2">Creating responsive, clean, and user-friendly digital experiences with a focus on high-performance web applications.</p>
                        </div>
                        <div class="relative pl-8 border-l-2 border-[var(--color-border-default)]">
                            <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-[var(--color-bg-tertiary)] border-4 border-[var(--color-bg-primary)]"></div>
                            <h3 class="text-xl font-bold text-[var(--color-text-primary)]">Full-Stack Web Developer</h3>
                            <div class="text-[var(--color-text-secondary)] mb-1">NextGen Web Technologies <span class="mx-2"></span> <span class="text-xs font-mono bg-[var(--color-bg-tertiary)] px-2 py-0.5 rounded">June 2024 – October 2025</span></div>
                            <p class="text-[var(--color-text-muted)] mt-2">Developed performance-driven web solutions and ML-assisted data extraction workflows.</p>
                        </div>
                    </div>
                </section>

                <!-- Projects -->
                <section>
                    <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-globe mr-3 text-[var(--color-warning)]"></i> Featured Projects
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] transition group cursor-pointer">
                            <div class="flex justify-between items-start mb-4">
                                <h3 class="text-lg font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-primary)] transition">RAVEN</h3>
                                <a href="https://amlan.framer.ai/" target="_blank" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                            <p class="text-sm text-[var(--color-text-muted)]">Sleek, modern portfolio website built on Framer, showcasing high-impact presentation of skills and projects.</p>
                        </div>
                        <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] transition group cursor-pointer">
                            <div class="flex justify-between items-start mb-4">
                                <h3 class="text-lg font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-primary)] transition">Bill Splitter Web App</h3>
                                <a href="#" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                            <p class="text-sm text-[var(--color-text-muted)]">Lightweight tool for effortless bill splitting among multiple people, optimized for mobile and desktop.</p>
                        </div>
                    </div>
                </section>

                <!-- Portfolio PDF Embed -->
                <section>
                    <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-file-pdf mr-3 text-[var(--color-error)]"></i> Full Portfolio
                    </h2>
                    <div class="bg-[var(--color-bg-tertiary)] rounded-xl overflow-hidden border border-[var(--color-border-subtle)]" style="height: 600px;">
                        <iframe src="static/assets/portfolio.pdf" class="w-full h-full" frameborder="0">
                            <div class="flex flex-col items-center justify-center h-full p-8 text-center">
                                <p class="mb-4 text-[var(--color-text-secondary)]">Your browser doesn't support PDF viewing.</p>
                                <a href="static/assets/portfolio.pdf" class="px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition">Download Portfolio PDF</a>
                            </div>
                        </iframe>
                    </div>
                </section>

            </div>

            <!-- Sidebar -->
            <div class="space-y-8">
                
                <!-- Contact Card -->
                <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-strong)] shadow-lg sticky top-24">
                    <h2 class="text-xl font-bold mb-6 text-[var(--color-text-primary)]">Contact</h2>
                    <div class="space-y-4">
                        <a href="mailto:knight.red205@gmail.com" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group">
                            <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-primary)] group-hover:text-white transition">
                                <i class="fas fa-envelope text-sm"></i>
                            </div>
                            <span class="text-sm">knight.red205@gmail.com</span>
                        </a>
                        <div class="flex items-center text-[var(--color-text-secondary)]">
                            <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3">
                                <i class="fas fa-map-marker-alt text-sm"></i>
                            </div>
                            <span class="text-sm">Dhaka, Khulna</span>
                        </div>
                        <a href="https://github.com/Amlan-109" target="_blank" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group">
                            <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-accent)] group-hover:text-white transition">
                                <i class="fab fa-github text-sm"></i>
                            </div>
                            <span class="text-sm">Amlan-109</span>
                        </a>
                        <a href="https://amlan.framer.ai/" target="_blank" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group">
                            <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-info)] group-hover:text-white transition">
                                <i class="fas fa-globe text-sm"></i>
                            </div>
                            <span class="text-sm">amlan.framer.ai</span>
                        </a>
                    </div>
                </div>

                <!-- Recognition -->
                <div>
                    <h2 class="text-xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-trophy mr-3 text-[var(--color-warning)]"></i> Recognition
                    </h2>
                    <div class="space-y-4">
                        <div class="bg-[var(--color-bg-tertiary)] p-4 rounded-lg border border-[var(--color-border-subtle)] text-sm text-[var(--color-text-secondary)] hover:border-[var(--color-warning)] transition">
                            Best Website Design Award – Inter-University Tech Competition (July 2024)
                        </div>
                        <div class="bg-[var(--color-bg-tertiary)] p-4 rounded-lg border border-[var(--color-border-subtle)] text-sm text-[var(--color-text-secondary)] hover:border-[var(--color-warning)] transition">
                            Best Modern UI Web Application – Inter-University Innovation Contest (July 2024)
                        </div>
                    </div>
                </div>

                <!-- Education -->
                <div>
                    <h2 class="text-xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]">
                        <i class="fas fa-graduation-cap mr-3 text-[var(--color-info)]"></i> Education
                    </h2>
                    <div class="bg-[var(--color-bg-tertiary)] p-5 rounded-lg border border-[var(--color-border-subtle)]">
                        <h3 class="font-bold text-[var(--color-text-primary)]">B.Sc. in CSE</h3>
                        <div class="text-[var(--color-text-secondary)] text-sm mt-1">North Western University</div>
                        <div class="text-[var(--color-primary)] font-bold text-sm mt-2">GPA: 9.38</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{template "views/partials/footer" .}}

</div>
</body>
</html>