Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ data.name }} - Portfolio</title> | |
| <link rel="stylesheet" href="/static/style.css?v=2.2"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <div class="nav-container"> | |
| <div class="nav-brand">bngoc</div> | |
| <ul class="nav-menu"> | |
| <li><a href="#home" class="nav-link">Home</a></li> | |
| <li><a href="#about" class="nav-link">About</a></li> | |
| <li><a href="#skills" class="nav-link">Skills</a></li> | |
| <li><a href="#experience" class="nav-link">Experience</a></li> | |
| <li><a href="#projects" class="nav-link">Projects</a></li> | |
| <li><a href="#contact" class="nav-link">Contact</a></li> | |
| </ul> | |
| <div class="hamburger"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero"> | |
| <div class="hero-content"> | |
| <div class="typing-container"> | |
| <div id="streaming-text" class="streaming-text"></div> | |
| <span class="cursor">|</span> | |
| </div> | |
| <h2 class="hero-title fade-in-element">{{ data.title }}</h2> | |
| <div class="hero-buttons fade-in-element"> | |
| <a href="#projects" class="btn btn-primary">View Projects</a> | |
| <a href="#contact" class="btn btn-outline">Get In Touch</a> | |
| </div> | |
| <div class="social-links fade-in-element"> | |
| <a href="{{ data.github }}" target="_blank"><i class="fab fa-github"></i></a> | |
| <a href="{{ data.huggingface }}" target="_blank"><i class="fas fa-robot"></i></a> | |
| <a href="mailto:{{ data.email }}"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| <div class="hero-animation"> | |
| <div class="floating-shapes"> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="about"> | |
| <div class="about-background"> | |
| <img src="/static/more_img/a2.png" alt="AI Team Collaboration" class="about-bg-image"> | |
| </div> | |
| <div class="container"> | |
| <h2 class="section-title">About Me</h2> | |
| <div class="about-content"> | |
| <div class="about-profile"> | |
| <div class="profile-image"> | |
| <img src="/static/image/image.png" alt="{{ data.name }}" class="profile-photo"> | |
| <div class="profile-overlay"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-info"> | |
| <div class="about-text"> | |
| <p>{{ data.about }}</p> | |
| <div class="about-highlights"> | |
| <div class="highlight-item"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <span>Continuous learner passionate about AI/ML</span> | |
| </div> | |
| <div class="highlight-item"> | |
| <i class="fas fa-rocket"></i> | |
| <span>Building innovative solutions with cutting-edge tech</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-stats"> | |
| <div class="stat-card"> | |
| <i class="fas fa-code"></i> | |
| <h3>2</h3> | |
| <p>Years Experience</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-project-diagram"></i> | |
| <h3>10+</h3> | |
| <p>Projects Completed</p> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-brain"></i> | |
| <h3>5+</h3> | |
| <p>AI Models Deployed</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="skills"> | |
| <div class="container"> | |
| <h2 class="section-title">Tech Stack & Skills</h2> | |
| <div class="tech-stack-grid"> | |
| <div class="tech-category"> | |
| <h3><i class="fas fa-brain"></i> AI Engines</h3> | |
| <div class="tech-icons"> | |
| {% for tech in data.tech_stack.ai_engines %} | |
| <div class="tech-icon" data-skill="{{ tech.level }}"> | |
| <div class="icon-container"> | |
| {% if tech.icon == "custom-icon" %} | |
| <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon"> | |
| {% else %} | |
| <i class="{{ tech.icon }}"></i> | |
| {% endif %} | |
| <span class="tech-name">{{ tech.name }}</span> | |
| </div> | |
| <div class="skill-circle"> | |
| <svg class="progress-ring" width="100" height="100"> | |
| <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle> | |
| </svg> | |
| <span class="percentage">{{ tech.level }}%</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <div class="tech-category"> | |
| <h3><i class="fas fa-code"></i> Programming Languages</h3> | |
| <div class="tech-icons"> | |
| {% for tech in data.tech_stack.programming_languages %} | |
| <div class="tech-icon" data-skill="{{ tech.level }}"> | |
| <div class="icon-container"> | |
| {% if tech.icon == "custom-icon" %} | |
| <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon"> | |
| {% else %} | |
| <i class="{{ tech.icon }}"></i> | |
| {% endif %} | |
| <span class="tech-name">{{ tech.name }}</span> | |
| </div> | |
| <div class="skill-circle"> | |
| <svg class="progress-ring" width="100" height="100"> | |
| <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle> | |
| </svg> | |
| <span class="percentage">{{ tech.level }}%</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <div class="tech-category"> | |
| <h3><i class="fas fa-database"></i> Databases</h3> | |
| <div class="tech-icons"> | |
| {% for tech in data.tech_stack.databases %} | |
| <div class="tech-icon" data-skill="{{ tech.level }}"> | |
| <div class="icon-container"> | |
| {% if tech.icon == "custom-icon" %} | |
| <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon"> | |
| {% else %} | |
| <i class="{{ tech.icon }}"></i> | |
| {% endif %} | |
| <span class="tech-name">{{ tech.name }}</span> | |
| </div> | |
| <div class="skill-circle"> | |
| <svg class="progress-ring" width="100" height="100"> | |
| <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle> | |
| </svg> | |
| <span class="percentage">{{ tech.level }}%</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <div class="tech-category"> | |
| <h3><i class="fas fa-server"></i> DevOps & Tools</h3> | |
| <div class="tech-icons"> | |
| {% for tech in data.tech_stack.devops_tools %} | |
| <div class="tech-icon" data-skill="{{ tech.level }}"> | |
| <div class="icon-container"> | |
| {% if tech.icon == "custom-icon" %} | |
| <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon"> | |
| {% else %} | |
| <i class="{{ tech.icon }}"></i> | |
| {% endif %} | |
| <span class="tech-name">{{ tech.name }}</span> | |
| </div> | |
| <div class="skill-circle"> | |
| <svg class="progress-ring" width="100" height="100"> | |
| <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle> | |
| </svg> | |
| <span class="percentage">{{ tech.level }}%</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <div class="tech-category"> | |
| <h3><i class="fas fa-layer-group"></i> Frameworks</h3> | |
| <div class="tech-icons"> | |
| {% for tech in data.tech_stack.frameworks %} | |
| <div class="tech-icon" data-skill="{{ tech.level }}"> | |
| <div class="icon-container"> | |
| {% if tech.icon == "custom-icon" %} | |
| <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon"> | |
| {% else %} | |
| <i class="{{ tech.icon }}"></i> | |
| {% endif %} | |
| <span class="tech-name">{{ tech.name }}</span> | |
| </div> | |
| <div class="skill-circle"> | |
| <svg class="progress-ring" width="100" height="100"> | |
| <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle> | |
| </svg> | |
| <span class="percentage">{{ tech.level }}%</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="experience"> | |
| <div class="experience-background"> | |
| <img src="/static/more_img/a3.png" alt="AI Brain Technology" class="experience-bg-image"> | |
| </div> | |
| <div class="container"> | |
| <h2 class="section-title">Experience</h2> | |
| <div class="timeline"> | |
| {% for exp in data.experience %} | |
| <div class="timeline-item"> | |
| <div class="timeline-marker"></div> | |
| <div class="timeline-content"> | |
| <h3>{{ exp.title }}</h3> | |
| <h4>{{ exp.company }}</h4> | |
| <span class="period">{{ exp.period }}</span> | |
| <ul> | |
| {% for item in exp.description %} | |
| <li>{{ item }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="projects"> | |
| <div class="container"> | |
| <h2 class="section-title">Featured Projects</h2> | |
| <div class="projects-grid"> | |
| {% for project in data.projects %} | |
| <div class="project-card"> | |
| <div class="project-header"> | |
| <i class="fas fa-folder-open"></i> | |
| <span class="project-role">{{ project.role }}</span> | |
| </div> | |
| <h3>{{ project.name }}</h3> | |
| <p>{{ project.description }}</p> | |
| <div class="project-tech"> | |
| {% for tech in project.technologies %} | |
| <span class="tech-tag">{{ tech }}</span> | |
| {% endfor %} | |
| </div> | |
| <ul class="project-highlights"> | |
| {% for highlight in project.highlights %} | |
| <li>{{ highlight }}</li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="contact"> | |
| <div class="contact-background"> | |
| <img src="/static/more_img/a1.png" alt="AI Technology" class="contact-bg-image"> | |
| </div> | |
| <div class="container"> | |
| <h2 class="section-title">Get In Touch</h2> | |
| <div class="contact-content"> | |
| <div class="contact-text"> | |
| <p>I'm always interested in hearing about new opportunities and exciting projects in AI and technology.</p> | |
| <p>Let's build the future together with innovative solutions!</p> | |
| </div> | |
| <div class="contact-info"> | |
| <a href="mailto:{{ data.email }}" class="contact-item"> | |
| <i class="fas fa-envelope"></i> | |
| <span>{{ data.email }}</span> | |
| </a> | |
| <a href="{{ data.github }}" target="_blank" class="contact-item"> | |
| <i class="fab fa-github"></i> | |
| <span>GitHub</span> | |
| </a> | |
| <a href="{{ data.huggingface }}" target="_blank" class="contact-item"> | |
| <i class="fas fa-robot"></i> | |
| <span>Hugging Face</span> | |
| </a> | |
| <div class="contact-item"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>{{ data.location }}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p>© 2025 {{ data.name }}. Built with FastAPI & ❤️</p> | |
| </footer> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |