A premium, highly interactive, and production-ready portfolio website designed for software engineers and AI developers. Built with a modern dark-mode aesthetic, sleek glassmorphism panels, smooth cursor tracking glows, and fully custom animations.
Explore the live website here: My Portfolio
- 🌟 Dynamic Dark-Mode Aesthetic: Curated deep-space color palettes, neon accents, and smooth gradient overlays.
- 🖱️ Interactive Cursor Tracking Glow: A premium backdrop glow spot that dynamically follows the user's cursor pointer on desktop.
- ⌨️ Typewriter Title Sequence: Dynamic cycling job titles in the Hero section with smooth caret blink micro-animations.
- 📱 Fully Responsive Layout: Built mobile-first and audited on viewports from
320pxto1440pxwith zero horizontal overflow. - 🗺️ Interactive CSS Mockups: Visually rich simulation cards showcasing code, charts, graphs, and visual paths directly in the Projects section.
- 📑 Integrated PDF Resume Options: Seamlessly toggle between opening the official PDF resume in a new tab or initiating a direct download.
- 🔍 SEO & Indexing Ready: Out-of-the-box metadata schema, Open Graph (OG) tags, Twitter Card tags,
robots.txt, and asitemap.xmlstructure. - ♿ Accessibility (A11y) Focused: Restored clear keyboard focus borders (
focus-visible) on key interface buttons, and mapped full screen-reader label contexts.
- Frontend Core: React 19, JavaScript (ES6+), HTML5, CSS3
- Build Engine & Server: Vite 8, PostCSS,
@tailwindcss/vite - Animations & Gestures: Framer Motion 12
- Icon Suite: Lucide React
- Formatting & Linters: Oxlint
Portfolio/
├── .vscode/ # Workspace-specific editor settings
│ └── settings.json # Suppresses custom CSS at-rule warnings
├── public/ # Static assets copied directly to build root
│ ├── Pravalika_Palle_Resume.pdf
│ ├── favicon.svg
│ ├── robots.txt
│ └── sitemap.xml
├── src/ # Core React application source code
│ ├── assets/ # Icons and image elements
│ ├── components/ # Reusable UI component modules
│ │ ├── About.jsx # About summary & core focus layout
│ │ ├── Certifications.jsx # Verified credential cards
│ │ ├── Contact.jsx # Message form & contact cards
│ │ ├── Experience.jsx # Timeline milestones & intern roles
│ │ ├── Footer.jsx # Attribution footer details
│ │ ├── Hero.jsx # Intro typewriter & interactive CTAs
│ │ ├── Navbar.jsx # Sticky scrolling header & drawer
│ │ ├── Projects.jsx # Project mockups & repository actions
│ │ ├── Resume.jsx # Digital credentials board
│ │ └── Skills.jsx # Organized technology Split-Grids
│ ├── App.jsx # Main parent layout & scroll progress
│ ├── config.js # Central contact/data config file
│ ├── index.css # Tailwind V4 import & custom CSS theme
│ └── main.jsx # React DOM renderer entrypoint
├── index.html # Main HTML wrapper & SEO header scripts
├── package.json # Scripts & dependency definitions
└── vite.config.js # Vite configuration & plugin integrations
Ensure you have Node.js (v18 or higher) and npm installed on your system.
Clone the repository and install the project dependencies:
git clone https://github.com/pravalika2307/Portfolio.git
cd Portfolio
npm installLaunch the local Vite development server:
npm run devOpen your browser and navigate to: http://localhost:5173/
Compile and bundle the project assets for deployment:
npm run buildThe optimized production output will be generated inside the /dist directory.
This project is fully compatible with Vercel for instant edge-hosting:
- Sign in to your Vercel Dashboard.
- Click New Project and import your GitHub repository.
- Configure the build parameters:
- Framework Preset:
Vite - Build Command:
npm run build - Output Directory:
dist
- Framework Preset:
- Click Deploy. Vercel will automatically build the site and provide a SSL-secured live domain.
(Placeholder section to add screenshots of your stunning dark-mode UI)
| Desktop View | Mobile View |
|---|---|
Pravalika Palle
- GitHub: github.com/pravalika2307
- LinkedIn: linkedin.com/in/pravalikapalle23
- Email: pravalikareddy722@gmail.com
This project is licensed under the MIT License - see the LICENSE file for details.