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

Small Bug Fixes

Browse Source
This commit is contained in:
IM23a-spirgif
2025-03-03 17:42:28 +01:00
parent b97f1c3cf6
commit e04e1fb3e3
3 changed files with 183 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.mjs
+3 -1
View File
@@ -1,4 +1,6 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = {}; const nextConfig = {
devIndicators: false,
};
export default nextConfig; export default nextConfig;
src/app/globals.css
+91 -68
View File
@@ -1,147 +1,170 @@
/* Global Styles */ /* Global Styles */
body { body {
background: linear-gradient(135deg, #000000, #1a001a); background: linear-gradient(135deg, #000000, #1a001a);
font-size: 1.125rem; font-size: 1.125rem;
font-family: 'Helvetica', sans-serif; font-family: 'Helvetica', sans-serif;
color: #ffffff; color: #ffffff;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden;
overscroll-behavior: none;
}
html {
height: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #000000, #1a001a);
overflow-x: hidden;
overscroll-behavior: none; /* Prevents scrolling past the boundaries */
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
} }
.header { .header {
text-align: center; text-align: center;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.title { .title {
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #ffffff; color: #ffffff;
} }
/* Title animation classes */ /* Title animation classes */
.title.normal { .title.normal {
opacity: 1; opacity: 1;
} }
.title.fadeOut { .title.fadeOut {
animation: fadeOutAnimation 0.5s forwards; animation: fadeOutAnimation 0.5s forwards;
} }
.title.fadeIn { .title.fadeIn {
animation: fadeInAnimation 0.5s forwards; animation: fadeInAnimation 0.5s forwards;
} }
@keyframes fadeOutAnimation { @keyframes fadeOutAnimation {
from { opacity: 1; } from {
to { opacity: 0; } opacity: 1;
}
to {
opacity: 0;
}
} }
@keyframes fadeInAnimation { @keyframes fadeInAnimation {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
.intro { .intro {
font-size: 1.5rem; font-size: 1.5rem;
color: #cccccc; color: #cccccc;
} }
/* Default fade-in section: occupies at least one full viewport */ /* Default fade-in section: occupies at least one full viewport */
.fade-in-section { .fade-in-section {
min-height: 100vh; min-height: 90vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out; transition: opacity 0.3s ease-out, transform 0.3s ease-out;
will-change: opacity, transform; will-change: opacity, transform;
} }
/* Custom override for the first content section */ /* Custom override for the first content section */
.firstSection { .firstSection {
min-height: auto; /* Remove full viewport height requirement */ min-height: auto; /* Remove full viewport height requirement */
padding: 2rem 0; /* Add vertical padding if needed */ padding: 2rem 0; /* Add vertical padding if needed */
} }
.section { .section {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
.textLeft, .textLeft,
.imageRight, .imageRight,
.imageLeft, .imageLeft,
.buttonLeft { .buttonLeft {
padding: 1rem; padding: 1rem;
flex: 1; flex: 1;
} }
/* Button container aligned to the left */ /* Button container aligned to the left */
.buttonLeft { .buttonLeft {
display: flex; display: flex;
justify-content: flex-start; justify-content: center; /* Centers the button horizontally */
align-items: center; /* Centers vertically */
width: 100%; /* Ensures it takes full width */
} }
/* Slightly smaller images */ /* Slightly smaller images */
.imageRight img, .imageRight img,
.imageLeft img { .imageLeft img {
width: 90%; width: 90%;
height: auto; height: auto;
border-radius: 8px; border-radius: 8px;
} }
/* Enlarged Learn More button with dark purple tones */ /* Enlarged Learn More button with dark purple tones */
.learnMoreButton { .learnMoreButton {
padding: 1rem 2rem; padding: 1rem 2rem;
font-size: 1.25rem; font-size: 1.25rem;
background-color: #3d003d; background-color: #3d003d;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.learnMoreButton:hover { .learnMoreButton:hover {
background-color: #2e002e; background-color: #2e002e;
} }
/* Scroll Prompt styling with no background */ /* Scroll Prompt styling with no background */
.scrollPrompt { .scrollPrompt {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
font-size: 1rem; font-size: 1rem;
z-index: 1000; z-index: 1000;
background: none; background: none;
} }
/* When section is fully visible */ /* When section is fully visible */
.fade-in-section.is-visible { .fade-in-section.is-visible {
opacity: 1; opacity: 1;
transform: none; transform: none;
} }
/* Hide scrollbar for Chrome, Safari, Opera */ /* Hide scrollbar for Chrome, Safari, Opera */
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
/* Hide scrollbar for IE, Edge and Firefox */ /* Hide scrollbar for IE, Edge and Firefox */
body { body {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
src/app/page.js
+89 -89
View File
@@ -1,101 +1,101 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import {useState, useEffect} from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import FadeInSection from "./components/FadeInSection"; import FadeInSection from "./components/FadeInSection";
export default function Home() { export default function Home() {
const [showScrollPrompt, setShowScrollPrompt] = useState(false); const [showScrollPrompt, setShowScrollPrompt] = useState(false);
const [title, setTitle] = useState("Fretux"); const [title, setTitle] = useState("Fretux");
const [phase, setPhase] = useState("normal"); const [phase, setPhase] = useState("normal");
useEffect(() => {
const interval = setInterval(() => {
setPhase("fadeOut");
setTimeout(() => {
setTitle((prev) => (prev === "Fretux" ? "Frederik Spirgi" : "Fretux"));
setPhase("fadeIn");
setTimeout(() => {
setPhase("normal");
}, 500);
}, 500);
}, 3000);
return () => clearInterval(interval);
}, []);
useEffect(() => {
if (typeof window !== "undefined") {
window.scrollTo(0, 0);
}
}, []);
useEffect(() => {
const timer = setTimeout(() => {
setShowScrollPrompt(true);
}, 1500);
// Title flicker effect: every 3 seconds, fade out, toggle title, then fade in. const handleScroll = () => {
useEffect(() => { setShowScrollPrompt(false);
const interval = setInterval(() => { clearTimeout(timer); // Ensures the timeout is cleared if the user scrolls early
setPhase("fadeOut"); window.removeEventListener("scroll", handleScroll);
setTimeout(() => { };
setTitle((prev) => (prev === "Fretux" ? "Frederik Spirgi" : "Fretux"));
setPhase("fadeIn");
setTimeout(() => {
setPhase("normal");
}, 500);
}, 500);
}, 3000);
return () => clearInterval(interval);
}, []);
// Show scroll prompt after a delay (once the title has loaded in). window.addEventListener("scroll", handleScroll);
useEffect(() => {
const timer = setTimeout(() => {
setShowScrollPrompt(true);
}, 1500); // Adjust the delay as needed
return () => clearTimeout(timer);
}, []);
// Remove the scroll prompt permanently upon first scroll. return () => {
useEffect(() => { clearTimeout(timer);
const handleScroll = () => { window.removeEventListener("scroll", handleScroll);
setShowScrollPrompt(false); };
window.removeEventListener("scroll", handleScroll); }, []);
}; return (
<div className="container">
window.addEventListener("scroll", handleScroll); {showScrollPrompt && (
return () => window.removeEventListener("scroll", handleScroll); <div className="scrollPrompt">
}, []); <p>Scroll subtly</p>
</div>
return ( )}
<div className="container"> <FadeInSection>
{showScrollPrompt && ( <header className="header">
<div className="scrollPrompt"> <h1 className={`title ${phase}`}>{title}</h1>
<p>Scroll subtly</p> <p className="intro">
Welcome to my portfolio. I’m a web developer passionate about building modern, responsive
applications.
</p>
</header>
</FadeInSection>
<FadeInSection>
<section className="section">
<div className="textLeft">
<p>
I specialize in creating intuitive user experiences and dynamic web solutions using Next.js,
React, and modern design principles.
</p>
</div>
<div className="imageRight">
<Image
src="/images/portfolio1.jpg"
alt="Screenshot of a portfolio project"
width={500}
height={300}
/>
</div>
</section>
</FadeInSection>
<FadeInSection>
<section className="section">
<div className="imageLeft">
<Image
src="/images/portfolio2.jpg"
alt="Another project snapshot"
width={500}
height={300}
/>
</div>
<div className="buttonLeft">
<Link href="/about">
<button className="learnMoreButton">Learn More</button>
</Link>
</div>
</section>
</FadeInSection>
</div> </div>
)} );
<FadeInSection>
<header className="header">
<h1 className={`title ${phase}`}>{title}</h1>
<p className="intro">
Welcome to my portfolio. I’m a web developer passionate about building modern, responsive applications.
</p>
</header>
</FadeInSection>
<FadeInSection>
<section className="section">
<div className="textLeft">
<p>
I specialize in creating intuitive user experiences and dynamic web solutions using Next.js, React, and modern design principles.
</p>
</div>
<div className="imageRight">
<Image
src="/images/portfolio1.jpg"
alt="Screenshot of a portfolio project"
width={500}
height={300}
/>
</div>
</section>
</FadeInSection>
<FadeInSection>
<section className="section">
<div className="imageLeft">
<Image
src="/images/portfolio2.jpg"
alt="Another project snapshot"
width={500}
height={300}
/>
</div>
<div className="buttonLeft">
<Link href="/about">
<button className="learnMoreButton">Learn More</button>
</Link>
</div>
</section>
</FadeInSection>
</div>
);
} }