Satyam Raj Portfolio

A responsive React + Vite portfolio for Satyam Raj, built as a premium desktop-inspired interface with draggable windows, theme-aware avatar wallpapers, a mobile app-grid experience, and a macOS-style liquid glass dock.

Live Demo

You can find a live demo of this project on Satyam Raj Portfolio or below link.

https://satyam-raj-portfolio.vercel.app/

Features

• Light and dark avatar wallpapers
• Desktop-style portfolio interface with draggable windows
• Mobile app-grid layout for smaller screens
• macOS-inspired liquid glass dock
• Dock icon names shown on hover
• Direct contact links without backend mail setup
• Resume PDF support
• Centralized portfolio data in src/data/portfolio.js

Tech Stack

• React.js
• Vite
• Tailwind CSS
• Framer Motion
• React Icons
• Node.js static production server

Project Structure

Satyam-Raj-Portfolio/
├── public/
│   ├── Satyam_Raj.pdf
│   ├── avatar-dark.png
│   └── avatar-light.png
├── server/
│   └── index.js
├── src/
│   ├── components/
│   │   ├── Accordion.jsx
│   │   ├── DesktopIcon.jsx
│   │   ├── Dock.jsx
│   │   ├── ExperienceCard.jsx
│   │   ├── MobileAppGrid.jsx
│   │   ├── ProjectCard.jsx
│   │   ├── RetroWindow.jsx
│   │   ├── ThemeToggle.jsx
│   │   ├── WindowContent.jsx
│   │   └── iconMaps.jsx
│   ├── data/
│   │   └── portfolio.js
│   ├── hooks/
│   │   └── useTheme.js
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── render.yaml
├── tailwind.config.js
├── vercel.json
└── vite.config.js

Run Locally

Install dependencies:

npm install

Start the development server:

npm run dev

Open the URL printed by Vite:

http://localhost:5173

Build

Create a production build:

npm run build

Preview the production build locally:

npm run preview

Run the included Node static server:

npm start

Deploy on Vercel

This project is ready for Vercel deployment.

Use these settings:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

The included vercel.json is configured for Vite:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

Deploy From GitHub to Vercel

1. Push this repository to GitHub.
2. Open Vercel and choose Add New Project.
3. Import SatyamRaj1905/Satyam-Raj-Portfolio.
4. Keep the framework preset as Vite.
5. Confirm:
   • Build Command: npm run build
   • Output Directory: dist
   • Install Command: npm install
6. Click Deploy.

No environment variables are required.

Edit Portfolio Content

All personal information, experience, projects, skills, education, achievements, social links, dock links, and desktop window entries are managed in:

src/data/portfolio.js

Contact

The contact section has these many links to showcase:

• Phone
• Email
• LinkedIn
• GitHub
• LeetCode
• CSES
• Codeforces (can be enabled by going inside ./src/data/portfolio.js)
• CodeChef (can be enabled by going inside ./src/data/portfolio.js)

License and Ownership

All rights to this project belong to Satyam Raj.

Unless clearly stated otherwise, you are not allowed to copy, modify, distribute, or use this project for personal, academic, commercial, or professional purposes without permission.

Final Note

This project is a part of my personal learning and portfolio journey.

You can get inspired. You can suggest improvements. You can report issues.

But please do not clone my hard work and call it yours.