A modern, interactive portfolio website built with Astro, React, and Tailwind CSS, featuring a macOS-inspired interface.
- Modern Tech Stack: Built with Astro, React, and Tailwind CSS
- Terminal Interface: macOS terminal-inspired UI integrating a chatbot for a unique user experience
- Easily customizable user data: The user can easily create their own version by editing the data in the
userconfig.ts
file. - Projects' Summary: The user can add all their project for a project structure preview, in addition to the screenshots and github links.
- Notes App: The user can add all their related data in user-friendly story-telling way.
- Responsive Design: Fully responsive layout that works on all devices
- SEO Optimized: Built-in sitemap generation and SEO tools
- TypeScript Support: Full TypeScript integration for better development experience
- Vercel Deployment: Optimized for deployment on Vercel
- Astro - Modern static site builder
- React - UI component library
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Type-safe JavaScript
- Vercel - Deployment platform
- Clone the repository:
git clone https://github.com/aabdoo23/portfolio
cd portfolio
- Install dependencies:
npm install
- Create a
.env
file in the root directory and add your environment variables:
GROQ_API_KEY = YOUR_GROQ_API_KEY
-
Access the
userconfig.ts
file and start putting in your data. -
To generate json files for your projects, I have provided a
github_repo_parser.py
file in theutil
folder, you can provide a github token to avoid rate limiting to the call of the parser in the main
def main():
parser = GitHubRepoParser('ghp_YOUR_TOKEN_HERE')
To start the development server:
npm run dev
This will start the development server at http://localhost:4321
.
To build the project for production:
npm run build
To preview the production build:
npm run preview
npx vercel deploy --prod
or
npx vercel deploy
and select the image from the vercel dashboard.
There is a bug with direct deployment from github, i can't seem to figure it out tbf, so for the time being use the above commands after running npm run build
.
├── src/
│ ├── components/ # React components
│ ├── layouts/ # Layout components
│ ├── pages/ # Astro pages
│ ├── styles/ # Global styles
│ ├── config/ # Configuration files
│ └── assets/ # Static assets
├── public/ # Public assets
├── .astro/ # Astro build files
├── util/ # Utility functions
└── astro.config.mjs # Astro configuration
The project is configured through several key files:
astro.config.mjs
: Main Astro configurationtsconfig.json
: TypeScript configurationtailwind.config.js
: Tailwind CSS configuration
The project is configured for deployment on Vercel. To deploy:
- Push your changes to your GitHub repository
- Connect your repository to Vercel
- Vercel will automatically deploy your site
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by macOS terminal interface
- Built with modern web technologies
- Thanks to all contributors and maintainers of the open-source tools used in this project
For questions or support, please open an issue on GitHub.
Original version made with ❤️ in Austin, TX by Johnny Culbreth Modified with ❤️ in Giza, Egypt by aabdoo23