angeldev0's portfolio website 🚀

A modern, responsive personal website and cybersecurity portfolio built with Nuxt.js 4, showcasing projects, skills, and technical expertise.

---

Technologies Used:

🌟 Live Website

Visit the live site at: angellabs.xyz

📋 Prerequisites

• Node.js (v22.17.1 recommended)
• Git
• Your favorite package manager (npm, yarn, pnpm, or bun)

🚀 Quick Start

Installation

Clone the repository:

git clone https://github.com/4ngel2769/ac.tech.git
cd ac.tech

Install dependencies:

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install

# Using bun (experimental)
bun install

Development

Start the development server with hot reload:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev

# Using bun (experimental)
bun run dev

The development server will start on http://localhost:3000 and automatically open in your default browser.

Production

Build for production:

npm run build

Preview production build:

npm run preview

Generate static site:

npm run generate

✨ Current Features

🏠 Homepage

• Hero Section: Interactive video/image background with personal introduction
• Projects Showcase: Featured projects with dynamic content loading
• Latest Blog Posts: Recent articles and technical writings
• Responsive Design: Optimized for all devices and screen sizes
• Modern UI/UX: Glassmorphism effects, smooth animations, and intuitive navigation

📂 Projects Portfolio

• Dynamic Project Listing: Filterable and searchable project grid
• Fuzzy Search: Powered by Fuse.js for intelligent content discovery
• Project Categories: Organized by tags and technologies
• Detailed Project Pages: Individual pages with rich content, images, and metadata
• Infinite Scroll: Smooth pagination with lazy loading
• Breadcrumb Navigation: Clear site hierarchy and navigation

📝 Blog System

• SEO Optimized: Rich meta tags and structured data
• Markdown Content: Full MDX support with custom components
• Syntax Highlighting: Code blocks with Nord theme
• Table of Contents: Auto-generated navigation for long articles
• Social Sharing: Built-in sharing buttons for social platforms
• Related Articles: Smart content recommendations

🎨 Design & UI

• Dark/Light Mode: Toggle between themes (currently dark-focused) [WIP]
• Custom Typography: Multiple font families including Montserrat, Sen, and custom fonts
• Responsive Grid: CSS Grid and Flexbox layouts
• Loading States: Elegant loading indicator

🔧 Technical Features

• SSR/SSG: Server-side rendering with static generation support
• SEO Optimized: Meta tags, Open Graph
• Performance: Optimized images and lazy loading
• Sitemap & Robots: Automated SEO file generation
• Error Handling: Custom 404 pages and graceful error recovery

🛠️ Technology Stack

Core Framework

• Nuxt.js 4: Vue.js framework with SSR/SSG
• Vue: Progressive JavaScript framework
• TypeScript: Type-safe development

Styling & UI

• Tailwind CSS: Utility-first CSS framework
• Nuxt UI: Vue component library
• Font Awesome: Icon library
• Custom Fonts: Extensive font collection for unique typography

Content Management

• Nuxt Content: File-based CMS with MDX support
• Fuse.js: Fuzzy search library

Utilities & Enhancements

• @vueuse/core: Vue composition utilities
• @formkit/auto-animate: Smooth animations
• Sass: CSS preprocessor

SEO & Analytics

• @nuxtjs/seo: SEO optimization tools
• @nuxtjs/sitemap: Automatic sitemap generation
• nuxt-gtag: Google Analytics

📁 Project Structure

ac.tech/
├── app/
│   ├── components/          # Vue components
│   │   ├── blog/           # Blog-specific components
│   │   ├── content/        # MDX content components
│   │   ├── icons/          # Custom icon components
│   │   ├── nav/            # Navigation components
│   │   └── sections/       # Section components
│   ├── layouts/            # Page layouts
│   ├── pages/              # Route pages
│   │   ├── projects/       # Project pages and listing
│   │   └── ...
│   └── assets/             # Static assets
│       ├── css/           # Stylesheets
│       └── fonts/         # Custom fonts
├── content/                # Markdown content
│   ├── projects/          # Project articles
│   └── authors/           # Author information
├── public/                 # Public static files
├── nuxt.config.ts         # Nuxt configuration
├── tailwind.config.js     # Tailwind configuration
└── package.json           # Dependencies and scripts

Current Status & Roadmap

✅ Completed Features

• Modern homepage with hero section
• Responsive design across all devices
• Projects portfolio with search and filtering
• Individual project pages with rich content
• Blog system with markdown support
• SEO optimization and meta tags
• Dark/Light theme implementation

🚧 In Progress

• Blog content expansion
• Resume/CV page
• Contact form functionality
• Light theme refinement
• Social media integration
• Performance optimization

🔮 Future Plans

• Newsletter subscription
• Comments system
• Search functionality enhancement
• Multi-language support
• PWA features

🌐 About

This website serves as my digital portfolio, showcasing expertise in:

• Cybersecurity: Ethical hacking, security research, and vulnerability assessment
• Embedded Development: ESP32, Arduino, and IoT projects
• Web Development: Modern JavaScript frameworks and full-stack development
• Technical Writing: Documentation, tutorials, and technical blog posts

🤝 Contributing

While this is a personal website, suggestions and bug reports are welcome! Feel free to:

1. Open an issue for bugs or feature requests
2. Submit pull requests for improvements
3. Share feedback on design or functionality

📞 Contact

• LinkedIn: Angel Capra
• Twitter: @angeldev0

📄 License

This project is open source and available under the MIT License.
Built with ❤️ and 🐛 by angeldev0