abouhoussem
🎨 porthat - Create Your Custom Portfolio Easily
📦 Overview
Porthat is a modern, customizable portfolio template built with TanStack Start and React 19. You can configure everything through a single JSON file and deploy in just minutes. Whether you’re showcasing work or sharing your journey, Porthat makes it easy.
⚙️ Tech Stack
| Category | Technology |
|---|---|
| Framework | TanStack Start (React 19) |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion |
| Icons | Lucide React |
| Language | TypeScript |
| Build | Vite 7 |
🌟 Features
📄 Configuration
- Single-file setup: Use
data.jsonfor all settings. - 6 built-in themes: Choose your style with ease.
- Custom themes: Input Coolors.co URLs for unique designs.
- Light and dark mode: Enjoy smooth transitions between modes.
🎨 Components
- Hero section: Highlight your avatar, banner, and social links in one place.
- Auto-scrolling carousel: Showcase your skills effortlessly.
- GitHub integration: Display your contribution chart directly.
- Spotify widget: Share what you’re currently listening to.
- Expandable sections: Add your experience and education details easily.
- Project cards: Implement gradient hover effects for a modern look.
- Blog section: Include reading time estimates for your posts.
- Rotating footer quotes: Add personal touches to your footer.
📱 Technical Aspects
- Responsive design: Works great on mobile devices.
- SEO optimized: Built with Open Graph tags and best practices for search engines.
🚀 Getting Started
Follow these steps to download and set up Porthat:
-
Download the latest version: Visit the Releases page to access the latest version of Porthat.
-
Extract the files:
Once downloaded, extract the files to a location on your computer. -
Open the project folder:
Navigate to the folder where you extracted the files. -
Edit
data.json:
Opendata.jsonto customize your portfolio. Change the text, links, and settings to fit your style. -
Start the application:
- If you have Node.js installed, open your terminal or command prompt, navigate to the project folder, and run the command
npm installto install the required packages. - After the installation, run
npm run devto start the application. You can view it on your browser by navigating tohttp://localhost:3000.
- If you have Node.js installed, open your terminal or command prompt, navigate to the project folder, and run the command
📥 Download & Install
To get started with Porthat, visit this page to download. Download the latest version and follow the steps above to set it up.
🔍 Key Features in Detail
Theme Customization
Porthat allows you to select from six predefined themes or to create your own using Coolors.co URLs. This offers flexibility in personalizing your portfolio.
Social Integration
You can easily add links to your social media and other platforms in your hero section, making it simple for visitors to connect with you.
Skill Showcase
Use the autoscrolling carousel to highlight your skills. This feature adds a dynamic element to your portfolio.
GitHub Contributions
By integrating your GitHub contribution chart, you provide a live view of your work, showcasing your active presence in the development community.
Music Sharing
The Spotify widget allows you to share your current musical tastes, adding a personal touch to your portfolio.
Expandable Sections
Easily manage your experience and education by using expandable sections. This keeps your interface clean while providing detailed information when required.
Blog Functionality
Include a blog section to share your thoughts or projects. The reading time estimates help your audience gauge their time commitment.
💡 Tips for a Great Portfolio
- Keep it updated: Regularly update your projects and experiences to reflect your latest work.
- Use clear language: Write in simple terms to ensure everyone understands your skills and experiences.
- Focus on visuals: Use images to enhance your portfolio. Visuals help convey messages more effectively than text alone.
For additional help, refer to the documentation or community forums related to the technologies used in Porthat.
🌐 Support and Contributions
If you encounter any issues or have suggestions, feel free to open an issue on GitHub. Contributions are welcome if you wish to enhance Porthat further.
👋 Community
Join our community to share tips, ask questions, and gain feedback on your portfolio. Engaging with others can lead to new opportunities and insights.
By following the provided instructions, you can easily download, customize, and run Porthat to create a stunning portfolio that stands out. Enjoy the process of showcasing your work!