A world-class futuristic AI engineer portfolio website for Debashish Roy - AI Engineer & Full Stack Developer. Built with a cyberpunk + glassmorphism aesthetic, featuring smooth animations and premium micro-interactions.
- Hero Section: Cinematic effects, status widget, glassmorphism card, animated background elements, and premium CTA buttons
- Interactive Terminal: Command simulation with input/output areas and command suggestion buttons
- About Section: Floating cards, enhanced visual effects, and impact metrics counters
- Skills Network: Interactive visualization with orbiting nodes and fallback skill grid
- Project Showcase: Premium cards with filters, detailed descriptions, technology tags, GitHub links, and hover animations
- Live AI Playground: Tokenizer demo with real-time text tokenization visualization
- Timeline Section: Animated milestones with scroll-triggered animations and progress glow effects
- GitHub Activity: Contribution heatmap, stats display, and activity insights
- Experimental Lab: Holographic cards showcasing research projects and prototypes
- Contact Section: Interactive cards with hover effects and social media links
- Premium Footer: Futuristic design with social links and branding
- Command Palette: VSCode-style command palette (Ctrl+K) for quick navigation
- AI Assistant Widget: Floating chat widget with intelligent responses
- Scroll Progress: Visual progress indicator at the top of the page
- Magnetic Buttons: Interactive button effects that follow cursor movement
- Custom Cursor: Interactive cursor effect on desktop
- Particle Background: Animated particle system with connections
- Smooth Scrolling: Smooth navigation between sections
- Dynamic Navbar: Transparent to solid transition on scroll
- Active Navigation: Auto-highlight current section in navbar
- Cyberpunk Aesthetic: Neon glows, gradient effects, and futuristic styling
- Glassmorphism: Blur effects and translucent cards throughout
- Holographic Effects: Shifting gradient backgrounds
- Glitch Effects: Text glitch animations for headings
- Scanline Effects: Retro CRT-style overlays
- Responsive Design: Optimized for all screen sizes
- Accessibility: Keyboard navigation and screen reader support
- HTML5: Semantic markup
- CSS3: Custom styling with CSS variables
- TailwindCSS: Utility-first CSS framework (via CDN)
- JavaScript (Vanilla): Interactive features and animations
- GitHub API: Dynamic data fetching for stats and repositories
- A modern web browser
- Local web server (optional, for testing)
- Clone the repository:
git clone https://github.com/thedeba/thedeba.github.io.git- Navigate to the project directory:
cd thedeba.github.io- Open
index.htmlin your browser or use a local web server:
# Using Python
python -m http.server 8000
# Using Node.js
npx http-server- Visit
http://localhost:8000in your browser
thedeba.github.io/
├── index.html # Main HTML file
├── script.js # JavaScript functionality
├── style.css # Custom styles
├── assets/ # Images and static assets
│ ├── og-image.jpeg # Open Graph image
│ └── Resume - Debashish Roy.pdf
└── README.md # This file
Edit the following in index.html:
- Name and title in the hero section
- Social media links
- Contact information
- Skills and projects
The GitHub API is used in script.js to fetch:
- User profile data (for repository count)
- Repository data (for stars and forks)
To use authenticated requests (higher rate limits):
- Create a GitHub personal access token
- Update the fetch calls in
script.jsto include the token:
fetch('https://api.github.com/users/thedeba', {
headers: {
'Authorization': 'token YOUR_TOKEN_HERE'
}
})- Custom styles are in
style.css - TailwindCSS classes are used throughout
index.html - CSS variables are defined in
style.cssfor easy theming
The portfolio automatically fetches and displays:
- Total public repositories
- Total stars across all repositories
- Total forks (as a proxy for contributions)
- Contribution heatmap visualization
Note: GitHub API has rate limits (60 requests/hour for unauthenticated requests).
The terminal section supports commands:
about- Display bio informationskills- List technical skillsprojects- Show project informationcontact- Display contact detailshelp- Show available commandsclear- Clear terminal output
The live AI playground features:
- Real-time text tokenization demo
- Visual token display with animations
- Token count statistics
- Interactive input field
Press Ctrl+K (or Cmd+K on Mac) to open the command palette for:
- Quick navigation to any section
- Opening social media profiles
- Fast access to key features
The floating AI assistant widget provides:
- Intelligent responses about skills, projects, and experience
- Chat interface with message history
- Quick access to portfolio information
The hero section features a typing animation that cycles through different roles:
- AI Engineer
- Full Stack Developer
- LLM Researcher
- Innovation Builder
Projects can be filtered by category:
- All
- Machine Learning
- Web Development
- Tools
The timeline section features:
- Scroll-triggered animations
- Alternating left/right layout
- Color-coded milestone nodes
- GitHub repository integration
The website is fully responsive and works on:
- Desktop (with custom cursor and full effects)
- Tablet (optimized layout)
- Mobile (custom cursor disabled, simplified effects)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This project is designed for GitHub Pages. To deploy:
- Push to the
mainbranch - Enable GitHub Pages in repository settings
- Select source as
mainbranch - The site will be available at
https://thedeba.github.io
- Lazy loading for images
- Optimized animations
- Minimal external dependencies
- Efficient particle system
This project is open source and available under the MIT License.
Debashish Roy
- GitHub: @thedeba
- LinkedIn: imdebashishroy
- Hugging Face: @thedeba
- Email: thedeba@proton.me
- TailwindCSS for the utility-first CSS framework
- GitHub API for dynamic data
- Open source community for inspiration and resources
Built with ❤️ and lots of ☕