A modern, responsive, and customizable photography portfolio site built with Vite, TailwindCSS, and vanilla JavaScript. This portfolio features dynamic content loading, dark/light theme toggle, and smooth animations.
- 🖼️ Dynamic image gallery with staggered loading animations
- 🌓 Light/dark theme toggle with local storage persistence
- 📱 Fully responsive design for all devices
- ⚡ Fast loading with optimized assets
- 🎨 Easily customizable accent color
- 👤 Personal sections: About Me
- 🔗 Social media integration
- Clone this repository:
git clone https://github.com/awanicaleb/afedia.git
cd afedia- Install dependencies:
npm install
# or
yarn- Start the development server:
npm run dev
# or
yarn dev- Open your browser and navigate to http://localhost:3000
afedia/
├── public/ # Static assets
│ └── images/ # Image files
├── src/
│ ├── styles/ # CSS styles
│ ├── main.js # Main JavaScript entry
│ └── index.html # HTML template
└── package.json # Project dependencies
Edit the galleryData array in src/main.js to update the gallery items.
To modify the accent color, edit the --accent-color CSS variables in the :root selector in src/styles.css.
The project is structured to make adding new sections easy. Create your section markup and add it to the main layout in src/index.html.
This project is optimized for deployment on Vercel:
- Push your repository to GitHub
- Import the project in Vercel dashboard
- Deploy!
To build for production:
npm run build
# or
yarn buildThis will generate optimized assets in the dist directory that can be deployed to any static hosting service.
GNU General Public License - see LICENSE file for details.