Danielle Andrews Portfolio Website

A modern, responsive portfolio website built with Next.js 14 and the App Router, showcasing my projects, skills, and professional experience.

🌟 Features

• Modern Design: Clean, responsive interface optimized for all devices
• Performance Optimized: Built with Next.js App Router for fast loading and SEO
• Interactive Elements: Smooth animations and engaging user experience
• Project Showcase: Detailed case studies with live demos and source code links
• Contact Integration: Direct contact form and social media links
• Accessibility: WCAG compliant with keyboard navigation support

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS / CSS Modules / Styled Components
• Animations: Framer Motion / CSS Animations
• Typography: Geist Font Family
• Deployment: Vercel

📁 Project Structure

├── app/
│   ├── archive/         # Archived projects page
│   ├── page_not_found/  # Custom 404 page
│   ├── favicon.ico      # Custom favicon
│   ├── globals.css      # Global styles
│   ├── layout.tsx       # Root layout
│   └── page.tsx         # Homepage
├── components/          # Reusable UI components
│   ├── common/          # Common components (Header, Footer, Loader, etc.)
│   ├── sections/        # Page sections (About, Contact, Experience, Hero, Projects)
│   ├── ui/              # UI components (Button, Card, Navigation, etc.)
├── data/                # Static data files
│   ├── experience.ts    # Work experience data
│   ├── projects.ts      # Project information
│   └── skills.ts        # Skills and technologies
├── hooks/               # Custom React hooks
│   └── useDarkMode.ts   # Dark mode functionality
├── lib/                 # Utility libraries
│   ├── constants.ts     # App constants
│   ├── types.ts         # TypeScript type definitions
│   └── utils.ts         # Helper functions
├── public/              # Static assets
│   ├── logo_self.png    # Personal logo
│   ├── logo.png         # Site logo
│   └── resume.pdf       # Downloadable resume
└── Configuration files  (Next.js, TypeScript, Tailwind, etc.)

🏃‍♂️ Getting Started

1. Clone the repository

   git clone https://github.com/DrAcula27/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

🎨 Customization

To adapt this portfolio for your own use:

1. Update personal information in app/data/ or component files
2. Replace project data with your own work
3. Customize styling in the theme configuration
4. Update assets in the public/ directory
5. Configure contact form with your preferred service

📱 Responsive Design

The site is fully responsive and optimized for:

• 📱 Mobile devices (320px+)
• 📟 Tablets (768px+)
• 💻 Desktop (1024px+)
• 🖥️ Large screens (1440px+)

Manual Deployment

npm run build
npm run start

📄 License

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

🤝 Connect With Me

• LinkedIn: LinkedIn
• GitHub: GitHub
• Email: [email protected]