A modern, responsive portfolio website showcasing my professional journey as a Full Stack Developer and ERP Consultant. Built with cutting-edge web technologies and featuring smooth animations, dynamic content, and an elegant design.

Visit the live site: DaviSCo

• Technologies Used
• Features
• Project Structure
• Getting Started
• Development
• Deployment
• Contact

• HTML5 - Semantic markup and structure
• CSS3 - Custom styling and animations
• Tailwind CSS v4 - Utility-first CSS framework for rapid development
• JavaScript (ES6+) - Interactive functionality and DOM manipulation

• GSAP (GreenSock Animation Platform) - High-performance animations
  • ScrollTrigger - Scroll-based animations
  • ScrollToPlugin - Smooth scrolling navigation
  • TextPlugin - Dynamic text animations

• Tailwind CSS CLI - CSS compilation and optimization
• Live Server - Development server with hot reload
• Git - Version control
• VS Code - Development environment

• Iconify - SVG icon library for social media icons
• Custom Color Palette - Carefully crafted brand colors
• Responsive Design - Mobile-first approach

• Responsive Design - Optimized for all device sizes
• Smooth Animations - GSAP-powered scroll animations and transitions
• Dynamic Header - Transforms on scroll with animated logo change
• Mobile Navigation - Hamburger menu with smooth transitions
• Project Showcase - Interactive project cards with technology stacks
• Skills Display - Organized skill categories with hover effects
• Contact Integration - Direct links to email, LinkedIn, and GitHub
• Performance Optimized - Fast loading times and smooth interactions

DaviSCo/
├── css/
│   ├── output.css           # Compiled Tailwind CSS
│   ├── style.css           # Source Tailwind styles and custom components
│   ├── palette.css         # Color palette documentation
│   └── components/
│       └── headerComponents.css
├── scripts/
│   ├── scripts.js          # Core JavaScript functionality
│   └── gsapEffects.js      # GSAP animations and scroll effects
├── img/
│   ├── DaviSCo.png        # Logo and favicon
│   ├── self.png           # Profile image
│   └── project/           # Project screenshots
├── docs/
│   └── ScottDavis-Resume.pdf
├── pages/
│   └── project-1.html     # Additional project pages
├── WireFrameStages/       # Design mockups and wireframes
├── index.html             # Main portfolio page
├── package.json           # Project dependencies and scripts
└── README.md             # Project documentation

• Node.js (v14 or higher)
• npm or yarn package manager

1. Clone the repository

   git clone https://github.com/ScottDavis08/DaviSCo.git
   cd DaviSCo

2. Install dependencies

   npm install

3. Start development server

   npm run dev

   This will start the Tailwind CSS watch process and compile your styles automatically.

4. Open in browser

   • Use Live Server extension in VS Code, or
   • Open index.html directly in your browser

• npm run dev - Start Tailwind CSS watch mode for development
• npm run build - Build optimized CSS for production

Modify the color palette in css/style.css:

@theme {
    --color-primary: #3217E6ff;
    --color-secondary: #5E51ADff;
    --color-quaternary: #e31b6d;
    --color-textColor: #ffffffff;
}

Add custom GSAP animations in scripts/gsapEffects.js:

gsap.registerPlugin(ScrollTrigger);
// Your custom animations here

Create reusable Tailwind components in css/style.css:

@layer components {
    .custom-component {
        @apply flex items-center justify-center;
    }
}

The site is optimized for static hosting platforms:

• GitHub Pages - Push to gh-pages branch
• Netlify - Connect repository for automatic deployments
• Vercel - Import project for seamless deployment

1. Ensure all styles are compiled:

   npm run dev

2. Test the production build locally

3. Deploy the entire project directory to your hosting platform

Scott Davis

• Email: [email protected]
• LinkedIn: scott-davis-08
• GitHub: ScottDavis08

© 2025-present Davis Scott Consulting. All Rights Reserved.

Built with passion and attention to detail. This portfolio represents my journey as a developer and my commitment to creating exceptional digital experiences.