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

1. Clone the repository:

git clone https://github.com/aabdoo23/portfolio
cd portfolio

2. Install dependencies:

npm install

3. Create a .env file in the root directory and add your environment variables:

GROQ_API_KEY = YOUR_GROQ_API_KEY

4. Access the userconfig.ts file and start putting in your data.

5. To generate json files for your projects, I have provided a github_repo_parser.py file in the util 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 configuration
• tsconfig.json: TypeScript configuration
• tailwind.config.js: Tailwind CSS configuration

The project is configured for deployment on Vercel. To deploy:

1. Push your changes to your GitHub repository
2. Connect your repository to Vercel
3. 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