<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
</nav>
<header class="hero">
  <h1>Developer</h1>
  <p>Full Stack Developer</p>
</header>
<section id="projects">
  <div class="container">
    <article class="card"></article>
  </div>
</section>
<form class="contact-form">
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <button>Submit</button>
</form>
<footer class="footer">
  <div class="social-links">
    <a href="#">GitHub</a>
    <a href="#">LinkedIn</a>
  </div>
</footer>
<div class="project-grid">
  <div class="project-card">
    <img src="project.jpg" alt="Project">
    <h3>Project Title</h3>
  </div>
</div>
<main class="main-content">
  <section id="about">
    <h2>About Me</h2>
    <p>My journey...</p>
  </section>
</main>
<aside class="sidebar">
  <div class="skills">
    <h3>Skills</h3>
    <ul>
      <li>JavaScript</li>
    </ul>
  </div>
</aside>
<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <script src="app.js"></script>
</body>
</html>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
.project-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
}
:root {
  --primary-color: #48182F;
  --secondary-color: #6d2747;
  --text-color: #333;
  --bg-color: #f8f9fa;
}
.btn-primary {
  background: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
}
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
const projects = [
  {
    name: "E-commerce",
    tech: ["React", "Node.js"],
    featured: true
  }
];
function fetchProjects() {
  return fetch('/api/projects')
    .then(response => response.json())
    .then(data => data.projects);
}
class Project {
  constructor(name, technologies) {
    this.name = name;
    this.technologies = technologies;
  }
}
const featuredProjects = projects
  .filter(project => project.featured)
  .map(project => ({
    ...project,
    slug: project.name.toLowerCase()
}));
document.addEventListener('DOMContentLoaded', () => {
  const navbar = document.querySelector('.navbar');
  window.addEventListener('scroll', () => {
    navbar.classList.toggle('scrolled', window.scrollY > 100);
  });
});
async function loadProjects() {
  try {
    const response = await fetch('/api/projects');
    const projects = await response.json();
    return projects;
  } catch (error) {
    console.error('Failed to load projects:', error);
  }
}
const projectService = {
  getAll: () => fetch('/api/projects'),
  getById: (id) => fetch(`/api/projects/${id}`),
  create: (project) => fetch('/api/projects', {
    method: 'POST',
    body: JSON.stringify(project)
  })
};
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};
import React, { useState, useEffect } from 'react';
const ProjectList = () => {
  const [projects, setProjects] = useState([]);
  useEffect(() => { fetchProjects(); }, []);
  return (<div>{projects.map(renderProject)}</div>);
};
const ProjectCard = ({ project }) => {
  return (
    <div className="project-card">
      <h3>{project.title}</h3>
      <p>{project.description}</p>
    </div>
  );
};
import { createContext, useContext } from 'react';
const PortfolioContext = createContext();
export const usePortfolio = () => useContext(PortfolioContext);
const useProjects = () => {
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => { loadProjects(); }, []);
  return { projects, loading };
};
const ProjectGrid = () => {
  const { projects, loading } = useProjects();
  if (loading) return <div>Loading...</div>;
  return (
    <div className="grid">
      {projects.map(project => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </div>
  );
};
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/projects" element={<Projects />} />
    </Routes>
  </Router>
);
@RestController
public class ProjectController {
  @GetMapping("/api/projects")
  public List<Project> getProjects() {
    return projectService.findAll();
  }
}
@Entity
@Table(name = "projects")
public class Project {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  private String title;
}
@Service
public class ProjectService {
  @Autowired
  private ProjectRepository repository;
  public List<Project> findFeaturedProjects() {
    return repository.findByFeaturedTrue();
  }
}
public interface ProjectRepository
  extends JpaRepository<Project, Long> {
  List<Project> findByFeaturedTrue();
  List<Project> findByTechnologiesContaining(String tech);
}
@Configuration
@EnableWebSecurity
public class SecurityConfig {
  @Bean
  public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    return http.csrf().disable().build();
  }
}
@SpringBootApplication
public class PortfolioApplication {
  public static void main(String[] args) {
    SpringApplication.run(PortfolioApplication.class, args);
  }
}
SELECT name, description, created_at
FROM projects
WHERE featured = true
ORDER BY created_at DESC
LIMIT 6;
INSERT INTO projects (name, description, featured)
VALUES ('Portfolio Website', 'Personal portfolio site', true);
CREATE TABLE projects (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  description TEXT,
  featured BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT NOW()
);
SELECT p.name, COUNT(s.id) as skills_count
FROM projects p
LEFT JOIN project_skills ps ON p.id = ps.project_id
LEFT JOIN skills s ON ps.skill_id = s.id
GROUP BY p.id, p.name;
describe('Project Page', () => {
  it('should display projects', () => {
    cy.visit('/projects');
    cy.get('.project-card').should('have.length.at.least', 1);
  });
});
it('should filter projects by technology', () => {
  cy.get('[data-testid="filter-react"]').click();
  cy.get('.project-card').each($card => {
    expect($card).to.contain('React');
  });
});
describe('Navigation', () => {
  beforeEach(() => {
    cy.visit('/');
  });
  it('should navigate to projects page', () => {
    cy.get('nav a[href="/projects"]').click();
    cy.url().should('include', '/projects');
  });
});
#!/bin/bash
# Build and deploy script
npm run build
git add .
git commit -m "Deploy: $(date)"
git push origin main
#!/bin/bash
# Database backup script
pg_dump mydatabase > backup_$(date +%Y%m%d).sql
gzip backup_$(date +%Y%m%d).sql
echo "Backup completed"
#!/bin/bash
# Server deployment
ssh user@server 'cd /app && git pull && npm install && pm2 restart app'
public partial class MainWindow : Window
{
  public ObservableCollection<Project> Projects { get; set; }
  public MainWindow()
  {
    InitializeComponent();
    DataContext = this;
  }
}
<Window x:Class="Portfolio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Grid>
    <ListBox ItemsSource="{Binding Projects}">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
  </Grid>
</Window>
<section class="greeting">
    <h2> Hey, I'm tiillouy. Take a look and let's connect </h2>
</section>
Projects Contact