Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anabartos/portfolio-anabartos
This project is a personal portfolio website built using React and styled with Tailwind CSS. It leverages Framer Motion for smooth animations and transitions, and several additional libraries to enhance functionality and appearance.
https://github.com/anabartos/portfolio-anabartos
css html javascript portfolio-website react tailwindccs website
Last synced: 10 days ago
JSON representation
This project is a personal portfolio website built using React and styled with Tailwind CSS. It leverages Framer Motion for smooth animations and transitions, and several additional libraries to enhance functionality and appearance.
- Host: GitHub
- URL: https://github.com/anabartos/portfolio-anabartos
- Owner: anabartos
- Created: 2024-11-27T18:10:14.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-11-27T22:56:33.000Z (27 days ago)
- Last Synced: 2024-11-27T23:28:44.460Z (27 days ago)
- Topics: css, html, javascript, portfolio-website, react, tailwindccs, website
- Language: JavaScript
- Homepage: https://portfolio-anabartos.netlify.app/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio Ana Bartos
This project is a personal portfolio website built using React and styled with Tailwind CSS. It leverages Framer Motion for smooth animations and transitions, and several additional libraries to enhance functionality and appearance.
## Features
1. Hero Section
Displays a profile picture and key personal information.
Smooth animations for text and image elements using Framer Motion.
2. About Me Section
A brief introduction with a background image.
Animated transitions for title and text.
3. Experiences Section
Displays a timeline of professional experiences.
Each entry includes the year, role, company, description, and technologies used.
Animations for individual items to appear dynamically.
4. Technologies Section
Highlights key technical skills with icons (e.g., JavaScript, Python, React).
Floating animation for icons using Framer Motion.
5. Projects Section
Showcases personal projects with links, descriptions, and technologies used.
Dynamic animations for project cards and elements.
6. Contact Section
Displays social media icons (LinkedIn, GitHub, Twitter) with hover effects.
Includes email and phone contact information.
Smooth appearance animations for all elements.
7. Navbar
A responsive navigation bar with links to each section.
Includes a mobile menu toggle for smaller screens.
## Tech Stack
Frontend
React: For building the UI components.
Tailwind CSS: For utility-first styling.
Framer Motion: For animations and transitions.
Icons
React Icons: For a wide range of icons used across the site.
Images
Custom assets: Includes profile pictures, project images, and a logo.
## Installation & Setup
Clone the repository:
``bash
git clone (https://github.com/anabartos/Portfolio-AnaBartos.git)
``
Navigate to the project directory:
``bash
cd portfolio-website
``
Install dependencies:
``bash
npm install
``
Start the development server:
``bash
npm start
``
Open the site in your browser at http://localhost:3000.
## Project Structure
plaintext
Copiar código
src/
├── components/ # React components for different sections (Navbar, Hero, AboutMe, etc.)
├── assets/ # Static assets like images and logos
├── constants/ # Static content for the site (ABOUT_TEXT, CONTACT, etc.)
├── App.js # Main app entry point
├── index.js # React DOM render
└── styles/ # Tailwind CSS configuration