Fretux/Portfolio2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Changes

Browse Source
This commit is contained in:
IM23a-spirgif
2025-02-27 13:00:46 +01:00
parent 78582f79ed
commit ef96210279
7 changed files with 147 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/.gitignore
Generated
+8
View File
@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
.idea/inspectionProfiles/Project_Default.xml
Generated
+6
View File
@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
.idea/modules.xml
Generated
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/portfolio.iml" filepath="$PROJECT_DIR$/.idea/portfolio.iml" />
</modules>
</component>
</project>
.idea/portfolio.iml
Generated
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
.idea/vcs.xml
Generated
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
src/app/globals.css
+69 -17
View File
@@ -1,24 +1,76 @@
@import "tailwindcss"; .container {
max-width: 1200px;
@theme { margin: 0 auto;
--font-sans: var(--font-geist-sans); padding: 2rem;
--font-mono: var(--font-geist-mono);
} }
:root { .header {
--background: #ffffff; text-align: center;
--foreground: #171717; margin-bottom: 2rem;
} }
@media (prefers-color-scheme: dark) { .title {
:root { font-size: 2.5rem;
--background: #0a0a0a; margin-bottom: 0.5rem;
--foreground: #ededed;
}
} }
body { .intro {
color: var(--foreground); font-size: 1.25rem;
background: var(--background); color: #666;
font-family: Arial, Helvetica, sans-serif; }
.section {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
/* Section where text is on the left */
.textLeft {
flex: 1;
padding: 1rem;
}
/* Section where image is on the right */
.imageRight {
flex: 1;
padding: 1rem;
}
/* Section where image is on the left */
.imageLeft {
flex: 1;
padding: 1rem;
}
/* Section where button is on the right */
.buttonRight {
flex: 1;
padding: 1rem;
display: flex;
justify-content: flex-end;
}
/* Ensure images are responsive */
.imageLeft img,
.imageRight img {
width: 100%;
height: auto;
border-radius: 8px;
}
.learnMoreButton {
padding: 0.75rem 1.5rem;
font-size: 1rem;
background-color: #0070f3;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.learnMoreButton:hover {
background-color: #005bb5;
} }
src/app/page.js
+38 -88
View File
@@ -2,100 +2,50 @@ import Image from "next/image";
export default function Home() { export default function Home() {
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4 py-12">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> {/* Header with title and introduction */}
<Image <header className="text-center mb-16">
className="dark:invert" <h1 className="text-5xl font-bold mb-4">My Portfolio</h1>
src="/next.svg" <p className="text-xl text-gray-600">
alt="Next.js logo" Welcome to my personal portfolio. I am passionate about creating beautiful and efficient web experiences.
width={180} </p>
height={38} </header>
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.js
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row"> {/* Section 1: Text on left, image on right */}
<a <section className="flex flex-col md:flex-row items-center mb-16 w-full max-w-5xl">
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5" <div className="md:w-1/2 p-4">
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <p className="text-lg text-gray-700">
target="_blank" I specialize in building responsive, dynamic web applications that deliver exceptional user experiences.
rel="noopener noreferrer" </p>
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div> </div>
</main> <div className="md:w-1/2 p-4 flex justify-center">
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image <Image
aria-hidden src="/project1.jpg" // Replace with your image path
src="/file.svg" alt="Project showcase"
alt="File icon" width={500}
width={16} height={300}
height={16} className="rounded-lg shadow-lg"
/> />
Learn </div>
</a> </section>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4" {/* Section 2: Image on left, button on right */}
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <section className="flex flex-col md:flex-row items-center w-full max-w-5xl">
target="_blank" <div className="md:w-1/2 p-4 flex justify-center">
rel="noopener noreferrer"
>
<Image <Image
aria-hidden src="/project2.jpg" // Replace with your image path
src="/window.svg" alt="Another project"
alt="Window icon" width={500}
width={16} height={300}
height={16} className="rounded-lg shadow-lg"
/> />
Examples </div>
</a> <div className="md:w-1/2 p-4 flex justify-center">
<a <button className="px-8 py-4 bg-blue-600 text-white text-lg rounded-lg hover:bg-blue-700 transition">
className="flex items-center gap-2 hover:underline hover:underline-offset-4" Learn More
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" </button>
target="_blank" </div>
rel="noopener noreferrer" </section>
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div> </div>
); );
} }