A sophisticated, modern portfolio website built with Next.js 15, showcasing my professional experience as a Software Engineer with expertise in React, TypeScript, and full-stack development.
- Beautiful Animations - Powered by Framer Motion with smooth transitions and micro-interactions
- Responsive Design - Mobile-first approach optimized for all device sizes
- Dark/Light Mode - Automatic theme switching with system preference detection
- Glassmorphism Effects - Modern UI with backdrop blur and transparency
- Interactive Components - Hover effects, 3D transformations, and scroll-triggered animations
- Infinite Scrolling Project Cards - Smooth horizontal scrolling with Aceternity UI
- Aceternity UI Timeline - Professional experience showcase with detailed achievements
- Animated Backgrounds - Shooting stars and twinkling stars effects
- Floating Dock - Social media links with smooth animations
- shadcn/ui Components - Consistent design system with cards, badges, and forms
- Next.js 15 with App Router for optimal performance
- React 19 with modern hooks and patterns
- TypeScript with strict mode for type safety
- Tailwind CSS v4 for responsive styling
- Performance Optimized - Fast loading with Turbopack
- Animated shooting stars background
- Professional introduction with call-to-action
- Floating social media dock
- Professional overview with quick info cards
- Impact & achievements showcase
- Technical expertise with categorized skill badges
- Personal interests and downloadable resume
- Interactive timeline with detailed work history
- Complete professional journey from education to current role
- Achievements, technologies, and responsibilities for each position
- Dynamic GitHub Integration - Real-time project data fetched from GitHub API
- Infinite Scrolling Display - Smooth horizontal scrolling project cards with pause on hover
- GitHub-style Language Statistics - Visual language breakdown with color-coded bars
- Project Cards - Compact and detailed views with live/code links
- Auto-updating Content - Projects automatically sync with latest GitHub repositories
- Animated stars background
- Professional networking focus
- Social media and professional links
- Modern contact interface
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository
git clone [repository-url]
cd my_portfolio- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 with your browser
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint code quality checksapp/
├── api/
│ ├── github-repos/ # GitHub API integration
│ └── og/ # Open Graph image generation
├── components/
│ ├── sections/ # Main portfolio sections
│ │ ├── hero.tsx # Landing hero with animations
│ │ ├── about.tsx # About section with skills
│ │ ├── experience.tsx # Professional timeline
│ │ ├── projects.tsx # Dynamic GitHub project showcase
│ │ └── contact.tsx # Networking contact section
│ └── ui/ # Reusable UI components
│ ├── card.tsx # shadcn/ui cards
│ ├── timeline.tsx # Aceternity timeline
│ ├── infinite-moving-cards.tsx # Infinite scroll
│ ├── stars-background.tsx
│ └── floating-dock.tsx
├── lib/ # Utility functions and GitHub hooks
├── globals.css # Global styles with CSS custom properties
├── layout.tsx # Root layout
└── page.tsx # Main page
components/ui/ # Shared Aceternity UI components
public/
└── Devon_Hills_Resume_2025_Newest.pdf
- Primary: Used for accent colors and interactive elements
- Muted: For secondary text and subtle backgrounds
- Background: Adaptive light/dark theme support
- Font: Geist Sans and Geist Mono
- Responsive: Scales appropriately across devices
- Hierarchy: Clear heading and body text distinction
- Consistent Spacing: Using Tailwind's spacing scale
- Interactive States: Hover, focus, and active states
- Accessibility: WCAG compliant with proper ARIA labels
- Personal Info: Update
app/components/sections/about.tsx - Experience: Modify
app/components/sections/experience.tsx - Projects: Edit
app/components/sections/projects.tsx - Contact: Update
app/components/sections/contact.tsx
- Colors: Modify CSS custom properties in
app/globals.cssfor easy theming - Cyberpunk Synthwave Theme: Electric magenta, neon cyan, and hot pink color scheme
- Components: Customize shadcn/ui components in
app/components/ui/ - Animations: Adjust Framer Motion variants in component files
- Infinite Scroll Speed: Configurable animation duration in
infinite-moving-cards.tsx
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for LCP, FID, and CLS
- Image Optimization: Next.js automatic image optimization
- Code Splitting: Automatic route-based code splitting
- Push code to GitHub
- Connect repository to Vercel
- Deploy with automatic builds
The application can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform
Devon Hills - Software Engineer at Livefront
- 7+ years building mission-critical React/TypeScript applications
- Previously specialized in HealthCare.gov serving millions of users at Ad Hoc
- Expert in accessibility, performance optimization, and modern web development
- Currently focused on cutting-edge frontend development at Livefront
- Email: [email protected]
- LinkedIn: linkedin.com/in/devonjhills
- GitHub: github.com/devonjhills
This project is open source and available under the MIT License.
Built with ❤️ using Next.js, React, and modern web technologies