Neha Rao - Bioinformatics Portfolio

https://n3harao.github.io/Neha-Rao-Portfolio/: A professional, high-performance, responsive portfolio website built to showcase my academic background, professional experience, research projects, and skills as a Bioinformatics Specialist. This portfolio highlights the fusion of data science, machine learning, and biological research.

Features

• Dynamic Interactive Background: A custom-built HTML5 canvas animation (canvas-bg.js) generating a vibrant, glowing, multi-colored tree-like molecular network that reacts to mouse interaction and dynamically fills the screen.
• Scenic Day/Night Theme Toggle: A custom interactive day and night scenery switch featuring sliding sun and moon elements with custom high-resolution scenery backgrounds changing between light and dark modes.
• Dark Mode by Default: Designed natively with a cohesive dark-themed aesthetic specifically chosen to make bioinformatics visualizations and code snippets pop, seamlessly integrated with a toggleable light mode.
• Publications Section: Dedicated list of published research highlighting context-specific trans-regulatory programs, utilizing glassmorphism aesthetics and quick-copy citation functions.
• Interactive Experience & Education Sections: Expandable card details for professional roles and clickable academic program links integrating seamlessly into the UI.
• Custom Project Artwork: Abstract, bioinformatics-themed visualizations generated specifically for each project card (e.g., RNA-seq dashboards, scRNA-seq replications).
• Modular Component Design: Content is cleanly separated across individual pages (index.html, projects.html, experience.html, and education.html) for fast loading times and easy scalability without the overhead of heavy JavaScript frameworks.
• 100% Responsive Grid Layouts: Mobile-first approach using native CSS flexbox and grid layouts, ensuring perfect legibility and card layouts up to 8K resolution.
• No Third-Party Frameworks: Built purely with semantic HTML5, Vanilla JavaScript, and raw CSS for maximal flexibility, fine-grained control over micro-animations, and blistering fast load speeds.

Tech Stack

• HTML5: Semantic architecture for accessible and structurally sound pages.
• CSS3: Heavy use of modern CSS conventions including Custom Properties (variables), grid, flex, pseudo-elements (::before), backdrop-filters (glassmorphism), and keyframe animations.
• Vanilla JavaScript Setup: Pure ES6+ scripting handles the theme switching logic, dynamic copyright years, mobile hamburger navigation, and advanced high-framerate HTML Canvas particle animations.

Directory Structure

Neha-Rao-Portfolio/
│
├── index.html                  # Home page (Hero section, objective)
├── projects.html               # Project portfolio
├── experience.html             # Professional roles & internships
├── education.html              # Degree descriptions and coursework
│
├── css/
│   ├── style.css               # Core base styling, typography, layout
│   └── utilities.css           # Component styling and layout utilities
│
├── js/
│   ├── script.js               # Site functionality (navigation, theme toggle)
│   └── canvas-bg.js            # Molecular / phylogenetic network animation
│
├── assets/                     # Images, icons, logos, SVGs
│
├── src/
│   └── _config.yml             # GitHub Pages / Jekyll configuration
│
└── README.md                   # Repository documentation

Setup and Development

Since this project avoids compiling stages (like Webpack or Vite) and runs on pure frontend technologies, it is incredibly simple to set up and run.

1. Clone the repository:

   git clone https://github.com/N3haRao/Neha-Rao-Portfolio.git
   cd Neha-portfolio

2. Launch locally: Open the /src/index.html file directly in your web browser of choice.

   Alternatively, if you prefer using a local web server (such as the VS Code Live Server extension, or Python's built-in module), run the following from within the src/ directory to avoid CORS warnings when loading external assets:

   cd src
   python -m http.server 8000

   And navigate to http://localhost:8000/index.html.

License

Copyright © Neha Rao. All rights reserved.