A neo-brutalist, interactive portfolio showcasing projects across
Web Development • AI/ML • Embedded Systems • Blockchain • Robotics
🌐 Live: https://manvithadungi.github.io/Portfolio/
🐙 GitHub: https://github.com/ManvithaDungi
💼 LinkedIn: https://www.linkedin.com/in/manvitha-dungi-8a8040211/
This portfolio is designed as a high-performance, visually distinct interface inspired by the NERV aesthetic — combining brutalist UI with smooth animations and strong system-like structure.
It reflects my work across full-stack development, intelligent systems, and real-time applications.
- Responsive, mobile-first design — Optimized for all devices with fluid layouts and adaptive typography
- Dark / Light mode with persistent state — Theme preference saved to localStorage with smooth transitions
- Smooth animations using Framer Motion — Choreographed motion sequences, spring physics, and scroll-triggered animations
- Modular component-based architecture — Reusable UI primitives and section components
- Accessible (semantic HTML + ARIA) — WCAG compliance, keyboard navigation, screen reader support
- Clean project showcase with GitHub integration — Interactive project cards with live links and repository data
- NERV-inspired brutalist aesthetics — System-like UI with strong visual hierarchy and geometric design
- Advanced visual effects — Halftone overlays, manga panels, nerve-line animations, and speed line effects
- Interactive data visualization — Radar charts for skill proficiency, animated progress indicators
- React (Vite) — Fast component-based architecture with hot module replacement
- React Router — Client-side routing for smooth page transitions
- Framer Motion — Declarative animation library with spring physics and gesture support
- React Transition Group — Page transition orchestration
- CSS3 — Grid, Flexbox, custom properties (CSS variables), transforms, transitions
- CSS-in-JS — Scoped component styles for maintainability
- Material UI Icons — SVG icon library for UI consistency
- Responsive Design — Mobile-first, breakpoint-based layouts
- Theme System — Dynamic dark/light mode with CSS variable switching
- Recharts — React charting library for animated RadarChart component
- React Icons — Vector icon library for consistent iconography
- Vite — Lightning-fast bundler with native ES modules
- ESLint — Code quality and style consistency
- Git & GitHub — Version control and deployment
Full-stack platform with real-time chat and notifications
Stack: MERN + Socket.io
Secure healthcare platform with RBAC and encryption
Stack: React, Django/Node, PostgreSQL
AI-moderated women’s health platform
Stack: React, Firebase, Gemini
AI + blockchain trading system with smart contracts
Stack: Python, Solidity, Web3
👉 Explore more in the portfolio
Languages: Python, C++, Java, JavaScript, Solidity
Frontend: React, Vite, CSS3, Framer Motion
Backend: Node.js, Express, Django, REST APIs
Databases: MongoDB, PostgreSQL, Firebase
Specialized:
AI/ML • Blockchain • Embedded Systems • Security & Cryptography
git clone https://github.com/ManvithaDungi/Portfolio.git
cd Portfolio
npm install
npm run devsrc/
├── components/
│ ├── layout/
│ │ └── Navbar.jsx — Fixed navigation with theme toggle
│ │
│ ├── sections/ — Full-width content sections
│ │ ├── Hero.jsx — Landing section with animated intro
│ │ ├── About.jsx — Bio and background
│ │ ├── Experience.jsx — Work history and achievements
│ │ ├── Skills.jsx — Interactive skill visualization with RadarChart
│ │ ├── Projects.jsx — Featured work showcase
│ │ ├── Proficiency.jsx — Technical proficiency breakdown
│ │ ├── Boot.jsx — System boot/loading sequence
│ │ └── Contact.jsx — Contact form and social links
│ │
│ └── ui/ — Reusable visual components
│ ├── HalftoneOverlay.jsx — Halftone dot matrix effect
│ ├── MangaPanel.jsx — Comic panel layout wrapper
│ ├── NervLine.jsx — Animated circuit-style lines
│ ├── RadarChart.jsx — Multi-axis skill visualization
│ ├── SpeedLines.jsx — Motion effect lines
│ ├── SystemLabel.jsx — Styled badge components
│ ├── ThemeToggle.jsx — Dark/light mode switcher
│ └── TransitionRibbon.jsx — Page transition effects
│
├── data/
│ ├── projects.js — Project metadata and links
│ └── skills.js — Skill categories and proficiency data
│
├── styles/
│ ├── globals.css — Global resets, typography, CSS variables
│ ├── animations.css — Keyframe animations and motion utilities
│ └── [Component].css — Component-scoped styles
│
├── App.jsx — Root component with routing
└── index.jsx — Entry point
- Section components — Self-contained, full-width content regions with cohesive styling
- UI primitives — Reusable visual effects composable into larger layouts
- Data-driven rendering — Projects and skills pulled from centralized data files
- Responsive wrappers — Container components that adapt to viewport
- Animation contexts — Framer Motion configurations shared across components
- 8+ major projects across multiple domains
- Strong full-stack + system-level development experience
- Hackathon participation (BNB Chain, ACM)
- Research exposure (ISI Kolkata)
This portfolio embraces a brutalist, system-inspired design language heavily influenced by the NERV aesthetic from Evangelion. The visual identity prioritizes:
- Geometric precision — Grids, clean lines, and structured layouts
- High contrast — Bold color separation and stark typography
- System-like hierarchy — Information organized with technical clarity
- Minimal ornamentation — Functional design with purposeful visual effects
- Motion as communication — Animations that guide users and reinforce structure
- Dark Mode — Deep charcoal (#0a0a0a) backgrounds with neon accents (electric blues, magentas)
- Light Mode — Crisp whites (#fafafa) with muted, high-contrast colors
- Accent Palette — Strategic use of brand colors to highlight interactive elements
- Semantic Colors — Status indicators for projects, skills, and calls-to-action
- Display Fonts — Bold, geometric sans-serif for headings (high visual impact)
- Body Fonts — Clean, readable typefaces for content (system fonts for performance)
- Scale System — Computed sizing from base scale (1.25x ratio) for visual harmony
- Weight Hierarchy — 400 (regular), 600 (semi-bold), 700 (bold) for structure
- CSS Grid — Primary layout system for sections and component grids
- Flexbox — Alignment and distribution of nested elements
- Modular Scale — Consistent spacing using multiples of base unit (8px)
- Responsive Breakpoints — Mobile-first approach with tablet (768px) and desktop (1024px) overrides
Interactive dark/light mode switcher with smooth color transitions. Persists user preference across sessions using localStorage.
Procedural halftone pattern rendering (dot matrix effect) that creates a retro, printed aesthetic over images and sections. CPU-optimized using canvas rendering.
Comic-book style layout system with irregular borders, speech bubbles, and action effects. Creates dramatic visual breaks in content.
Animated system lines and connection patterns that draw themselves on page load. Uses SVG path animations for technical, circuit-like aesthetics.
Directional motion lines (velocity streaks) that animate during transitions. Conveys dynamism and urgency, particularly in hero and section transitions.
Interactive skill proficiency visualization. Renders animated multi-axis radars using Recharts, with smooth transitions and hover interactions.
Page transition effects with cascading, ribbon-like elements. Creates continuity between sections with synchronized motion sequences.
Styled badge components for project tags, skills, and status indicators. Typography-heavy with minimal background, fitting the system aesthetic.
- Framer Motion — Core animation library for orchestrated motion sequences
- Staggered animations — Sequential, timed reveals for visual flow
- Scroll-triggered effects —
useInViewhook for viewport-based animation triggers - Spring physics — Damped spring animations for natural, organic movement
- Page transitions — Choreographed entry/exit sequences for route changes
styles/
├── globals.css — Reset, CSS variables, typography, defaults
├── animations.css — Keyframe animations, motion utilities
└── components/
├── [Component].css — Scoped styles per component
- CSS Variables — Centralized color, spacing, and timing tokens
- Grid & Flex utilities — Responsive layout helpers
- Media queries — Mobile-first with desktop enhancements
- Custom properties — Theme switching via
--theme-bg,--theme-text, etc. - Pseudo-elements — Decorative borders, highlights, and overlays
- Transitions & transforms — GPU-accelerated performance
- Root-level variables — Theme tokens toggled at
:rootor.light-theme - Automatic OS preference detection —
prefers-color-schememedia query fallback - LocalStorage persistence — User choice remembered between sessions
- Instant switching — No page reload required
| Breakpoint | Device | Adjustments |
|---|---|---|
| Mobile | < 640px | Single column, touch-optimized spacing, larger tap targets |
| Tablet | 640px—1024px | Two-column grids, adjusted font scales |
| Desktop | > 1024px | Full multi-column layouts, complex visualizations |
- Fluid typography — Font sizes scale with viewport using CSS
clamp() - Adaptive grids —
auto-fitandauto-fillwith container queries - Touch-friendly interactions — Minimum 44px tap targets
- Performance optimization — Lazy loading of visual effects on smaller screens
- CSS containment —
contain: layout, paintfor section isolation - GPU acceleration —
will-change,transform: translateZ(0)for smooth animations - Conditional rendering — Complex effects disabled on low-end devices
- Image optimization — Lazy loading, WebP formats, responsive srcsets
- Tree-shaking — Unused animations and utilities removed in production
- CSS minification — Scoped styles reduce file size
- Framer Motion optimization — Only necessary motion libraries bundled
📧 manvitha3626@email.com 📱 +91-7013702246
Feel free to fork, star, or reach out!
Built with ⚡ by Manvitha Dungi