Project: IT Consulting Hero Section
Tracks build progress for a Next.js hero section with Vanta.js animations, glassmorphism UI, and GitHub Pages deployment.
What this file does
Tracks build progress for a Next.js hero section with Vanta.js animations, glassmorphism UI, and GitHub Pages deployment.
When to use it
- Planning a Next.js project with TypeScript and Tailwind CSS
- Building a hero section with Framer Motion and Vanta.js
- Setting up a GitHub Actions workflow for Next.js deployment
- Creating a checklist for implementing multiple page sections
Assumes this stack
Project: IT Consulting Hero Section
Project Goal
To create a unique, modern, and customized hero section to be embedded in a Google Site. The section will showcase IT capabilities with a focus on business intelligence and medium business SaaS solutions. It will feature animations and be optimized for SEO.
Technology Stack
- Framework: Next.js (with React)
- Language: TypeScript
- UI Components: Custom (Glassmorphism Style)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Background: Vanta.js (Three.js)
- Development Environment: Node.js
Implementation Status
Environment Setup:
- Initialize Next.js project with TypeScript and Tailwind CSS.
- Install Framer Motion for animations.
Component Development:
- Create Layout Components (Navbar, Footer, SectionContainer).
- Implement Hero Section (Revamped with Vanta.js).
- Implement About & Skills Sections.
- Implement Experience Timeline.
- Implement Projects Grid.
- Implement Contact Section.
Content & SEO:
- Integrate SEO-focused keywords and meta tags.
- Structure content based onprovided resume.
Animation:
- Implement scroll animations using Framer Motion.
Build & Deployment:
- Create GitHub Actions workflow (
.github/workflows/nextjs.yml). - Verify production build locally (Pending environment setup).
- Deploy to GitHub Pages.
What's inside
1 project goal, 6 tech stack items, 6 implementation categories with 14 checkboxes
Change this for your project
- Replace
tidypy/christopher-lazok.github.iowith your own repository name - Replace
.github/workflows/nextjs.ymlwith your own workflow file path if different - Replace
provided resumecontent with your own resume or project details
Where it goes
Keep it in your repository where the agent or team that needs it will read it.
Related Documents
Totem — Development Rules
Defines team-wide conventions for a pnpm monorepo: branch strategy, commit rules, tooling, and a mandatory knowledge-search workflow before coding.
MechCAD-MLLM
Proposes a MLLM + dual-decoder architecture for mechanical CAD generation, combining Drawing2CAD and CAD-GPT ideas.
Prompt Generator
Generates Stable Diffusion and Flux prompts via Qwen3-8B on Ollama, with a Gradio UI and CLI.
Agent Instructions
Defines a three-layer architecture (directive, orchestration, execution) for AI agents that self-anneal errors and update living SOPs.