AnsrDev Portfolio

A modern, responsive portfolio website built with Astro, TailwindCSS, and TypeScript. This portfolio showcases my projects, skills, and experience as a Software Engineer.

Tech Stack

• Astro - Static site generator
• TailwindCSS - Utility-first CSS framework
• React - For interactive components
• TypeScript - Type-safe JavaScript

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher)
• pnpm (recommended package manager)

Installation

1. Clone the repository:

git clone https://github.com/ansrDev/web-portofolio.git
cd web-portofolio

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open your browser and visit http://localhost:4321

Available Scripts

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Run Astro CLI commands
pnpm astro

Project Structure

portofolio/
├── public/                 # Static assets (images, icons, etc.)
│   ├── favicon.ico
│   ├── logo.webp
│   └── ...
├── src/
│   ├── assets/            # Project assets
│   │   └── projects/
│   ├── components/        # Reusable components
│   │   ├── ui/           # UI components (buttons, cards, etc.)
│   │   ├── Button.astro
│   │   ├── CardProject.astro
│   │   └── TextFollowPath.tsx
│   ├── contents/          # Content data
│   │   └── projects/
│   │       └── project.json
│   ├── layouts/           # Page layouts
│   │   └── main.astro
│   ├── lib/              # Utility functions
│   │   └── utils.ts
│   ├── pages/            # Route pages
│   │   └── index.astro
│   └── styles/           # Global styles
│       ├── global.css
│       └── component.css
├── astro.config.mjs       # Astro configuration
├── tailwind.config.js     # TailwindCSS configuration
├── tsconfig.json          # TypeScript configuration
└── package.json

Customization

Adding New Projects

1. Add project images to src/assets/projects/
2. Update src/contents/projects/project.json with your project details:

{
  "projects": [
    {
      "name": "Your Project Name",
      "description": "Project description",
      "image": "assets/projects/your-project/image.webp",
      "links": {
        "github": "https://github.com/yourusername/project",
        "live": "https://yourproject.com"
      },
      "techStack": ["React", "TypeScript", "TailwindCSS"]
    }
  ]
}

Updating Personal Information

Edit the content in src/pages/index.astro:

• Update the name and description in the hero section
• Modify the header title
• Update footer information

Styling

• Global styles: src/styles/global.css
• Component styles: src/styles/component.css
• TailwindCSS utilities: Used throughout components

Deployment

Build for Production

pnpm build

The built files will be in the dist/ directory, ready for deployment to any static hosting service.

Deployment Options

• Vercel: Connect your GitHub repo for automatic deployments
• Netlify: Drag and drop the dist/ folder or connect via Git
• GitHub Pages: Use GitHub Actions for automated deployment
• Cloudflare Pages: Connect your repository for edge deployment

📱 Responsive Design

The portfolio is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is open source and available under the MIT License.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📧 Contact

Muhammad Ansari - @ansrDev

---

Star this repository if you found it helpful!