Hugging Face's logo

Spaces:
VatsalPatel18
/
certificate-experience-internship
Running

App Files Community
certificate-experience-internship
File size: 7,548 Bytes 
7c2ebf5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Certificate of Experience</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f8f5f2;
        }
        .certificate-border {
            border: 20px solid transparent;
            border-image: linear-gradient(135deg, #2c3e50, #4ca1af);
            border-image-slice: 1;
        }
        .signature-line {
            border-bottom: 1px solid #2c3e50;
            width: 200px;
            display: inline-block;
            margin-top: 50px;
        }
        .seal {
            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
        }
        @media (max-width: 768px) {
            .certificate-border {
                border-width: 10px;
            }
            .text-4xl {
                font-size: 1.75rem;
            }
            .text-2xl {
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="certificate-border bg-white w-full max-w-4xl p-8 md:p-12 shadow-2xl relative overflow-hidden">
        <!-- Watermark -->
        <div class="absolute inset-0 flex items-center justify-center opacity-10 z-0">
            <svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                <path d="M300,150 C400,50 500,150 450,250 C500,350 400,450 300,350 C200,450 100,350 150,250 C100,150 200,50 300,150 Z" fill="none" stroke="#2c3e50" stroke-width="2"/>
            </svg>
        </div>
        
        <div class="relative z-10">
            <!-- Header -->
            <div class="text-center mb-8">
                <div class="flex justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#4ca1af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2" style="font-family: 'Playfair Display', serif;">CERTIFICATE OF EXPERIENCE</h1>
                <p class="text-gray-600 uppercase tracking-widest text-sm">This is to certify that</p>
            </div>
            
            <!-- Main Content -->
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6" style="font-family: 'Playfair Display', serif;">Sonia Bara</h2>
                
                <div class="max-w-2xl mx-auto text-gray-700 text-lg leading-relaxed mb-8">
                    <p class="mb-4">has successfully completed an 8-week internship program at</p>
                    <p class="font-bold text-xl text-gray-800 mb-6">HawkFranklin Research</p>
                    <p class="mb-4">under the supervision of <span class="font-semibold">Vatsal Pravinbhai Patel</span>, Senior Research Engineer and Manager.</p>
                </div>
                
                <div class="bg-gray-100 p-6 rounded-lg mb-8 text-left">
                    <h3 class="text-xl font-bold text-gray-800 mb-3" style="font-family: 'Playfair Display', serif;">Project Details</h3>
                    <p class="text-gray-700 mb-2"><span class="font-semibold">Project Title:</span> Application of Graph Neural Networks in Drug Discovery</p>
                    <p class="text-gray-700 mb-2"><span class="font-semibold">Duration:</span> 8 weeks (July 2025)</p>
                    <p class="text-gray-700">
                        During this internship, Sonia conducted comprehensive research on existing machine learning models in drug discovery, performed detailed codebase analysis, and demonstrated exceptional independent research capabilities. Her performance was outstanding, requiring minimal supervision while delivering high-quality results.
                    </p>
                </div>
                
                <p class="text-gray-700 italic mb-8">We commend Sonia for her dedication and wish her all the best in her future endeavors.</p>
            </div>
            
            <!-- Signatures -->
            <div class="flex flex-wrap justify-between mt-12">
                <div class="w-full md:w-1/2 text-center md:text-left mb-8 md:mb-0">
                    <div class="signature-line"></div>
                    <p class="text-gray-700 mt-2">Vatsal Pravinbhai Patel</p>
                    <p class="text-gray-600 text-sm">Senior Research Engineer and Manager</p>
                    <p class="text-gray-600 text-sm">HawkFranklin Research</p>
                </div>
                
                <div class="w-full md:w-1/2 text-center md:text-right">
                    <div class="inline-block">
                        <div class="signature-line"></div>
                        <p class="text-gray-700 mt-2">Date</p>
                        <p class="text-gray-600 text-sm" id="currentDate"></p>
                    </div>
                </div>
            </div>
            
            <!-- Seal -->
            <div class="flex justify-center mt-12">
                <div class="seal w-24 h-24 rounded-full border-4 border-red-600 flex items-center justify-center text-red-600 font-bold text-sm text-center p-2 transform rotate-12">
                    Official Seal<br>HawkFranklin
                </div>
            </div>
        </div>
    </div>

    <script>
        // Set current date
        const options = { year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-US', options);
        
        // Animation effect
        document.addEventListener('DOMContentLoaded', () => {
            const certificate = document.querySelector('.certificate-border');
            certificate.style.opacity = '0';
            certificate.style.transform = 'translateY(20px)';
            
            setTimeout(() => {
                certificate.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
                certificate.style.opacity = '1';
                certificate.style.transform = 'translateY(0)';
            }, 100);
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=VatsalPatel18/certificate-experience-internship" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>