0x1eo.dev/README.md

Portfolio

A modern, responsive portfolio website showcasing cybersecurity and systems engineering projects. Built with Nuxt 3, Vue.js, and Tailwind CSS.

🚀 Live Site

Visit the live portfolio at 0x1eo.dev

📋 About

This portfolio showcases my work as a cybersecurity specialist and systems engineer, featuring:

• Academic Projects: University coursework including penetration testing, high-availability systems, and programming paradigms
• Freelance Work: Professional web development projects and client solutions
• Technical Skills: Cybersecurity, systems engineering, full-stack development
• Interactive Design: Modern UI/UX with smooth animations and responsive layout

🛠️ Tech Stack

• Framework: Nuxt 3 - The Intuitive Vue Framework
• Frontend: Vue.js 3 - The Progressive JavaScript Framework
• Styling: Tailwind CSS - A utility-first CSS framework
• Language: TypeScript for type safety
• Build Tool: Vite for fast development and building
• Deployment: Static site generation (SSG) ready

🏗️ Project Structure

portfolio/
├── app/
│   ├── components/          # Reusable Vue components
│   │   ├── ProjectCard.vue  # Individual project display
│   │   ├── TheHeader.vue    # Navigation header
│   │   └── TheFooter.vue    # Site footer
│   ├── data/
│   │   └── projects.js      # Project data and metadata
│   ├── pages/              # Route pages
│   │   ├── index.vue       # Homepage
│   │   ├── about.vue       # About page
│   │   └── projects/       # Projects section
│   └── app.vue            # Root application component
├── public/                 # Static assets
└── nuxt.config.ts         # Nuxt configuration

🎨 Features

• Responsive Design: Optimized for desktop, tablet, and mobile
• Project Filtering: Filter projects by Academic/Freelance categories
• Dark Theme: Modern dark mode design with gradient accents
• Smooth Animations: Engaging CSS animations and transitions
• SEO Optimized: Meta tags, structured data, and semantic HTML
• Performance: Fast loading with static site generation
• Accessibility: WCAG compliant with proper focus management

📁 Projects Included

Academic Projects

• Penetration Testing & Vulnerability Exploitation - Ethical hacking and security assessment
• High-Availability Web Cluster - Fault-tolerant infrastructure design
• Football Simulator - Java-based game simulation with OOP design patterns
• Diet Platform Pro - Full-stack web application with Angular and Node.js
• Order Management System - C programming with dynamic memory management

Freelance Projects

• Playlix Website - Vue.js website development for gaming startup

🚀 Getting Started

Prerequisites

• Node.js 18+ or Bun
• npm, pnpm, yarn, or bun package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd portfolio
   

2. Install dependencies

   # npm
   npm install
   
   # pnpm
   pnpm install
   
   # yarn
   yarn install
   
   # bun
   bun install
   

Development

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Production Build

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Preview Production Build

Locally preview the production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

📝 Adding New Projects

To add a new project to the portfolio:

1. Edit the projects data

   // app/data/projects.js
   export const projects = [
     {
       slug: 'project-slug',
       group: 'Academic' | 'Freelance',
       title: 'Project Title',
       category: 'Course/Client Name',
       date: 'YYYY – YYYY',
       link: 'https://github.com/username/repo' | null,
       description_points: [
         'Key achievement or feature',
         'Technical implementation detail',
         'Impact or learning outcome'
       ],
       tags: ['Technology', 'Skill', 'Concept'],
       files: [ // Optional
         {
           name: 'Document Name',
           filename: 'document.pdf',
           type: 'pdf',
           description: 'Document description'
         }
       ]
     }
   ]
   

2. Add project files (if any) Place PDF documents in public/data/files/

3. Test the changes The new project will automatically appear in the portfolio

🌐 Deployment

This project is configured for static site generation and can be deployed to any static hosting service:

• Netlify: Connect your repository and deploy automatically
• Vercel: Import your project and deploy with zero configuration
• GitHub Pages: Use the nuxt generate command and deploy the dist folder
• Cloudflare Pages: Connect your repository for automatic builds

For more deployment options, check the Nuxt deployment documentation.

📄 License

This portfolio is a personal project. Feel free to use the code structure as inspiration for your own portfolio, but please don't copy the content or design exactly.

📧 Contact

• Email: leo@0x1eo.dev
• LinkedIn: Leandro Afonso
• GitHub: 0x1eo

---

Built with ❤️ using Nuxt, Vue.js, and Tailwind CSS