A modern, full-stack portfolio website built with React, TypeScript, Express, and Tailwind CSS.
- 🎨 Modern UI with dark mode support
- ⚡ Fast development with Vite
- 🎯 Type-safe with TypeScript
- 🎨 Beautiful components with shadcn/ui
- 📱 Fully responsive design
- 📦 Easy deployment to Replit
- React 19
- TypeScript
- Vite
- Tailwind CSS
- shadcn/ui components
- Wouter (routing)
- TanStack Query
- Framer Motion (animations)
- Node.js
- Express
- TypeScript
- Node.js 20.x or higher
- npm
- Clone the repository:
git clone https://github.com/teamapexofc/Simpleportofolio/
cd Simpleportofolio- Install dependencies:
npm install- Start the development server:
npm run devThe application will be available at:
- Frontend: http://localhost:5000
- Backend API: http://localhost:5000/api
npm run dev- Start development server (both frontend and backend)npm run dev:client- Start only the frontend development servernpm run build- Build for productionnpm run start- Start production servernpm run check- Type check with TypeScript
├── client/ # Frontend application
│ ├── src/
│ │ ├── components/ # React components
│ │ │ └── ui/ # Reusable UI components (shadcn/ui)
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utility functions
│ │ └── index.css # Global styles
│ └── index.html # HTML template
├── server/ # Backend application
│ ├── app.ts # Express app setup
│ ├── routes.ts # API routes
│ ├── index-dev.ts # Development server
│ └── index-prod.ts # Production server
├── shared/ # Shared types and schemas
└── attached_assets/ # Static assets (images, etc.)
Visit /download to download the complete portfolio source code as a ZIP file.
Built with mobile-first approach using Tailwind CSS breakpoints.
Smooth animations powered by Framer Motion for an engaging user experience.
The easiest way to deploy this portfolio is using Vercel:
- Push your code to a GitHub repository
- Visit vercel.com and sign in
- Click "New Project"
- Import your GitHub repository
- Vercel will automatically detect the framework and configure:
- Build Command:
npm run build - Output Directory:
dist/public - Install Command:
npm install
- Build Command:
- Click "Deploy"
- Your portfolio will be live at
<your-project>.vercel.app
You can also connect a custom domain in the Vercel project settings.
To run the development server locally:
npm run devThe application will be available at http://localhost:5000
- Update meta tags in
client/index.html - Replace favicon in
client/public/ - Update content in components (Hero, About, Contact, etc.)
- Modify
client/src/index.cssfor global styles - Update Tailwind configuration as needed
- Customize shadcn/ui components in
client/src/components/ui/
- Hero Section: Edit
client/src/components/Hero.tsx - About Section: Edit
client/src/components/About.tsx - Projects: Edit
client/src/components/Projects.tsx - Contact Info: Edit
client/src/components/Contact.tsx - Footer Links: Edit
client/src/components/Footer.tsx
- Add new routes in
server/routes.ts - Backend runs on the same domain in production
After deployment, your portfolio will have:
- Main Site:
https://<your-project>.vercel.app(or your custom domain) - Download Source:
https://<your-project>.vercel.app/download
- React 19 - Modern UI library
- TypeScript - Type-safe development
- Vite - Fast build tool
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - High-quality UI components
- Framer Motion - Animation library
- Express - Backend server
- Wouter - Lightweight routing
MIT - Feel free to use this portfolio template for your own projects!
Contributions are welcome! Feel free to submit issues and pull requests.
For issues or questions:
- Open an issue on GitHub
- Check existing issues for solutions
Built with ❤️ by ApeX Development using React and TypeScript