| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Calvin Allen Crawford Portfolio</title> |
| <style> |
| :root { |
| --primary-color: #4a2982; |
| --secondary-color: #6a3cb5; |
| --accent-color: #8a56e5; |
| --text-color: #333; |
| --light-bg: #f8f9fa; |
| --card-shadow: 0 8px 16px rgba(0,0,0,0.1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: url('/image/bg-image.jpeg') center/cover no-repeat fixed; |
| z-index: -2; |
| } |
| body::after { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, |
| rgba(245, 247, 250, 0.85) 0%, |
| rgba(228, 232, 240, 0.85) 100%); |
| z-index: -1; |
| } |
| |
| body { |
| color: var(--text-color); |
| line-height: 1.6; |
| min-height: 100vh; |
| position: relative; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 3rem; |
| padding: 2rem 0; |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| color: white; |
| border-radius: 15px; |
| box-shadow: var(--card-shadow); |
| position: relative; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| |
| .header-subtitle { |
| font-size: 1.2rem; |
| opacity: 0.9; |
| } |
| .profile-icon { |
| width: 100px; |
| height: 100px; |
| border-radius: 50%; |
| margin-bottom: 1rem; |
| border: 3px solid white; |
| } |
| |
| .portfolio-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin-top: 2rem; |
| } |
| |
| .space-card { |
| background: white; |
| border-radius: 15px; |
| overflow: hidden; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| box-shadow: var(--card-shadow); |
| position: relative; |
| } |
| |
| .space-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
| } |
| |
| .space-preview { |
| position: relative; |
| height: 200px; |
| overflow: hidden; |
| background-color: #eee; |
| } |
| |
| .space-preview img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .space-card:hover .space-preview img { |
| transform: scale(1.05); |
| } |
| |
| .space-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0,0,0,0.3); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .space-card:hover .space-overlay { |
| opacity: 1; |
| } |
| |
| .visit-btn { |
| background: var(--accent-color); |
| color: white; |
| border: none; |
| padding: 0.75rem 1.5rem; |
| border-radius: 50px; |
| font-weight: bold; |
| cursor: pointer; |
| transition: background 0.3s ease; |
| text-decoration: none; |
| } |
| |
| .visit-btn:hover { |
| background: var(--primary-color); |
| } |
| |
| .space-info { |
| padding: 1.5rem; |
| } |
| |
| .space-title { |
| font-size: 1.5rem; |
| margin-bottom: 0.5rem; |
| color: var(--primary-color); |
| } |
| |
| .space-description { |
| color: #666; |
| font-size: 0.95rem; |
| margin-bottom: 1rem; |
| } |
| |
| .space-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| |
| .tag { |
| background: var(--light-bg); |
| color: var(--primary-color); |
| font-size: 0.8rem; |
| padding: 0.3rem 0.8rem; |
| border-radius: 50px; |
| } |
| |
| .expanded-view { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0,0,0,0.9); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 1000; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s ease; |
| } |
| |
| .expanded-view.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| |
| .expanded-content { |
| background: white; |
| width: 90%; |
| max-width: 1000px; |
| height: 80%; |
| border-radius: 15px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .close-btn { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| background: var(--primary-color); |
| color: white; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| cursor: pointer; |
| z-index: 10; |
| } |
| |
| .expanded-iframe { |
| width: 100%; |
| height: 100%; |
| border: none; |
| } |
| |
| .filter-controls { |
| display: flex; |
| justify-content: center; |
| margin-bottom: 2rem; |
| flex-wrap: wrap; |
| gap: 1rem; |
| } |
| |
| .filter-btn { |
| background: white; |
| color: var(--primary-color); |
| border: 2px solid var(--primary-color); |
| padding: 0.5rem 1.5rem; |
| border-radius: 50px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-weight: bold; |
| } |
| |
| .filter-btn.active, .filter-btn:hover { |
| background: var(--primary-color); |
| color: white; |
| } |
| footer { |
| text-align: center; |
| padding: 2rem 0; |
| color: white; |
| font-size: 0.9rem; |
| margin-top: 3rem; |
| border-top: 1px solid #eee; |
| } |
| |
| @media (max-width: 768px) { |
| .portfolio-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| h1 { |
| font-size: 2rem; |
| } |
| |
| .filter-controls { |
| flex-direction: column; |
| align-items: center; |
| } |
| } |
| |
| .animate-in { |
| animation: fadeIn 0.8s ease forwards; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| |
| .skills-education { |
| margin-bottom: 3rem; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 2rem; |
| } |
| |
| .section-card { |
| background: white; |
| border-radius: 15px; |
| padding: 2rem; |
| box-shadow: var(--card-shadow); |
| } |
| |
| .section-title { |
| color: var(--primary-color); |
| margin-bottom: 1.5rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 2px solid var(--accent-color); |
| } |
| |
| .skills-container { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .skill-category h3 { |
| color: var(--secondary-color); |
| margin-bottom: 0.8rem; |
| } |
| |
| .skill-category ul { |
| list-style-type: none; |
| } |
| |
| .skill-category li { |
| padding: 0.3rem 0; |
| position: relative; |
| padding-left: 1.2rem; |
| } |
| |
| .skill-category li:before { |
| content: '▹'; |
| position: absolute; |
| left: 0; |
| color: var(--accent-color); |
| } |
| |
| .education-item { |
| margin-bottom: 1.5rem; |
| padding-bottom: 1.5rem; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .education-item:last-child { |
| border-bottom: none; |
| padding-bottom: 0; |
| margin-bottom: 0; |
| } |
| |
| .edu-details { |
| margin-bottom: 0.5rem; |
| } |
| |
| .edu-details h3 { |
| color: var(--secondary-color); |
| margin-bottom: 0.3rem; |
| } |
| |
| .institution { |
| font-weight: 600; |
| } |
| |
| .period { |
| color: #666; |
| font-size: 0.9rem; |
| } |
| |
| .edu-description { |
| font-size: 0.95rem; |
| color: #555; |
| } |
| |
| .certifications { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| |
| .cert-badge { |
| background: var(--light-bg); |
| color: var(--primary-color); |
| font-size: 0.85rem; |
| padding: 0.4rem 0.9rem; |
| border-radius: 50px; |
| border: 1px solid var(--accent-color); |
| } |
| |
| |
| .visit-btn { |
| display: inline-block; |
| text-align: center; |
| background: var(--accent-color); |
| color: white; |
| border: none; |
| padding: 0.75rem 1.5rem; |
| border-radius: 50px; |
| font-weight: bold; |
| cursor: pointer; |
| transition: background 0.3s ease, transform 0.2s ease; |
| text-decoration: none; |
| z-index: 10; |
| } |
| |
| .visit-btn:hover { |
| background: var(--primary-color); |
| transform: scale(1.05); |
| } |
| |
| .visit-btn:active { |
| transform: scale(0.98); |
| } |
| |
| @media (max-width: 768px) { |
| .skills-education { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header class="animate-in"> |
| <img src="/image/profile_icon.jpeg" alt="Profile" class="profile-icon"> |
| <h1>Calvin Allen Crawford</h1> |
| <p class="header-subtitle">Generative AI Engineer Portfolio</p> |
| </header> |
| |
| |
| <section class="skills-education animate-in"> |
| <div class="section-card"> |
| <h2 class="section-title">Skills & Expertise</h2> |
| <div class="skills-container"> |
| <div class="skill-category"> |
| <h3>Libraries & Frameworks</h3> |
| <ul> |
| <li>TensorFlow, PyTorch</li> |
| <li>LangChain, HuggingFace, OpenAI</li> |
| <li>Pandas, NumPy, Scikit-learn</li> |
| <li>Streamlit, Gradio, Flask</li> |
| <li>Plotly, Seaborn</li> |
| </ul> |
| </div> |
| <div class="skill-category"> |
| <h3>Developer Tools</h3> |
| <ul> |
| <li>Git, GitHub, VS Code</li> |
| <li>Google Cloud Platform</li> |
| <li>Microsoft Azure, IBM Watson</li> |
| <li>LangFlow, DataStax, Astra</li> |
| <li>Figma, Cursor</li> |
| </ul> |
| </div> |
| <div class="skill-category"> |
| <h3>Languages & Technologies</h3> |
| <ul> |
| <li>Python (Advanced)</li> |
| <li>HTML, CSS, JavaScript</li> |
| <li>RAG, Vector Databases (FAISS, Weaviate)</li> |
| <li>Final Cut Pro, Blender</li> |
| <li>Adobe After Effects</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="section-card"> |
| <h2 class="section-title">Education & Experience</h2> |
| <div class="education-item"> |
| <div class="edu-details"> |
| <h3>Frontend Web Development</h3> |
| <p class="institution">Udacity NanoDegree</p> |
| <p class="period">Jul 2024-Oct 2024</p> |
| </div> |
| </div> |
| <div class="education-item"> |
| <div class="edu-details"> |
| <h3>Data Science and Machine Learning</h3> |
| <p class="institution">MIT Schwarzman College of Computing</p> |
| <p class="period">Jan 2024-May 2024</p> |
| </div> |
| <p class="edu-description">Professional Certificate in Making Data-Driven Decisions</p> |
| </div> |
| <div class="education-item"> |
| <div class="edu-details"> |
| <h3>Professional Experience</h3> |
| </div> |
| <div class="certifications"> |
| <span class="cert-badge">Generative AI Engineer</span> |
| <span class="cert-badge">Data Enrollment Specialist</span> |
| <span class="cert-badge">Multimedia Producer</span> |
| <span class="cert-badge">ProTech Support Specialist</span> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <div class="filter-controls animate-in"> |
| <button class="filter-btn active" data-filter="all">All Spaces</button> |
| <button class="filter-btn" data-filter="data">Data Vision</button> |
| <button class="filter-btn" data-filter="neural">Neural Vision</button> |
| <button class="filter-btn" data-filter="domain">Domain Vision</button> |
| </div> |
| |
| <div class="portfolio-grid"> |
| |
| <div class="space-card animate-in" data-category="data"> |
| <div class="space-preview"> |
| <img src="/image/data-vision.jpeg" alt="Data Vision Preview"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-data-vision.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Data Vision</h3> |
| <p class="space-description">Advanced data visualization and analytics platform powered by Python</p> |
| <div class="space-tags"> |
| <span class="tag">Data</span> |
| <span class="tag">Analytics</span> |
| <span class="tag">Visualization</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-card animate-in" data-category="neural"> |
| <div class="space-preview"> |
| <img src="/image/neural-vision.jpeg" alt="Neural Vision Preview"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-neural-vision.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Neural Vision</h3> |
| <p class="space-description">Neural network visualization tools for understanding and interpreting AI models.</p> |
| <div class="space-tags"> |
| <span class="tag">Neural Networks</span> |
| <span class="tag">AI</span> |
| <span class="tag">Interpretability</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-card animate-in" data-category="domain"> |
| <div class="space-preview"> |
| <img src="/image/fin-vision.jpeg" alt="Fin Vision Preview" onerror="this.onerror=null; this.className='placeholder-image fin-placeholder'; this.src='';"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-fin-vision.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Fin Vision</h3> |
| <p class="space-description">Financial analysis and forecasting tool with advanced visualization capabilities</p> |
| <div class="space-tags"> |
| <span class="tag">Finance</span> |
| <span class="tag">Analytics</span> |
| <span class="tag">Forecasting</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-card animate-in" data-category="domain"> |
| <div class="space-preview"> |
| <img src="/image/tech-vision.jpeg" alt="Tech Vision Preview" onerror="this.onerror=null; this.className='placeholder-image tech-placeholder'; this.src='';"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-tech-vision.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Tech Vision</h3> |
| <p class="space-description">Technology trend analysis and innovation forecasting platform</p> |
| <div class="space-tags"> |
| <span class="tag">Technology</span> |
| <span class="tag">Innovation</span> |
| <span class="tag">Trends</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-card animate-in" data-category="domain"> |
| <div class="space-preview"> |
| <img src="/image/legal-vision.jpeg" alt="Legal Vision Preview" onerror="this.onerror=null; this.className='placeholder-image legal-placeholder'; this.src='';"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-legal-visions.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Legal Vision</h3> |
| <p class="space-description">Legal document analysis and case research assistant with AI-powered insights</p> |
| <div class="space-tags"> |
| <span class="tag">Legal</span> |
| <span class="tag">Document Analysis</span> |
| <span class="tag">Research</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-card animate-in" data-category="domain"> |
| <div class="space-preview"> |
| <img src="/image/scholar-vision.jpeg" alt="Scholar Vision Preview" onerror="this.onerror=null; this.className='placeholder-image scholar-placeholder'; this.src='';"> |
| <div class="space-overlay"> |
| <a href="#" class="visit-btn" data-space="https://cosmickvisions-scholar-vision.hf.space">Visit Space</a> |
| </div> |
| </div> |
| <div class="space-info"> |
| <h3 class="space-title">Scholar Vision</h3> |
| <p class="space-description">Academic research assistant and paper analysis tool with citation management</p> |
| <div class="space-tags"> |
| <span class="tag">Academic</span> |
| <span class="tag">Research</span> |
| <span class="tag">Citations</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="expanded-view"> |
| <div class="expanded-content"> |
| <div class="close-btn">×</div> |
| <iframe class="expanded-iframe" src="" frameborder="0"></iframe> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const animatedElements = document.querySelectorAll('.animate-in'); |
| animatedElements.forEach((el, index) => { |
| el.style.animationDelay = `${index * 0.15}s`; |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| const spaceCards = document.querySelectorAll('.space-card'); |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| filterButtons.forEach(btn => btn.classList.remove('active')); |
| button.classList.add('active'); |
| |
| const filterValue = button.getAttribute('data-filter'); |
| |
| spaceCards.forEach(card => { |
| if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) { |
| card.style.display = 'block'; |
| setTimeout(() => { |
| card.classList.add('animate-in'); |
| }, 10); |
| } else { |
| card.classList.remove('animate-in'); |
| setTimeout(() => { |
| card.style.display = 'none'; |
| }, 300); |
| } |
| }); |
| }); |
| }); |
| |
| |
| const visitButtons = document.querySelectorAll('.visit-btn'); |
| const expandedView = document.querySelector('.expanded-view'); |
| const expandedIframe = document.querySelector('.expanded-iframe'); |
| const closeBtn = document.querySelector('.close-btn'); |
| |
| visitButtons.forEach(button => { |
| button.addEventListener('click', (e) => { |
| e.preventDefault(); |
| const spaceUrl = button.getAttribute('data-space'); |
| expandedIframe.src = spaceUrl; |
| expandedView.classList.add('active'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| }); |
| |
| closeBtn.addEventListener('click', () => { |
| expandedView.classList.remove('active'); |
| setTimeout(() => { |
| expandedIframe.src = ''; |
| }, 300); |
| document.body.style.overflow = 'auto'; |
| }); |
| |
| expandedView.addEventListener('click', (e) => { |
| if (e.target === expandedView) { |
| closeBtn.click(); |
| } |
| }); |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape' && expandedView.classList.contains('active')) { |
| closeBtn.click(); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
