feat: v0 of portfolio

2025-04-06 15:28:54 +02:00
parent 1b5f536457
commit c3b832c9db
22 changed files with 917 additions and 221 deletions
--- a/src/assets/sketch.png
+++ b/src/assets/sketch.png
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import image from '../assets/sketch.png';
+
+const taglines = [
+	"Amateur Writer",
+	"Bookworm",
+	"Star Gazer",
+	"Physics Enthusiast",
+	"Lifelong Learner",
+	"Tea Enthusiast",
+	"Cosmic Explorer",
+	"Knowledge Seeker",
+];
+
+export default function About({ theme }) {
+	const [tagline, setTagline] = useState('');
+
+	useEffect(() => {
+		const randomTagline = taglines[Math.floor(Math.random() * taglines.length)];
+		setTagline(randomTagline);
+	}, []);
+
+	return (
+		<section id="about" class="pt-8">
+			<div class="flex flex-col md:flex-row gap-8 items-center">
+				<div class="flex-1">
+					<h1 class={`text-4xl md:text-5xl mb-4 ${theme.accent} font-serif font-semibold`}>Alejandro Laguna</h1>
+					<h2 class="text-xl md:text-2xl mb-6 text-[#b8c4b5]/80 font-medium font-serif">Software Engineer & {tagline}</h2>
+					<p class="text-lg mb-6 text-[#b8c4b5]/90">
+						Crafting digital projects that inspire me, while exploring everything from books and tea to space and science. First-year computer science student.
+					</p>
+					<div class="flex gap-4">
+						<a href="#projects" class={`px-6 py-2 rounded-full border ${theme.border} ${theme.hover} transition-all hover:-translate-y-0.5`}>
+							View Work
+						</a>
+						<a href="mailto:alejandro.laguna@epitech.eu" class={`px-6 py-2 rounded-full ${theme.button} transition-all hover:-translate-y-0.5`}>
+							Contact
+						</a>
+					</div>
+				</div>
+				<div class="flex-1 flex justify-center">
+					<img src={image} alt="Alex Clark's Sketch" class="w-64 h-64 rounded-full object-cover" />
+				</div>
+			</div>
+		</section>
+	);
+}
+
--- a/src/components/Education.tsx
+++ b/src/components/Education.tsx
@@ -0,0 +1,36 @@
+import EducationCard from './EducationCard';
+
+const education = [
+	{
+		institution: "European Institute of Technology (EPITECH)",
+		degree: "Degree + Master in Computer Science",
+		duration: "2024 - 2029",
+		highlights: [
+			"ONGOING",
+			"Multiple courses passed with Honors",
+			"Completed over 30 projects from different fields"
+		]
+	},
+	{
+		institution: "INS Cendrassos",
+		degree: "Microcomputer systems & networks",
+		duration: "2022 - 2024",
+		highlights: [
+			"First of the class",
+			"ERASMUS+ Scholarship",
+		]
+	}
+];
+
+export default function Education({ theme }) {
+	return (
+		<section id="education">
+			<h2 class={`text-3xl mb-8 font-serif font-semibold ${theme.accent}`}>Education</h2>
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+				{education.map((edu, i) => (
+					<EducationCard key={i} education={edu} theme={theme} />
+				))}
+			</div>
+		</section>
+	);
+}
--- a/src/components/EducationCard.tsx
+++ b/src/components/EducationCard.tsx
@@ -0,0 +1,18 @@
+export default function EducationCard({ education, theme }) {
+	return (
+		<div class={`p-4 rounded-xl border ${theme.border} ${theme.card} transition-all hover:-translate-y-1 group`}>
+			<div class="flex justify-between items-start mb-4">
+				<div>
+					<h3 class="text-lg">{education.degree}</h3>
+					<p class="text-[#b8c4b5]/80">{education.institution}</p>
+				</div>
+				<span class="text-sm text-[#b8c4b5]/50">{education.duration}</span>
+			</div>
+			<ul class="list-disc pl-6 space-y-2 mb-4">
+				{education.highlights.map((highlight, j) => (
+					<li key={j} class="text-[#b8c4b5]/90">{highlight}</li>
+				))}
+			</ul>
+		</div>
+	);
+}
--- a/src/components/Experience.tsx
+++ b/src/components/Experience.tsx
@@ -0,0 +1,39 @@
+import ExperienceCard from './ExperienceCard';
+
+const experience = [
+	{
+		company: "Avantiam Inc - Figueres, Spain",
+		role: "Full-Stack Developer",
+		duration: "Sep 2023 - Sep 2024",
+		technologies: ["Laravel", "Livewire", "AlpineJS", "TailwindCSS", "MariaDB/MySQL"],
+		highlights: [
+			"Developed and maintained a comprehensive business management service used by over 100 companies",
+			"Managed all aspects of the project lifecycle, including server administration, performance tuning, and user experience improvements.",
+			"Recommendation letter available upon request."
+		]
+	},
+	{
+		company: "Niblu Group - Maribor, Slovenia",
+		role: "Backend Developer Intern",
+		duration: "Summer 2023",
+		technologies: ["NextJS", "TailwindCSS", "TypeScript", "FastAPI", "AWS S3 Bucket"],
+		highlights: [
+			"Developed a secure authentication system and features for managing courses across different user roles.",
+			"Integrated AWS S3 for seamless storage and retrieval of course materials.",
+			"Gained valuable personal and professional growth through the ERASMUS experience, adapting to new challenges abroad alone."
+		]
+	}
+];
+export default function Experience({ theme }) {
+	return (
+		<section id="experience">
+			<h2 class={`text-3xl mb-8 ${theme.accent} font-semibold font-serif`}>Work Experience</h2>
+			<div class="space-y-8">
+				{experience.map((exp, i) => (
+					<ExperienceCard key={i} experience={exp} theme={theme} />
+				))}
+			</div>
+		</section>
+	);
+}
+
--- a/src/components/ExperienceCard.tsx
+++ b/src/components/ExperienceCard.tsx
@@ -0,0 +1,36 @@
+export default function ExperienceCard({ experience, theme }) {
+	return (
+		<div class={`p-6 rounded-xl border ${theme.border} ${theme.card} transition-all hover:-translate-y-1 group`}>
+			<div class="flex justify-between items-start mb-4">
+				<div>
+					<h3 class="text-xl">{experience.company}</h3>
+					<p class="text-[#b8c4b5]/80">{experience.role}</p>
+				</div>
+				<span class="text-sm text-[#b8c4b5]/50">{experience.duration}</span>
+			</div>
+			<ul class="list-disc pl-6 space-y-2 mb-4">
+				{experience.highlights.map((highlight, j) => (
+					<li key={j} class="text-[#b8c4b5]/90">{highlight}</li>
+				))}
+			</ul>
+			{experience.technologies && (
+				<div class="flex flex-wrap gap-2 mb-4">
+					<h4 class="text-lg font-semibold text-[#b8c4b5]/90">Technologies Used:</h4>
+					{experience.technologies.map((tech, i) => (
+						<span key={i} class={`px-3 rounded-full ${theme.bg} text-[#b8c4b5]/80`}>{tech}</span>
+					))}
+				</div>
+			)}
+			{experience.link && (
+				<a
+					href={experience.link}
+					class={`inline-flex items-center text-sm ${theme.accent} ${theme.hover}`}
+				>
+					View More
+					<span class="ml-2 transition-transform group-hover:translate-x-1">→</span>
+				</a>
+			)}
+		</div>
+	);
+}
+
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,26 @@
+export default function Footer({ theme }) {
+	const handleDownload = () => {
+		const link = document.createElement('a');
+		link.href = '/public/resume_eng.pdf';
+		link.download = 'alejandrolaguna_resume_eng.pdf';
+		link.click();
+	};
+
+	return (
+		<footer class={`pt-8 border-t border-opacity-20 ${theme.border}`}>
+			<div class="flex flex-col md:flex-row justify-between items-center">
+				<p class="text-sm text-[#b8c4b5]/50 mb-4 md:mb-0">© 2025 Alejandro Laguna</p>
+				<div class="flex gap-6">
+					<a href="https://github.com/alejandrolaguna20" class={`text-sm ${theme.text} ${theme.hover}`}>GitHub</a>
+					<a href="https://www.linkedin.com/in/alejandro-laguna-939687278/" class={`text-sm ${theme.text} ${theme.hover}`}>LinkedIn</a>
+					<button
+						onClick={handleDownload}
+						class={`text-sm ${theme.text} ${theme.hover} cursor-pointer`}
+					>
+						CV
+					</button>
+				</div>
+			</div>
+		</footer>
+	);
+}
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,18 +1,22 @@
-import { useLocation } from 'preact-iso';
-
-export function Header() {
-	const { url } = useLocation();
+export function Header({ theme }) {

 	return (
-		<header>
-			<nav>
-				<a href="/" class={url == '/' && 'active'}>
-					Home
-				</a>
-				<a href="/404" class={url == '/404' && 'active'}>
-					404
-				</a>
-			</nav>
+		<header class="fixed w-full top-0 z-50 backdrop-blur-sm">
+			<div class="max-w-5xl mx-auto px-4 py-3 flex justify-between items-center">
+				<h1 class={`text-xl font-bold opacity-50 ${theme.accent} tracking-wider font-serif`}>alejandrolaguna.dev</h1>
+				<nav class="hidden md:flex gap-6">
+					{['About', 'Projects', 'Experience'].map((item) => (
+						<a
+							href={`#${item.toLowerCase()}`}
+							class={`text-sm ${theme.text} ${theme.hover} transition-colors`}
+						>
+							{item}
+						</a>
+					))}
+				</nav>
+			</div>
 		</header>
 	);
 }
+
+
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -0,0 +1,10 @@
+export default function Layout({ children, theme }) {
+	return (
+		<div class={`min-h-screen transition-colors duration-300 ${theme.bg} ${theme.text}`}>
+			<main class="max-w-5xl mx-auto px-4 pt-24 pb-16 space-y-16">
+				{children}
+			</main>
+		</div>
+	);
+}
+
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -0,0 +1,26 @@
+export default function ProjectCard({ project, theme }) {
+	return (
+		<div class={`p-6 rounded-xl border ${theme.border} ${theme.card} transition-all hover:-translate-y-1 group`}>
+			<div class="flex justify-between items-start mb-4">
+				<h3 class="text-xl">{project.title}</h3>
+				<span class="text-sm text-[#b8c4b5]/50">{project.year}</span>
+			</div>
+			<p class="mb-4 text-[#b8c4b5]/80">{project.description}</p>
+			<div class="flex flex-wrap gap-2 mb-4">
+				{project.tech.map((tech, j) => (
+					<span key={j} class={`px-3 py-1 rounded-full ${theme.bg} text-[#b8c4b5]/80`}>{tech}</span>
+				))}
+			</div>
+			{project.link && (
+				<a
+					href={project.link}
+					class={`inline-flex items-center text-sm ${theme.accent} ${theme.hover}`}
+				>
+					View Details
+					<span class="ml-2 transition-transform group-hover:translate-x-1">→</span>
+				</a>
+			)}
+		</div>
+	);
+}
+
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -0,0 +1,46 @@
+import ProjectCard from './ProjectCard';
+
+const projects = [
+	{
+		title: "Codertype",
+		description: "A monkeytype-like application designed specifically for developers",
+		tech: ["Laravel", "Livewire", "AlpineJS", "TailwindCSS", "PostgreSQL"],
+		year: "2025",
+		link: "https://github.com/alejandrolaguna20/codertype"
+	},
+	{
+		title: "Nook.nvim",
+		description: "A tiny Neovim plugin created to manage tasks in a way that perfectly fits my personal workflow ",
+		tech: ["Lua"],
+		year: "2025",
+		link: "https://github.com/alejandrolaguna20/nook.nvim"
+	},
+	{
+		title: "Portfolio",
+		description: "The website you are currently browsing, my little corner on the web.",
+		tech: ["Typescript", "PreactJS", "TailwindCSS", "Vite"],
+		year: "2025",
+		link: "https://github.com/alejandrolaguna20/portfolio"
+	},
+	{
+		title: "Epitech Projects",
+		description: "A variety of projects I am building in my first year @ Epitech that range from algorithm implementation, graphical and mathematical simulations, and developing from scratch different Linux commands and programs, including a shell.",
+		tech: ["C", "Bash", "Python"],
+		year: "2025",
+		link: "https://www.epitech.eu/programme-grande-ecole-informatique/"
+	}
+];
+
+export default function Projects({ theme }) {
+	return (
+		<section id="projects">
+			<h2 class={`text-3xl font-semibold font-serif mb-8 ${theme.accent}`}>Projects</h2>
+			<div class="grid gap-6">
+				{projects.map((project, i) => (
+					<ProjectCard key={i} project={project} theme={theme} />
+				))}
+			</div>
+		</section>
+	);
+}
+
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +1,40 @@
 import { render } from 'preact';
 import { LocationProvider, Router, Route } from 'preact-iso';
-
-import { Header } from './components/Header.jsx';
 import { Home } from './pages/Home/index.jsx';
 import { NotFound } from './pages/_404.jsx';
 import './style.css';
+import { Header } from './components/Header.js';

 export function App() {
+	const theme = {
+		bg: 'bg-[#1c2529]',
+		text: 'text-[#f0e4c8]',
+		accent: 'text-[#c7dd9a]',
+		accent2: 'text-[#f0b090]',
+		border: 'border-[#344146]',
+		card: 'bg-[#263136]',
+		hover: 'hover:text-[#fff4d8]',
+		button: 'bg-[#344146] hover:bg-[#49555a] text-[#f0e4c8]',
+		bg_hl: 'bg-[#344146]',
+		gradient: 'from-[#1c2529] via-[#263136] to-[#1c2529]'
+	}
+
 	return (
 		<LocationProvider>
-			<Header />
+			<Header
+				theme={theme}
+			/>
 			<main>
 				<Router>
-					<Route path="/" component={Home} />
-					<Route default component={NotFound} />
+					<Route
+						path="/"
+						component={() => (
+							<Home
+								theme={theme}
+							/>
+						)}
+					/>
+					<Route default component={() => (<Home theme={theme} />)} />
 				</Router>
 			</main>
 		</LocationProvider>
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,39 +1,28 @@
-import preactLogo from '../../assets/preact.svg';
-import './style.css';
+import { useState, useEffect } from 'preact/hooks';
+import Layout from '../../components/Layout';
+import About from '../../components/About';
+import Projects from '../../components/Projects';
+import Experience from '../../components/Experience';
+import Footer from '../../components/Footer';
+import Education from '../../components/Education';
+
+export function Home({ theme }) {
+	const [scrollPosition, setScrollPosition] = useState(0);
+
+	useEffect(() => {
+		const handleScroll = () => setScrollPosition(window.scrollY);
+		window.addEventListener('scroll', handleScroll);
+		return () => window.removeEventListener('scroll', handleScroll);
+	}, []);

-export function Home() {
 	return (
-		<div class="home">
-			<a href="https://preactjs.com" target="_blank">
-				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
-			</a>
-			<h1>Get Started building Vite-powered Preact Apps </h1>
-			<section>
-				<Resource
-					title="Learn Preact"
-					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
-					href="https://preactjs.com/tutorial"
-				/>
-				<Resource
-					title="Differences to React"
-					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
-					href="https://preactjs.com/guide/v10/differences-to-react"
-				/>
-				<Resource
-					title="Learn Vite"
-					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
-					href="https://vitejs.dev"
-				/>
-			</section>
-		</div>
+		<Layout theme={theme}>
+			<About theme={theme} />
+			<Education theme={theme} />
+			<Experience theme={theme} />
+			<Projects theme={theme} />
+			<Footer theme={theme} />
+		</Layout>
 	);
 }

-function Resource(props) {
-	return (
-		<a href={props.href} target="_blank" class="resource">
-			<h2>{props.title}</h2>
-			<p>{props.description}</p>
-		</a>
-	);
-}
--- a/src/pages/Home/style.css
+++ b/src/pages/Home/style.css
@@ -1,47 +0,0 @@
-img {
-	margin-bottom: 1.5rem;
-}
-
-img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.home section {
-	margin-top: 5rem;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	column-gap: 1.5rem;
-}
-
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (max-width: 639px) {
-	.home section {
-		margin-top: 5rem;
-		grid-template-columns: 1fr;
-		row-gap: 1rem;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
-}
--- a/src/style.css
+++ b/src/style.css
@@ -1,70 +1,63 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
+@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Sarala:wght@400;700&display=swap');
+@import "tailwindcss";

-	color: #222;
-	background-color: #ffffff;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
+@theme {
+	--font-serif: "Aleo", "monospace";
 }

-body {
-	margin: 0;
-}
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}

-#app {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-}
-
-header {
-	display: flex;
-	justify-content: flex-end;
-	background-color: #673ab8;
-}
-
-header nav {
-	display: flex;
-}
-
-header a {
-	color: #fff;
-	padding: 0.75rem;
-	text-decoration: none;
-}
-
-header a.active {
-	background-color: #0005;
-}
-
-header a:hover {
-	background-color: #0008;
-}
-
-main {
-	flex: auto;
-	display: flex;
-	align-items: center;
-	max-width: 1280px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-@media (max-width: 639px) {
-	main {
-		margin: 2rem;
+	to {
+		opacity: 1;
+		transform: translateY(0);
 	}
 }

-@media (prefers-color-scheme: dark) {
-	:root {
-		color: #ccc;
-		background-color: #1a1a1a;
-	}
+.transition-all {
+	transition: all 0.3s ease;
+}
+
+.hover\:-translate-y-2:hover {
+	transform: translateY(-8px);
+}
+
+.hover\:-translate-y-1:hover {
+	transform: translateY(-4px);
+}
+
+.backdrop-blur-sm {
+	backdrop-filter: blur(8px);
+}
+
+/* Add to style.css */
+.group:hover .group-hover\:translate-x-1 {
+	transform: translateX(0.25rem);
+}
+
+.transition-transform {
+	transition: transform 0.3s ease;
+}
+
+.list-disc li::marker {
+	color: #b8c4b550;
+}
+
+.group:hover .group-hover\:translate-x-1 {
+	transform: translateX(0.25rem);
+}
+
+.transition-transform {
+	transition: transform 0.3s ease;
+}
+
+.list-disc li::marker {
+	color: #b8c4b550;
+}
+
+html {
+	scroll-behavior: smooth;
 }