# CV Website - Build Instructions

This document contains instructions to build a simple CV/portfolio website using HTML, Bootstrap, and vanilla JavaScript.

## Project Structure

Create the following folder structure:

```
mycv/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
└── img/
```

## Requirements

- Bootstrap 5.3.0 (CDN)
- Google Fonts - Roboto
- Responsive design
- Modal popup with accordion

## Step-by-Step Instructions

### 1. Create index.html

Create an HTML file with the following specifications:

- Use Bootstrap 5.3.0 from CDN
- Include Google Fonts: Roboto (weights: 300, 400, 500, 700)
- Link custom CSS and JS files

### 2. Landing Section

Create a full-height (100vh) centered container with:

- A gradient background (your choice of colors)
- Centered content including:
  - Main heading with an introductory message
  - Subheading or description
  - Call-to-action button that opens a modal

**Example text (customize as needed):**

```
Heading: Lorem ipsum dolor sit amet consectetur
Description: Click the button below to discover more information
Button: View More
```

### 3. Modal with Accordion

Create a Bootstrap modal that contains an accordion with multiple sections. Include at least 5-6 sections covering different topics.

**Suggested sections with placeholder content:**

#### Section 1: Professional Experience
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Skills: Technology A, Technology B, Technology C
Frameworks: Framework X, Framework Y, Framework Z
```

#### Section 2: Technical Expertise
```
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Areas: Area 1, Area 2, Area 3
Tools: Tool A, Tool B, Tool C, Tool D
```

#### Section 3: Project Management
```
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Experience with: Process A, Process B, Process C
```

#### Section 4: Integrations & APIs
```
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.

Integrated services: Service 1, Service 2, Service 3, Service 4
API Experience: REST, GraphQL, WebSockets
```

#### Section 5: Design Skills
```
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Tools: Design Tool A, Design Tool B, Design Tool C
```

#### Section 6: Modern Technologies
```
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.

Current focus: Technology 1, Technology 2, Technology 3
Learning: New Tool A, New Framework B

[Download Button: Link to this markdown file]
```

### 4. Closing Message

After the accordion, add a highlighted section with a closing message:

```
Thank you for reviewing this information!
We hope to connect soon.
```

### 5. CSS Styling (styles.css)

Create custom styles with:

- Apply Roboto font to body
- Full-height landing container with flexbox centering
- Gradient background for landing section
- Custom modal header styling
- Accordion customization
- Smooth animations (fade-in effect)
- Responsive design for mobile devices

**Suggested CSS properties:**
- Landing gradient: Use colors like `#667eea` to `#764ba2` or your preference
- Border radius: 15px for modal
- Button styles: Rounded (50px), with box-shadow
- Hover effects: Transform and shadow transitions

### 6. JavaScript (main.js)

Add basic interactivity:

- Console log when DOM is ready
- Event listeners for modal show/hide
- Track accordion section clicks
- Smooth scroll for internal links
- Button hover animations

### 7. Testing

Open `index.html` in a browser and verify:

- Landing page displays correctly and is centered
- Button opens modal popup
- Accordion sections expand/collapse properly
- Modal closes correctly
- Responsive design works on mobile
- Download button works

## Optional Enhancements

- Add smooth scroll animations
- Include social media icons
- Add contact form
- Implement dark mode toggle
- Add image gallery in img folder

## Browser Compatibility

Test on:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

## Notes

- All text content above is placeholder text - replace with your actual content
- Customize colors, fonts, and styling to match your brand
- The site is built with vanilla JavaScript - no frameworks required
- Bootstrap handles most responsive behavior
- Keep it simple and fast-loading

---

**Built with:** HTML5, CSS3, Bootstrap 5, Vanilla JavaScript
**Font:** Google Fonts - Roboto
**Time to build:** ~10-15 minutes

Enjoy building your CV site!