Servon Lewis - Portfolio Website

A modern, professional portfolio website built with Next.js, TypeScript, and Tailwind CSS. This site showcases your skills, experience, and availability for freelance opportunities.

🚀 Features

• Responsive Design: Fully responsive across all devices
• Modern UI: Built with shadcn/ui components and Tailwind CSS
• Smooth Animations: Elegant animations powered by Framer Motion
• SEO Optimized: Comprehensive meta tags and structured data
• Dark Mode Support: Automatic dark mode based on system preferences
• Performance Focused: Optimized for fast loading and smooth interactions

📁 Project Structure

servon-portfolio/
├── app/
│   ├── page.tsx          # Main page with all sections
│   ├── layout.tsx        # Root layout with SEO metadata
│   └── globals.css       # Global styles and theme variables
├── components/
│   ├── navigation.tsx    # Header navigation component
│   ├── footer.tsx        # Footer component
│   ├── sections/
│   │   ├── hero.tsx      # Hero section with intro
│   │   ├── about.tsx     # About section
│   │   ├── skills.tsx    # Skills and technologies
│   │   ├── experience.tsx # Work experience timeline
│   │   └── contact.tsx   # Contact section
│   └── ui/               # Reusable UI components
│       ├── button.tsx
│       ├── card.tsx
│       └── badge.tsx
├── lib/
│   └── utils.ts          # Utility functions
└── public/
    └── images/           # Image assets

🖼️ Adding Your Images

Profile Photo

1. Prepare your image:

   • Recommended size: 800x800 pixels (square)
   • Format: JPG or PNG
   • Keep file size under 500KB for optimal performance

2. Add the image:

   • Place your profile photo in: public/images/profile.jpg
   • The hero section will automatically load this image

3. Fallback behavior:

   • If no image is found, a placeholder with text "Your Photo Here" will display
   • This allows you to see the layout before adding your actual photo

Adding More Images (Optional)

If you want to add more images to other sections:

// Example: Add an image to any section
import Image from "next/image"

<Image
  src="/images/your-image.jpg"
  alt="Description"
  width={800}
  height={600}
  className="rounded-lg"
/>

🛠️ Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Run development server:

npm run dev

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

Building for Production

npm run build
npm start

✏️ Customization Guide

⚠️ Important: Add Your Profile Photo

Your profile photo is ready to add!

1. Save the photo you provided (sitting on steps in black shirt) as public/images/profile.jpg
2. The hero section will automatically display it
3. See public/images/PROFILE_IMAGE_INSTRUCTIONS.md for details

Update Personal Information

1. Contact Email

The email (servonlewis@gmail.com) is already set in:

• components/sections/hero.tsx
• components/sections/contact.tsx

2. Social Links

Update your social media URLs in:

• components/sections/hero.tsx (lines ~49-60)
• components/sections/contact.tsx (lines ~57-78)

Replace with your actual profiles:

• LinkedIn: https://linkedin.com/in/YOUR_USERNAME
• GitHub: https://github.com/YOUR_USERNAME

3. SEO Metadata

Update SEO information in app/layout.tsx:

• Change the domain URL from https://servonlewis.com to your actual domain
• Update any other metadata as needed

Customizing Content

Skills Section

Edit components/sections/skills.tsx:

• Modify the skillCategories array to add/remove skills
• Update certifications in the Certifications card

Experience Section

Edit components/sections/experience.tsx:

• Modify the experiences array to update work history
• Each experience object includes: company, role, period, highlights, and technologies

About Section

Edit components/sections/about.tsx:

• Update the highlights array for key strengths
• Modify the biography text in the Card component

Styling and Theme

Colors

Customize theme colors in app/globals.css:

• Modify CSS variables in the :root selector for light mode
• Modify variables in @media (prefers-color-scheme: dark) for dark mode

Fonts

Change fonts in app/layout.tsx:

• Replace Geist and Geist_Mono with your preferred Google Fonts

📱 Sections Overview

1. Hero Section

• Eye-catching introduction
• Profile image placeholder
• Call-to-action buttons
• Social links

2. About Section

• Brief biography
• Key highlights with icons
• Professional summary

3. Skills Section

• Organized by categories
• Visual badges for each skill
• Certifications display

4. Experience Section

• Timeline-style layout
• Company logos (optional)
• Key achievements
• Technology tags

5. Contact Section

• Email contact button
• Social media links
• Professional call-to-action

🌐 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Deploy with one click

Other Platforms

This is a standard Next.js app and can be deployed to:

• Netlify
• AWS Amplify
• Google Cloud Platform
• Any platform supporting Next.js

📝 License

This project is open source and available for personal use.

🤝 Support

For questions or issues, contact: servonlewis@gmail.com

---

Built with ❤️ using Next.js, TypeScript, and Tailwind CSS