- ✨ Introduction
- ⚙️ Tech Stack
- 📝 Features
- 🚀 Quick Start
[EN] This project is a test and my first experience with the Astro framework. It showcases a simple portfolio concept for a graphic artist. I used React, TypeScript, Astro, Tailwind CSS, and Framer Motion to create a visually engaging and interactive site.
[FR] Ce projet est un test et ma première expérience avec le framework Astro. Il présente un concept simple de portfolio pour un artiste graphique. J'ai utilisé React, TypeScript, Astro, Tailwind CSS et Framer Motion pour créer un site visuellement attrayant et interactif.
-
Astro is a modern static site generator designed for speed. It allows you to build websites faster with its optimized build process that ships zero JavaScript by default. Astro supports multiple frontend frameworks, including React, Vue, and Svelte, enabling you to use your favorite tools. It also offers powerful features like server-side rendering, partial hydration, and a straightforward component-based architecture, making it ideal for building highly performant static websites and applications.
-
React is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain.
-
TypeScript is a statically typed superset of JavaScript that allows for early detection of errors and more robust, maintainable code. TypeScript's type system helps developers catch mistakes early during the development process, ensuring a more stable and reliable application.
-
Framer Motion is a React animation library designed for creating smooth, interactive animations and transitions. It simplifies complex animations with a straightforward API, supports gesture-based interactions, and offers physics-based animations for realistic motion effects.
-
Tailwind is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone {git remote URL}
Installation
Let's install the project dependencies, from your terminal, run:
npm install
# or
yarn install
Running the Project
Installation will take a minute or two, but once that's done, you should be able to run the following command:
npm run dev
# or
yarn devOpen http://localhost:3000 in your browser to view the project.