Personal Website - Tazhibaev Iskhak (Assignment Level, for now)

Theme Statement: From rural Kyrgyzstan to the world of AI — a journey through code, competitions, and community.

Access Information

Live Website: https://tottsss.github.io/My-Website/
Local Access: Open index.html in any modern web browser Screenshots: https://github.com/tottsss/My-Website/tree/main/screenshots_website Note: This is my personal portfolio website. I built it to share my journey from a small region in Kyrgyzstan to pursuing AI research, and to connect with other people interested in competitive programming, cybersecurity, and AI.

Site Map

This is a single-page website with 7 main sections connected by in-page navigation:

Homepage (index.html)
├── Home (#home)
│   └── Hero section with introduction and value statement
├── About (#about)
│   ├── My Journey
│   ├── What Drives Me
│   ├── Technical Interests
│   └── Looking Forward
├── Gallery (#gallery)
│   ├── Personal photos (4 images)
│   └── Additional professional images (3 images)
├── Projects (#projects)
│   ├── Art of Science STEM Initiative
│   ├── School Olympiad Center
│   ├── Junior Competitive Programming Camp
│   └── AI Programming at NEAR.ai
├── High School Dream (#highschool)
│   └── Personal reflection on IOI journey
├── Timeline (#timeline)
│   └── Interactive timeline with 10 milestones (2006-2026)
└── Contact (#contact)
    └── Contact information and links

Navigation Structure

• Fixed Navigation Bar: Sticky top navigation with links to all 7 sections
• Mobile Navigation: Hamburger menu for responsive mobile experience
• In-page Navigation: Smooth scrolling between sections
• External Links:
  • GitHub Repository: https://github.com/tottsss/My-Competitive-Programming
  • Email: iskhak.tazhibaev@mbzuai.ac.ae

Design Notes

Design Philosophy

The website balances academic professionalism with personal authenticity. It tells a story of growth from rural origins to international opportunities, emphasizing learning, teaching, and community impact rather than pure achievement listing.

Color Scheme

• Primary Blue: #2563eb - Used for links, buttons, and accents
• Dark Text: #1e293b - Main headings and important text
• Gray Text: #64748b - Body text and descriptions
• Light Backgrounds: #f8fafc and #ffffff - Alternating section backgrounds
• Success Green: #10b981 - Timeline active states and positive elements

Typography

• Font Family: Inter (Google Fonts) - Modern, clean, highly readable
• Heading Hierarchy:
  • Hero Title: 3.5rem (56px)
  • Section Titles: 2.5rem (40px)
  • Subsection Headings: 1.5-1.8rem (24-29px)
  • Body Text: 1.05-1.2rem (17-19px)

Layout & Spacing

• Container Width: Max 1200px for optimal readability
• Section Padding: 80px vertical spacing
• Grid Systems:
  • Gallery: Auto-fit minmax(300px, 1fr)
  • Projects: Auto-fit minmax(300px, 1fr)
  • Timeline: Alternating left-right layout

Key Design Features

1. Hero Section

• Bold, uppercase tagline with gradient text effect
• Profile photo with hover animation
• Three call-to-action buttons with GitHub integration
• Introduces theme immediately

2. Interactive Timeline

• Vertical timeline with animated dots
• Scroll-triggered fade-in animations
• Alternating left/right content layout
• Color-coded tags for event categories
• Pulsing animation on current year (2026)
• Progress bar that fills as user scrolls

3. High School Dream Section

• Personal, vulnerable storytelling
• Two-column layout (image + text)
• Styled quote block with blue border
• "What I Learned" section with checkmarks
• Balances achievement-heavy content

4. Visual Consistency

• Consistent card design across Projects and Gallery
• Hover effects on all interactive elements
• Smooth transitions (0.3s ease)
• Box shadows for depth: 0 4px 20px rgba(0, 0, 0, 0.08)

Responsive Design

Breakpoints:

• Mobile: < 480px
• Tablet: 481px - 768px
• Desktop: > 768px

Mobile optimizations:

• Hamburger menu navigation
• Single-column layouts
• Reduced font sizes
• Timeline switches to left-aligned layout
• Stacked buttons and cards

Screenshots

Note: Screenshots should be added to a screenshots/ folder in the project root before final submission. Recommended screenshots to include:

Desktop View - Hero Section

The landing page features a bold tagline, profile photo, and clear call-to-action buttons
What to capture: Full hero section showing tagline, name, description, and three buttons

Desktop View - Timeline Section

Interactive timeline with alternating left-right layout and animated elements
What to capture: Timeline section showing the vertical line with at least 3-4 timeline items visible

Desktop View - High School Dream

Personal reflection section with image and structured lessons learned
What to capture: The two-column layout with photo on left and text/lessons on right

Desktop View - Projects Section

Project cards in grid layout showing all four projects
What to capture: The complete projects section with all four project cards visible

Mobile View - Navigation

Responsive hamburger menu for mobile devices
What to capture: Mobile view (< 768px width) with hamburger menu opened showing all navigation links

Mobile View - Timeline

Timeline adapts to single-column layout on mobile
What to capture: Mobile view of timeline section showing left-aligned layout

How to take screenshots:

1. Open index.html in a web browser
2. For desktop: Use full screen (1920x1080 recommended)
3. For mobile: Use browser DevTools responsive mode (375px width for mobile)
4. Use browser's built-in screenshot tool or screen capture
5. Save as PNG files with the names shown above
6. Create screenshots/ folder and place all images there

Media Credits

Personal Images (Own Content)

• images/photo_profile.jpeg - Personal profile photo
• images/usualday_studying.jpeg - Personal study day photo
• images/𝐌𝐑 𝐑𝐎𝐁𝐎𝐓.jpg - Personal photo
• images/highschooldream_IOIolympiad.jpeg - Personal IOI reflection photo

Third-Party Images (Unsplash)

All images used under the Unsplash License (free to use for commercial and non-commercial purposes):

1. Programming Competition Scene
   Source: https://unsplash.com/photos/turned-on-gray-laptop-computer-4Mw7nkQDByk
   Photographer: Luca Bravo
   Used in: Gallery section

2. Modern University Campus
   Source: https://unsplash.com/photos/white-concrete-building-during-daytime-XGAZzyLzn18
   Photographer: MD Duran
   Used in: Gallery section

3. Team Collaboration
   Source: https://unsplash.com/photos/people-sitting-down-near-table-with-assorted-laptop-computers-QckxruozjRg
   Photographer: Marvin Meyer
   Used in: Gallery and Projects sections

4. AI Research Laboratory
   Source: https://unsplash.com/photos/turned-on-monitoring-screen-JKUTrJ4vK00
   Photographer: Stephen Dawson
   Used in: Gallery and Projects sections

5. Educational Environment
   Source: https://unsplash.com/photos/person-using-macbook-pro-on-table-Sk-C-om8Rk4
   Photographer: Daniel Korpai
   Used in: Projects section

Icons & Graphics

• GitHub Icon (SVG): Embedded SVG path from GitHub's official icon set (MIT License)
• Font: Inter by Rasmus Andersson (Open Font License)

Video Placeholders

• Video sections have been removed from final design
• Original placeholder thumbnails were from Unsplash (same license as above)

Technical Implementation

File Structure

My Website - Copy/
├── index.html              # Main HTML file (508 lines)
├── styles.css              # All styling (1026 lines)
├── script.js               # JavaScript functionality (245 lines)
├── README.md               # This documentation file
├── MEDIA_GUIDE.md          # Additional media documentation
├── CV_mbzuai.md            # CV content reference
├── images/                 # Image assets
│   ├── photo_profile.jpeg
│   ├── usualday_studying.jpeg
│   ├── 𝐌𝐑 𝐑𝐎𝐁𝐎𝐓.jpg
│   └── highschooldream_IOIolympiad.jpeg
└── videos/                 # Video directory (unused in final version)

Technologies Used

• HTML5: Semantic markup, accessibility features
• CSS3: Custom properties, flexbox, grid, animations
• JavaScript (ES6+): Interactive features, scroll animations
• External Dependencies:
  • Google Fonts (Inter)
  • Unsplash images (CDN links)

JavaScript Features

1. Mobile Navigation Toggle: Hamburger menu with smooth animations
2. Smooth Scrolling: Enhanced in-page navigation
3. Active Link Highlighting: Updates nav based on scroll position
4. Intersection Observer: Fade-in animations for sections
5. Timeline Animations:
   • Scroll-triggered item animations
   • Staggered entrance timing (200ms delay between items)
   • Click handlers for timeline items
   • Hover effects on timeline dots
   • Dynamic progress bar animation
6. Navbar Background Change: Subtle backdrop blur on scroll

Bonus Features Implemented

Responsive Layouts

Implementation:

• Media queries at 768px and 480px breakpoints
• Flexible grid systems using CSS Grid with auto-fit and minmax()
• Mobile-first hamburger navigation
• Timeline layout switches from alternating to left-aligned on mobile
• Font sizes scale appropriately across devices

Effect:

• Seamless experience across desktop (1920px+), tablet (768-1024px), and mobile (320-480px)
• Navigation remains accessible on all screen sizes
• Content reflows naturally without horizontal scrolling

Dynamic Features (JavaScript)

Implementation:

• Intersection Observer API for scroll-triggered animations
• Event listeners for navigation, timeline interactions
• Dynamic DOM manipulation for active states
• Smooth scroll behavior with offset calculations
• Timeline progress bar updates based on scroll position

Effect:

• Engaging user experience with smooth animations
• Interactive timeline elements (clickable, hoverable)
• Professional polish with attention to detail
• Performance-optimized (no heavy frameworks)

Public Hosting

Implementation:

• Website prepared for external hosting
• Clean file structure with relative paths
• No server-side dependencies
• Ready for GitHub Pages, Netlify, or Vercel deployment

Effect:

• Portfolio accessible to anyone via URL
• Professional online presence
• Easy to share with employers, professors, peers

Content Organization

Focused Topic

The website tells a cohesive story: a student from rural Kyrgyzstan pursuing education in AI and competitive programming while giving back through teaching and mentorship.

Real Information

• Specific locations (Batken, MBZUAI)
• Actual projects with descriptions
• Real GitHub repository linked
• Genuine personal reflection in "High School Dream"
• Authentic timeline of educational journey

Clear Organization

• Logical flow: Introduction → Background → Work → Reflection → Timeline → Contact
• Each section has clear purpose
• Visual hierarchy guides eye through content
• Navigation makes any section instantly accessible

Accessibility Features

• Semantic HTML5 elements (<nav>, <section>, <header>)
• Alt text on all images
• Sufficient color contrast (WCAG AA compliant)
• Keyboard navigation support
• Focus states on interactive elements
• Readable font sizes (minimum 16px body text)

Browser Compatibility

Tested and working on:

• Chrome 120+ (recommended)
• Firefox 120+
• Safari 17+
• Edge 120+

Performance Optimizations

• Minimal external dependencies (only Google Fonts)
• CSS animations use GPU-accelerated properties (transform, opacity)
• Images loaded from CDN with optimized sizes
• JavaScript uses efficient event delegation
• No render-blocking resources

Future Enhancements (Not Implemented)

• Dark mode toggle
• Blog section for technical writing
• Project filtering by technology
• Contact form with backend
• Animations on scroll for more sections
• Achievement badges/certifications section

Credits & Acknowledgments

Developer: Tazhibaev Iskhak
Institution: MBZUAI (Mohammed bin Zayed University of Artificial Intelligence)
GitHub: @tottsss

Special Thanks:

• Unsplash photographers for high-quality free images
• Google Fonts for the Inter typeface
• The open-source community for inspiration and resources

Last Updated: January 2025
Version: 1.0
License: Personal portfolio project
Built by: Tazhibaev Iskhak