Skip to content

Commit 28e6557

Browse files
LemophileLemophile
committed
Mise à jour
1 parent 99887b6 commit 28e6557

16 files changed

Lines changed: 1235 additions & 5 deletions

‎app/globals.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 255, 255, 255;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
}
28+
29+
/* Custom scrollbar */
30+
::-webkit-scrollbar {
31+
width: 8px;
32+
height: 8px;
33+
}
34+
35+
::-webkit-scrollbar-track {
36+
background: #f1f1f1;
37+
border-radius: 4px;
38+
}
39+
40+
::-webkit-scrollbar-thumb {
41+
background: #888;
42+
border-radius: 4px;
43+
}
44+
45+
::-webkit-scrollbar-thumb:hover {
46+
background: #555;
47+
}
48+
49+
/* Animation classes */
50+
.fade-in {
51+
animation: fadeIn 0.5s ease-in-out;
52+
}
53+
54+
@keyframes fadeIn {
55+
from { opacity: 0; }
56+
to { opacity: 1; }
57+
}
58+
59+
.slide-up {
60+
animation: slideUp 0.5s ease-out;
61+
}
62+
63+
@keyframes slideUp {
64+
from {
65+
opacity: 0;
66+
transform: translateY(20px);
67+
}
68+
to {
69+
opacity: 1;
70+
transform: translateY(0);
71+
}
72+
}
73+
74+
/* Custom components */
75+
.btn-primary {
76+
@apply px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors;
77+
}
78+
79+
.btn-outline {
80+
@apply px-6 py-3 border-2 border-gray-900 text-gray-900 font-medium rounded-lg hover:bg-gray-100 transition-colors;
81+
}
82+
83+
.section-title {
84+
@apply text-3xl font-bold text-gray-900 sm:text-4xl mb-4 relative inline-block;
85+
}
86+
87+
.section-title::after {
88+
content: '';
89+
@apply absolute bottom-0 left-0 w-full h-1 bg-indigo-600 rounded-full;
90+
transform: scaleX(0.3);
91+
transform-origin: left;
92+
animation: scaleIn 0.5s ease-out forwards;
93+
}
94+
95+
@keyframes scaleIn {
96+
to {
97+
transform: scaleX(1);
98+
}
99+
}
100+
101+
/* Card styles */
102+
.card {
103+
@apply bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-6;
104+
}
105+
106+
/* Form styles */
107+
.input-field {
108+
@apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
109+
}
110+
111+
/* Custom utilities */
112+
.text-gradient {
113+
@apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-600;
114+
}
115+
116+
/* Responsive adjustments */
117+
@media (max-width: 768px) {
118+
.section-title {
119+
@apply text-2xl;
120+
}
121+
}

‎app/layout.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { Metadata } from 'next';
2+
import { Inter } from 'next/font/google';
3+
import './globals.css';
4+
import Layout from '../components/Layout';
5+
6+
const inter = Inter({ subsets: ['latin'] });
7+
8+
export const metadata: Metadata = {
9+
title: 'Piwi - Personal Portfolio',
10+
description: 'Personal portfolio website showcasing my projects and skills',
11+
};
12+
13+
export default function RootLayout({
14+
children,
15+
}: {
16+
children: React.ReactNode;
17+
}) {
18+
return (
19+
<html lang="en">
20+
<body className={inter.className}>
21+
<Layout>
22+
{children}
23+
</Layout>
24+
</body>
25+
</html>
26+
);
27+
}

‎app/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import dynamic from 'next/dynamic';
2+
3+
// Dynamically import components with no SSR to avoid hydration issues
4+
const Hero = dynamic(() => import('../components/Hero'), { ssr: false });
5+
const About = dynamic(() => import('../components/About'), { ssr: false });
6+
const Skills = dynamic(() => import('../components/Skills'), { ssr: false });
7+
const Projects = dynamic(() => import('../components/Projects'), { ssr: false });
8+
const Contact = dynamic(() => import('../components/Contact'), { ssr: false });
9+
10+
export default function Home() {
11+
return (
12+
<>
13+
<Hero />
14+
<About />
15+
<Skills />
16+
<Projects />
17+
<Contact />
18+
</>
19+
);
20+
}

‎components/About.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { motion } from 'framer-motion';
2+
3+
export default function About() {
4+
return (
5+
<section id="about" className="py-20 bg-white">
6+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
7+
<motion.div
8+
className="text-center mb-16"
9+
initial={{ opacity: 0, y: 20 }}
10+
whileInView={{ opacity: 1, y: 0 }}
11+
viewport={{ once: true }}
12+
transition={{ duration: 0.6 }}
13+
>
14+
<h2 className="text-3xl font-bold text-gray-900 sm:text-4xl">About Me</h2>
15+
<div className="w-24 h-1 bg-indigo-600 mx-auto mt-4 rounded-full"></div>
16+
</motion.div>
17+
18+
<div className="grid md:grid-cols-2 gap-12 items-center">
19+
<motion.div
20+
initial={{ opacity: 0, x: -50 }}
21+
whileInView={{ opacity: 1, x: 0 }}
22+
viewport={{ once: true }}
23+
transition={{ duration: 0.6, delay: 0.2 }}
24+
>
25+
<h3 className="text-2xl font-semibold text-gray-900 mb-6">Who I Am</h3>
26+
<p className="text-gray-600 mb-6">
27+
I'm a passionate developer with a keen eye for design and a love for creating beautiful,
28+
functional web applications. With expertise in modern web technologies, I bring ideas to
29+
life through clean and efficient code.
30+
</p>
31+
<p className="text-gray-600 mb-6">
32+
My journey in web development started several years ago, and since then, I've had the
33+
opportunity to work on various projects that have honed my skills and expanded my knowledge.
34+
</p>
35+
<div className="flex flex-wrap gap-4">
36+
<span className="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">
37+
Web Development
38+
</span>
39+
<span className="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">
40+
UI/UX Design
41+
</span>
42+
<span className="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">
43+
Problem Solving
44+
</span>
45+
</div>
46+
</motion.div>
47+
48+
<motion.div
49+
className="grid grid-cols-2 gap-4"
50+
initial={{ opacity: 0, x: 50 }}
51+
whileInView={{ opacity: 1, x: 0 }}
52+
viewport={{ once: true }}
53+
transition={{ duration: 0.6, delay: 0.4 }}
54+
>
55+
<div className="bg-gray-50 p-6 rounded-xl">
56+
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
57+
<span className="text-2xl">🎓</span>
58+
</div>
59+
<h4 className="font-semibold text-lg mb-2">Education</h4>
60+
<p className="text-gray-600 text-sm">
61+
Degree in Computer Science with a focus on Web Technologies
62+
</p>
63+
</div>
64+
65+
<div className="bg-gray-50 p-6 rounded-xl">
66+
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
67+
<span className="text-2xl">💼</span>
68+
</div>
69+
<h4 className="font-semibold text-lg mb-2">Experience</h4>
70+
<p className="text-gray-600 text-sm">
71+
X+ years of professional experience in web development
72+
</p>
73+
</div>
74+
75+
<div className="bg-gray-50 p-6 rounded-xl">
76+
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
77+
<span className="text-2xl">🌍</span>
78+
</div>
79+
<h4 className="font-semibold text-lg mb-2">Location</h4>
80+
<p className="text-gray-600 text-sm">
81+
Based in [Your Location], open to remote work
82+
</p>
83+
</div>
84+
85+
<div className="bg-gray-50 p-6 rounded-xl">
86+
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
87+
<span className="text-2xl">🚀</span>
88+
</div>
89+
<h4 className="font-semibold text-lg mb-2">Interests</h4>
90+
<p className="text-gray-600 text-sm">
91+
Web Technologies, Open Source, Photography
92+
</p>
93+
</div>
94+
</motion.div>
95+
</div>
96+
</div>
97+
</section>
98+
);
99+
}

0 commit comments

Comments
 (0)