A modern, high-performance portfolio website showcasing full-stack development expertise
- 🌙 Dark/Light Mode: Toggle between themes with persistent user preference
- 📱 Mobile-First Design: Fully responsive across all device sizes
- 🎭 Interactive Animations: Smooth transitions and hover effects
- 🎨 Modern UI: Clean, professional design with blue neon accents
- ♿ Accessibility: WCAG compliant with proper contrast ratios
- 🚀 Static Site Generation: Lightning-fast page loads with Astro
- 🔍 SEO Optimized: Comprehensive meta tags, structured data, and sitemaps
- 📊 Core Web Vitals: Optimized for Google's performance metrics
- 🖼️ Image Optimization: Automatic image compression and lazy loading
- 📡 RSS Feed: Built-in blog RSS feed for content syndication
- 📖 MDX Blog System: Rich content with markdown and React components
- 🏷️ Tag-Based Filtering: Organize and filter blog posts by topics
- 📂 Project Portfolio: Showcase current, completed, and roadmap projects
- 🔗 Dynamic Routing: Automatic page generation from content collections
- 📅 Date Sorting: Chronological blog post organization
- 📘 TypeScript: Full type safety throughout the codebase
- 🎯 Component Architecture: Reusable, maintainable UI components
- 🔧 Hot Reload: Instant development feedback with Vite
- 📦 Modern Build Tools: Optimized bundling and asset management
- Astro 5.x - Static site generator with island architecture
- TypeScript - Type-safe JavaScript development
- Tailwind CSS 4.x - Utility-first CSS framework
- Lucide Astro - Beautiful, customizable SVG icons
- MDX - Markdown with JSX components for rich blog content
- Astro Content Collections - Type-safe content management
- DevIcons - Technology logos and icons
- Vite - Lightning-fast build tool and dev server
- Sharp - High-performance image processing
- Formspree - Contact form handling
- Git - Version control and collaboration
- Astro Sitemap - Automatic sitemap generation
- Astro RSS - RSS feed generation
- Open Graph - Social media preview optimization
- JSON-LD - Structured data for search engines
djm-tech-v2/
├── 📁 public/ # Static assets
│ ├── 📁 assets/ # Images and media files
│ │ ├── 📁 websites/ # Project screenshots
│ │ └── about-me-photo.jpeg # Profile picture
│ ├── favicon.ico # Site favicon
│ └── robots.txt # SEO robots file
├── 📁 src/
│ ├── 📁 components/ # Reusable UI components
│ │ ├── Header.astro # Navigation with theme toggle
│ │ ├── Footer.astro # Site footer with social links
│ │ └── ThemeToggle.astro # Dark/light mode switcher
│ ├── 📁 content/ # Content collections
│ │ └── 📁 blog/ # MDX blog posts
│ │ ├── *.mdx # Individual blog posts
│ │ └── config.ts # Content collection schema
│ ├── 📁 data/ # Static data and types
│ │ ├── projects.ts # Project portfolio data
│ │ ├── skills.ts # Technology skills data
│ │ └── blog.ts # Blog utilities and functions
│ ├── 📁 layouts/ # Page layouts and templates
│ │ └── Layout.astro # Main layout with SEO
│ ├── 📁 pages/ # Astro pages (file-based routing)
│ │ ├── index.astro # Homepage
│ │ ├── projects.astro # Projects showcase
│ │ ├── blog.astro # Blog listing page
│ │ ├── blog/[slug].astro # Individual blog posts
│ │ ├── about.astro # About page
│ │ ├── contact.astro # Contact form
│ │ └── rss.xml.js # RSS feed generator
│ └── 📁 styles/ # Global styles and themes
│ └── global.css # CSS variables and utilities
├── 📄 astro.config.mjs # Astro configuration
├── 📄 package.json # Dependencies and scripts
├── 📄 tailwind.config.mjs # Tailwind CSS configuration
└── 📄 tsconfig.json # TypeScript configuration
- Node.js 18+
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/djmartin2019/djm-tech-v2.git cd djm-tech-v2 -
Install dependencies
npm install # or yarn install -
Start development server
npm run dev # or yarn devOpen http://localhost:4321 to view the site
-
Build for production
npm run build # or yarn build -
Preview production build
npm run preview # or yarn preview
npm run dev- Start development server with hot reloadnpm run build- Build optimized production sitenpm run preview- Preview production build locallynpm run astro- Run Astro CLI commands
-
Create a new MDX file in
src/content/blog/touch src/content/blog/your-new-post.mdx
-
Add frontmatter with required fields:
--- title: "Your Amazing Blog Post Title" description: "A compelling description for SEO and social sharing" summary: "Brief summary for blog listings (optional)" date: "2025-01-15" tags: ["Web Development", "Astro", "TypeScript"] featured: false readTime: 5 image: "/assets/blog/your-featured-image.jpg" --- # Your Content Here Write your blog post content using Markdown syntax...
-
Supported frontmatter fields:
title(required) - Post titledescription(required) - SEO descriptionsummary(optional) - Brief summary for listingsdate(required) - Publication date (YYYY-MM-DD)tags(required) - Array of topic tagsfeatured(optional) - Boolean for featured postsreadTime(optional) - Estimated reading time in minutesimage(optional) - Featured image path
Edit src/data/projects.ts to add new projects:
{
id: 'unique-project-id',
title: 'Project Name',
description: 'Brief project description for cards',
longDescription: 'Detailed project description for project pages',
image: '/assets/websites/project-screenshot.png',
technologies: ['React', 'TypeScript', 'Tailwind CSS'],
status: 'current', // 'current' | 'completed' | 'roadmap'
liveUrl: 'https://your-project.com',
githubUrl: 'https://github.com/djmartin2019/your-project',
featured: true,
category: 'Web Application',
startDate: '2024-01',
endDate: '2024-06' // Optional for completed projects
}Update src/data/skills.ts to add new technologies:
{
name: "Technology Name",
icon: "icon-name", // DevIcons identifier
category: "Frontend" // "Frontend" | "Backend" | "Tools"
}- 📊 Meta Tags: Comprehensive Open Graph and Twitter Card support
- 🏗️ Structured Data: JSON-LD schema markup for rich snippets
- 🗺️ Sitemap: Automatic XML sitemap generation
- 📡 RSS Feed: Blog RSS feed at
/rss.xml - 🤖 Robots.txt: Search engine crawler optimization
- 🔗 Canonical URLs: Proper URL canonicalization
- ⚡ Core Web Vitals: Optimized LCP, FID, and CLS scores
- 🖼️ Image Optimization: Automatic compression and WebP conversion
- 📦 Bundle Splitting: Efficient code splitting and lazy loading
- 🎯 Critical CSS: Inlined critical styles for faster rendering
- 💾 Caching: Optimized cache headers and static asset caching
This static site can be deployed to any platform that supports static site hosting:
- Build Command:
npm run build - Output Directory:
dist - Node.js Version: 18.x or higher
- GitHub Pages: Free hosting for public repositories
- Netlify: Easy deployment with continuous integration
- Cloudflare Pages: Global CDN with edge computing
- AWS S3 + CloudFront: Enterprise-grade hosting
- Firebase Hosting: Google's hosting platform
- Surge.sh: Simple static site deployment
No environment variables required for basic deployment. Optional variables for enhanced features:
# Contact Form (Formspree)
FORMSPREE_ENDPOINT=https://formspree.io/f/your-form-id
# Analytics (Optional)
GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX- Build the site:
npm run build - Upload the
distfolder to your hosting platform - Configure custom domain (optional)
- Set up continuous deployment from your Git repository
The site uses CSS custom properties for easy theming:
/* src/styles/global.css */
:root {
--accent-color: #00d4ff; /* Primary blue */
--accent-hover: #33dfff; /* Hover blue */
--accent-dark: #0099cc; /* Dark blue */
--bg-primary: #0a0a0a; /* Dark background */
--text-primary: #ffffff; /* Primary text */
/* ... more variables */
}Update these files with your information:
- Projects:
src/data/projects.ts- Portfolio projects - Skills:
src/data/skills.ts- Technology skills - About Page:
src/pages/about.astro- Personal bio - Contact:
src/pages/contact.astro- Contact details - SEO:
src/layouts/Layout.astro- Site metadata
Key layout files:
- Main Layout:
src/layouts/Layout.astro- Global structure - Header:
src/components/Header.astro- Navigation - Footer:
src/components/Footer.astro- Site footer - Theme Toggle:
src/components/ThemeToggle.astro- Dark/light mode
This site is built for optimal performance:
- 🚀 Static Generation: All pages pre-rendered at build time
- 💧 Minimal JavaScript: Only interactive components hydrated
- 🖼️ Optimized Images: Automatic compression and modern formats
- 🎨 CSS Optimization: Tailwind CSS purging and critical CSS
- 🌐 CDN Ready: Optimized for global content delivery
- 📊 Lighthouse Score: 95+ across all metrics
- LCP: < 2.5s (Largest Contentful Paint)
- FID: < 100ms (First Input Delay)
- CLS: < 0.1 (Cumulative Layout Shift)
- Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Mobile Browsers: iOS Safari 14+, Chrome Mobile 90+
- Progressive Enhancement: Graceful degradation for older browsers
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use semantic commit messages
- Test thoroughly before submitting
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
David Martin - Full-Stack Developer & Entrepreneur
⭐ If you found this project helpful, please give it a star!
Made with ❤️ by David Martin