A modern, fast, and fully responsive personal portfolio — built to showcase your work, skills, and story with a premium, polished feel.
Preview · Features · Tech Stack · Getting Started · Deployment · Contact
This portfolio is built for a clean, modern online presence. It's powered by React 19 and Vite for near-instant load times, and styled with Tailwind CSS v4 and shadcn/ui for a sleek, premium interface. Every section is modular and fully responsive, so it looks great from a small phone screen to a large desktop monitor.
| Feature | Description |
|---|---|
| 🎨 Modern UI/UX | A stunning, premium design following modern web design principles |
| ⚡ Blazing Fast | Powered by Vite + React 19 for instant load times and smooth rendering |
| 🧩 Component-Driven | Built with clean, reusable, and modular React components |
| 🎞️ Smooth Animations | Subtle micro-animations via tw-animate-css and custom transitions |
| 🔁 Interactive Elements | Continuous marquees (react-fast-marquee) and dynamic UI touches |
| 🧭 Client-Side Routing | Smooth navigation between pages with react-router-dom |
Core
| Tool | Purpose |
|---|---|
| React 19 | UI library |
| Vite | Frontend tooling & bundler |
| React Router | Client-side navigation |
Styling & UI
| Tool | Purpose |
|---|---|
| Tailwind CSS v4 | Utility-first CSS framework |
| shadcn/ui | Beautifully designed, accessible components |
| Base UI | Unstyled, accessible React primitives |
Icons & Typography
| Tool | Purpose |
|---|---|
| Lucide React | Consistent, lightweight icon set |
| FontAwesome | Vector icons & social logos |
| Remix Icon | Neutral-style system icons |
| Inter | Modern sans-serif typeface |
├── public/ # Static assets (favicon, preview.png, etc.)
├── src/
│ ├── assets/ # Images, fonts, and local media
│ ├── components/ # Reusable UI components (Menu, Profile, etc.)
│ │ ├── body/ # Main page sections (Home, etc.)
│ │ └── ui/ # Generic UI elements (shadcn/ui)
│ ├── lib/ # Utility functions
│ ├── Projects/ # Project showcase components
│ ├── App.jsx # Root layout component
│ ├── AppRoutes.jsx # Routing configuration
│ ├── index.css # Global styles and Tailwind configuration
│ └── main.jsx # Application entry point
├── package.json # Project dependencies and scripts
└── vite.config.js # Vite configuration
Follow these steps to get a local copy up and running.
- Node.js v18 or newer
- npm or yarn
# 1. Clone the repository
git clone https://github.com/DevMahida/React-Portfolio.git
# 2. Move into the project directory
cd React-Portfolio
# 3. Install dependencies
npm install
# 4. Start the development server
npm run devThen open your browser at http://localhost:5173 🎉
| Command | Description |
|---|---|
npm run dev |
Starts the Vite development server |
npm run build |
Bundles the app into static files for production |
npm run preview |
Serves the production build locally for testing |
npm run lint |
Runs ESLint to catch code quality/style issues |
Make it yours in a few steps:
- Your info — update
src/components/Profile.jsxand related body components with your name, bio, skills, and resume. - Your projects — add entries in the
src/Projectsdirectory. - Your colors — tweak the theme in
src/index.css/ Tailwind config. - Your images — swap out placeholder images in
src/assets. - Your screenshot — don't forget the preview image at the top of this README once your site is ready!
Deployment is currently pending and will be completed in the future. Once deployed, the live link will be added here!
