Skip to content

Latest commit

 

History

History
106 lines (75 loc) · 3.02 KB

README.md

File metadata and controls

106 lines (75 loc) · 3.02 KB
Raw

Blockchain Website Template

A pixel-perfect implementation of a blockchain website template, developed with modern web technologies and responsive design principles.

🚀 Technologies Used

  • Astro - Modern all-in-one web framework
  • TypeScript - For type safety and better development experience
  • Tailwind CSS - For utility-first styling
  • Framer Motion - For smooth animations and transitions

📱 Responsive Design

The website is carefully crafted to be responsive across three main breakpoints:

  • Mobile
  • Tablet
  • Desktop

Custom width values have been implemented to demonstrate advanced customization capabilities and precise design adherence.

🎯 Key Features

  • Pixel-perfect implementation of the design template
  • Dark theme optimized for blockchain aesthetic
  • Smooth animations and transitions
  • Fully responsive layout with custom breakpoints
  • TypeScript integration for enhanced code reliability
  • Modern and clean code architecture

🛠️ How to Use This Project for Learning

  1. Clone the repository
  2. Install VS Code with the Git Graph extension
  3. Reference the design screens in the screens directory for each device size
  4. Follow the commit history step by step using Git Graph
    • Each commit represents a specific implementation stage
    • Commits are organized to show the progressive development
    • Learn how to approach pixel-perfect development methodically

📂 Project Structure

root/
├── screens/          # Design reference screenshots
│   ├── mobile/
│   ├── tablet/
│   └── desktop/
├── src/
│   ├── components/   # Astro and Tsx components
│   └── content/      # Contains blog data
│   ├── pages/        # Astro pages
│   └── styles/       # Tailwind and global styles
│   └── sections/     # Sections for our App
│   └── lib/          # Utils of our app

🚀 Getting Started

  1. Install dependencies:

    npm install
# or
yarn install

  2. Run the development server:

    npm run dev
# or
yarn dev

  3. Open http://localhost:3000 in your browser

🎯 Learning Objectives

By following this project, you'll learn:

  • How to implement pixel-perfect designs
  • Responsive design techniques with Tailwind CSS
  • TypeScript integration in an Astro project
  • Animation implementation with Framer Motion
  • Professional git commit practices
  • Component-based architecture

🔄 Future Plans

  • Implement CSS variables for colors instead of direct Tailwind colors
  • Enhanced theme flexibility for easier customization
  • Potential theme switching functionality

🤝 Contributing

Feel free to fork this project and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.

📝 License

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

Built with ❤️ by Hardik Rathod