personal-resume

🏛️ Architect Resume Template Setup Guide

Welcome to the Architect Resume Template! This guide will help you transform this template into your personal professional portfolio website.

🚀 Quick Start (5 minutes)

Option 1: Automated Setup (Recommended)

# Run the interactive setup wizard
npm run setup

# Start the development server
npm run dev

Option 2: Manual Setup

Configure using one of these methods:

Method A: Template Configuration File

# Copy the template config
cp template.config.json my-config.json
# Edit my-config.json with your information

Method B: Environment Variables

# Create .env.local file
touch .env.local
# Add your configuration (see Essential Configuration below)

Start the development server:
```
npm run dev
```

📋 Essential Configuration

1. Personal Information

Update these environment variables in .env.local:

# Your basic information
USER_NAME="Your Full Name"
USER_TITLE="Your Professional Title"
USER_BIO="Your professional bio and mission statement"

# Contact details
CONTACT_EMAIL="your.email@example.com"
CONTACT_PHONE="+1 (555) 123-4567"
CONTACT_LOCATION="Your City, State"

# Social media profiles
LINKEDIN_URL="https://linkedin.com/in/yourprofile"
INSTAGRAM_URL="https://instagram.com/yourprofile"
BEHANCE_URL="https://behance.net/yourprofile"
WEBSITE_URL="https://yourwebsite.com"

2. Branding & Theme

Customize the visual appearance:

# Color scheme
PRIMARY_COLOR="#8a7855"    # Main brand color
ACCENT_COLOR="#d4af37"     # Accent/highlight color

# Typography
HEADING_FONT="Playfair Display"  # Serif font for headings
BODY_FONT="Inter"                # Sans-serif font for body text

3. Feature Toggles

Enable or disable features:

ENABLE_BLOG=true         # Show blog section
ENABLE_CHATBOT=true      # Include AI chatbot
ENABLE_PORTFOLIO=true    # Display portfolio
ENABLE_TESTIMONIALS=true # Show testimonials
ENABLE_DARK_MODE=false   # Enable dark mode toggle

🎨 Content Customization

1. Replace Portfolio Projects

Edit /app/components/Portfolio.tsx:

Update project data with your own work
Replace project images in /public/images/
Modify project descriptions and details

2. Update Professional Experience

Edit /app/components/Experience.tsx:

Replace job positions with your career history
Update company names, dates, and achievements
Customize the experience timeline

3. Modify Skills & Education

Update your expertise in:

/app/components/Skills.tsx - Technical skills and proficiencies
/app/components/Education.tsx - Education, certifications, awards

4. Customize Blog Content

If you enabled the blog feature:

Edit /app/data/blog.ts with your blog posts
Replace sample content with your articles
Update author information and categories

🖼️ Image Management

Required Images

Replace these placeholder images with your own:

public/images/
├── hero-bg.jpg          # Homepage background
├── profile.jpg          # Your professional headshot
├── projects/
│   ├── project-1.jpg    # Portfolio project images
│   ├── project-2.jpg
│   └── ...
└── blog/
    ├── blog-1.jpg       # Blog post thumbnails
    └── ...

Image Optimization Tips

Use high-quality images (minimum 1200px wide)
Optimize for web (JPEG for photos, PNG for graphics)
Maintain consistent aspect ratios
Include alt text for accessibility

⚙️ Advanced Configuration

Custom Colors

Beyond the basic color variables, you can customize the full color palette in /tailwind.config.ts:

colors: {
  architect: {
    50: '#f8f7f4',   // Lightest
    100: '#e8e5dd',
    // ... your custom color scale
    900: '#1b1811'   // Darkest
  }
}

Font Customization

To use different fonts, update /app/layout.tsx:

import { YourFont } from 'next/font/google'

const yourFont = YourFont({ 
  subsets: ['latin'],
  variable: '--font-your-font',
})

Component Customization

Each component is modular and can be customized:

Modify layouts in individual component files
Update styling classes
Add or remove sections as needed

🚀 Deployment

GitHub Pages (Free)

Update your repository information in your configuration:

GITHUB_USERNAME="yourusername"
GITHUB_REPO="your-portfolio"

Build for production:
```
npm run build
```
Deploy using GitHub Actions:
- Push your code to GitHub
- Enable GitHub Pages in repository settings
- Use the provided GitHub Actions workflow
- See docs/DEPLOYMENT.md for detailed instructions

Vercel (Recommended)

Connect your GitHub repository to Vercel
Set environment variables in Vercel dashboard
Deploy automatically on push

Netlify

Connect repository to Netlify
Set build command: npm run build
Set publish directory: .next
Add environment variables in Netlify dashboard

🧪 Testing Your Setup

Before deploying, test your customizations:

# Run development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

# Check for TypeScript errors
npm run type-check

# Lint code
npm run lint

🎯 Customization Checklist

🆘 Getting Help

Common Issues

Q: My changes aren’t showing up A: Make sure you’re editing the .env.local file and restart the development server.

Q: Colors aren’t updating A: Check that your color values are valid hex codes and restart the dev server.

Q: Deployment fails A: Verify your GitHub repository settings and ensure all environment variables are set.

Support Resources

📖 Documentation
🐛 Issues
💬 Discussions
📧 Email: template-support@example.com

🎉 Next Steps

Once you’ve customized your template:

Test thoroughly across different devices and browsers
Optimize for SEO by updating meta descriptions and titles
Set up analytics to track visitor engagement
Create a maintenance schedule to keep content updated
Share your portfolio with your professional network

Congratulations! You now have a professional, customized portfolio website. Keep your content fresh and showcase your best work to make a lasting impression on potential clients and employers.