Dark monochromatic grayscale visual style with an animated canvas grid background and glassmorphism card effects
ReactPortfolio
MTech-Portfolio — React Portfolio Template
By PARTH-THAKOR
MTech-Portfolio is a dark, monochromatic grayscale personal portfolio website template built with React, TypeScript, Tailwind CSS, and Vite, featuring an animated canvas grid background, glassmorphism cards, and a responsive layout.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Built with React, TypeScript, Tailwind CSS, and Vite, and configured for Firebase Hosting deployment
Includes complete resume sections such as Hero, About, Education, Experience, Projects, Achievements, and Contact
Education uses a bento grid layout, Experience uses timeline cards, and Achievements uses a 2x2 grid
Responsive layout for desktop, tablet, and mobile viewports, with smooth scroll navigation
Template Details
MTech-Portfolio is a personal portfolio website template with source code hosted on GitHub, built with React, TypeScript, Tailwind CSS, and Vite, and configured for Firebase Hosting deployment. The overall page uses a dark monochromatic grayscale style, with an animated canvas grid background, glassmorphism card effects, and smooth scroll navigation, and the layout is responsive for desktop, tablet, and mobile viewports.
The content structure is organized around a personal resume, including a Hero section (role typing carousel and call-to-action buttons), About (personal bio, academic performance, and categorized technical skills), Education (bento grid layout for undergraduate and graduate study experience with year-based typographic graphics), Experience (timeline-style career experience cards), Projects (engineering and research projects with GitHub links), Achievements (2x2 grid showcasing national exams and academic rankings), Profile Links (external links to GitHub, LinkedIn, LeetCode, and Medium), More About Me (LinkedIn call-to-action), Contact (email and location cards), and Footer (brand, copyright, and back-to-top).
Regarding usage limitations, the README mentions Firebase integration; before enabling related dynamic features, you need to configure it yourself and verify Firebase quotas and charges. Third-party assets such as demo images, fonts, and icons need to be checked separately under their respective licenses and cannot be judged solely by the code's MIT license. The repository uses the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code, provided the copyright notice and the full MIT license notice are retained when distributing.
ReactPortfolio
Is it right for your project?
Use Cases
- Individual developers or students building a portfolio website to showcase education, skills, projects, and achievements
- Resume pages that need a dark monochromatic grayscale style with dynamic background and glassmorphism effects
- Static sites using a React and Tailwind CSS stack and planned for deployment to Firebase Hosting
- As a personal homepage template, used for job applications or academic showcases after replacing copy and project data
Suitable For
- Front-end developers who want to quickly build a personal portfolio
- Master's or bachelor's students who need to showcase educational background, project experience, and awards
- Users who prefer a dark minimalist visual style and accept the React stack
- Those planning to host a static portfolio site with Firebase Hosting
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js v18 or higher and npm
- 2
After cloning the repository, run npm install to install dependencies, then npm run dev to start the local development server (default http://localhost:5173)
- 3
Run npm run build to generate a production build, with output in the dist/ directory
- 4
Before deploying to Firebase Hosting, install firebase-tools, log in, and configure the project, then run firebase deploy --only hosting
- 5
The README mentions Firebase integration; before enabling related dynamic features, you need to configure it yourself and verify Firebase quotas and charges
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version of the code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The README mentions Firebase integration; before enabling related dynamic features, you need to configure it yourself and verify Firebase quotas and charges.
- Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
- Before deploying to Firebase Hosting, you need to install and configure the Firebase CLI yourself; this is an external service dependency, and you need to prepare an account and project configuration yourself.
- The deployment process requires logging into a Firebase account and running deployment commands; using this hosting service may involve Firebase quotas and charges, which you need to verify yourself.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Ensure Firebase CLI is installed and the project is configured:
Original README
https://github.com/PARTH-THAKOR/MTech-Portfolio/blob/main/LICENSEhttps://github.com/PARTH-THAKOR/MTech-Portfolio/blob/main/README.mdfirebase login firebase deploy --only hosting
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 83 / 100
- Technologies
- React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-15
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 51180c1b95006093d92b368077841f699f52a580c1e54747716a0b4b51c9ce1d
2026-10-13T08:13:26.986Z
Source file / repository# MTech-Portfolio Personal portfolio website built with React, TypeScript, Tailwind CSS, and Vite. Deployed on Firebase Hosting. Live: [paraglide.in](https://paraglide.in) --- ## Table of Contents - [Overview](#overview) - [Tech Stack](#tech-stack) - [Project Structure](#project-structure) - [Getting Started](#getting-started) - [Build and Deploy](#build-and-deploy) - [License](#license) --- ## Overview A modern, dark-themed portfolio website designed with a monochromatic grayscale aesthetic. The site features an animated canvas grid background, glassmorphism card effects, smooth scroll navigation, and a fully responsive layout optimized for desktop, tablet, and mobile viewports. ### Sections - **Hero** -- Introduction with typewriter role cycling and call-to-action buttons. - **About** -- Bio, academic achievements, and categorized technical skills. - **Education** -- Premium bento grid layout detailing postgraduate and undergraduate studies with typographic year graphics. - **Experience** -- Timeline-based professional experience cards. - **Projects** -- Highlighted engineering and research projects with GitHub links. - **Achievements** -- 2x2 grid representing national exams and academic rank accomplishments. - **Profile Links** -- External links to GitHub, LinkedIn, LeetCode, and Medium. - **More About Me** -- LinkedIn call-to-action section. - **Contact** -- Direct email and current location cards. - **Footer** -- Branding, copyright, and back-to-top navigation. --- ## Tech Stack | Layer | Technology | |--------------|-----------------------------------| | Framework | React 19 | | Language | TypeScript 6 | | Styling | Tailwind CSS 4 | | Build Tool | Vite 8 | | Icons | Lucide React | | Fonts | Inter, Outfit (Google Fonts) | | Hosting | Firebase Hosting | | Linting | OxLint | --- ## Project Structure ``` Portfolio/ ├── public/ │ └── favicon.png ├── src/ │ ├── components/ │ │ ├── AnimatedGridBackground.tsx │ │ ├── About.tsx │ │ ├── Education.tsx │ │ ├── Contact.tsx │ │ ├── Experience.tsx │ │ ├── Achievements.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Hero.tsx │ │ ├── MoreAboutMe.tsx │ │ ├── ProfileLinks.tsx │ │ └── Projects.tsx │ ├── App.tsx │ ├── main.tsx │ └── index.css ├── index.html ├── firebase.json ├── package.json ├── tsconfig.json ├── tsconfig.app.json ├── tsconfig.node.json └── vite.config.ts ``` --- ## Getting Started ### Prerequisites - Node.js (v18 or later) - npm ### Installation ```bash git clone https://github.com/PARTH-THAKOR/MTech-Portfolio.git cd MTech-Portfolio npm install ``` ### Development Server ```bash npm run dev ``` The application will be available at `http://localhost:5173`. --- ## Build and Deploy ### Production Build ```bash npm run build ``` Output is generated in the `dist/` directory. ### Firebase Deployment Ensure Firebase CLI is installed and the project is configured: ```bash npm install -g firebase-tools firebase login firebase deploy --only hosting ``` The site is deployed to [paraglide.in](https://paraglide.in). --- ## License This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
Explore similar templates
Compare previews and descriptions within the same stack and category.
react-portfolio-template
A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.
React · Portfolio
personal-website-react
A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.
React · Portfolio
karngyan.com
A personal website and blog template for developers, built with TanStack Start, React 19, Tailwind CSS v4, and shadcn/ui. It uses MDX for articles with Shiki highlighting and GFM tables, and automatically generates RSS, sitemap, robots.txt, llms.txt, and OG images.
React · Portfolio
react-portfolio-template
A React portfolio template by Ryan Balieiro with a fixed sidebar and page-turn transitions on desktop, bottom navigation on mobile, multilingual support, light/dark themes, and content components for experience, education, skills, projects, and testimonials.
React · Portfolio
portfolio
A data scientist personal portfolio template built with React and MUI, with content centrally managed through configuration files in the assets directory.
React · Portfolio
react-portfolio
A React 16 and Material-UI developer portfolio template that centralizes personal information in a JSON Resume-compliant resume.json, with light/dark theme switching saved to local storage. It currently provides portfolio display only; resume page templates and structured data enhancements are still planned.
React · Portfolio