I'm currently trying to create a portfolio website as a result of my learnings on Next.js and tailwind.
The problem that I'm facing at the moment is that I'm unable to make my application responsive on a mobile layout. As you can see the image and the texts are overlapping themselves instead of staying in place
I'm still a beginner at web development so I don't really have any idea of how to fix it after 4 frustrating hours trying to align the contents.
Here is the code that I'm trying to implement, any ideas?
import React from 'react'
import { motion } from "framer-motion";
type Props = {}
export default function About({}: Props) {
return (
<motion.div
initial={{ opacity: 0 }}
transition={{ duration: 1.5 }}
whileInView={{ opacity: 1 }}
className='flex flex-col relative h-screen text-center md:text-left md:flex-row max-w-7xl px-10 justify-evenly mx-auto items-center'>
<h3 className='absolute top-24 uppercase tracking-[20px] text-gray-500 text-2xl'>
About
</h3>
<motion.img
initial={{
x: -200,
opacity: 0
}}
transition={{ duration: 1.2 }}
whileInView={{
x: 0,
opacity: 1
}}
viewport={{ once: true }}
src='https://images.pexels.com/photos/1572878/pexels-photo-1572878.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt="profile picture"
className='-mb-20 md:mb-0 flex-shrink-0 w-56 h-56 rounded-full object-cover md:rounded-lg md:w64 md:h-95 xl:w-[500px] xl:h-[600px]'
/>
<div className='space-y-10 px-0 md:px-10'>
<h4 className='text-4xl font-semibold'>
Here is a little background
</h4>
<p className='text-base'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel libero
nisi. Cras vel dignissim diam. Etiam varius enim sed libero suscipit
sagittis. Suspendisse varius, mi eu tempor porttitor, ex risus molestie
purus, vitae sagittis mi nisl et justo. Fusce fermentum vitae orci at
blandit. Nunc molestie est non metus porta pharetra. Nunc molestie
pretium felis iaculis faucibus. Sed pretium venenatis facilisis.
Vivamus vel varius velit. Nullam id odio vitae ligula efficitur
semper et nec enim. Duis convallis risus eget metus tristique,
pretium elementum eros pharetra. Nulla facilisi. In at mauris
id est ultrices ac
</p>
</div>
</motion.div>
)
}
Related
I have a problem with the autoplay video background on the Safari desktop.
AutoPlay works fine in Firefox, Chrome etc, but not in Safari, how can I fix it?
Bellow my code:
<header class="relative flex items-center justify-center h-screen mb-12 overflow-hidden">
<div class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<video autoplay loop muted class="absolute z-10 w-auto min-w-full min-h-full max-w-none">
<source src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4" type="video/mp4" />Your browser does not support the video tag.
</video>
</header>
<div class="max-w-lg m-auto">
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat a
magna non varius. Proin leo felis, euismod non porta eget, varius sit amet
sapien. Maecenas in nulla at leo convallis consectetur id a sapien. Nulla
nec pulvinar nisi. Vivamus non facilisis lacus, et volutpat libero. Nulla ac
odio aliquam, accumsan arcu ut, lacinia est. Nulla eu sem elit. Fusce nec
laoreet sem, semper molestie libero.
</p>
<p class="mb-4">
Ut sagittis lacus consequat accumsan venenatis. Sed sollicitudin, lectus et
fringilla ultrices, dolor nisi scelerisque tortor, vel finibus magna massa
non nunc. Phasellus massa quam, egestas a nisl sed, porta volutpat metus.
Nunc sed elit ac tellus tempor cursus. Suspendisse potenti. Vestibulum
varius rutrum nisl nec consequat. Suspendisse semper dignissim sem viverra
semper. Nulla porttitor, purus nec accumsan pharetra, nisi dolor condimentum
ipsum, id consequat nulla nunc in ligula.
</p>
<p class="mb-12">
Nulla pharetra lacinia nisi, vitae mollis tellus euismod id. Mauris porta
dignissim hendrerit. Cras id velit varius, fermentum lectus vitae, ultricies
dolor. In bibendum rhoncus purus vel rutrum. Nam vulputate imperdiet
fringilla. Donec blandit libero massa. Suspendisse dictum diam mauris, vitae
fermentum dolor tincidunt in. Pellentesque sollicitudin venenatis dolor,
vitae scelerisque elit ultrices eu. Donec eget sodales risus, quis dignissim
neque.
</p>
</div>
Live preview:
https://codepen.io/zdebskimatt/pen/yLqqZdN
ps.
How can I add a static image if the video does not play automatically on desktop, mobile?
My titles are very long I want them to look like this:
This is a title of...
This is my code
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
How to limit them to 18 characters only and add ... at the end?
Usually you solve this with CSS.
Set a max-width together with text-overflow: ellipsis;.
The advantage is better SEO and the browser is able to use the available space more efficiently than just counting characters.
For example a M character is larger than a l character.
But you can also limit it with JS:
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title.length <= 18 ? data.title: (data.title.substr(0, 18) + "...")}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
You can use simple custom css to limit this
span {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<span>
rem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Donec vitae arcu. Nullam eget nisl. Etiam commodo dui eget wisi. Praesent vitae arcu tempor neque lacinia pretium. Aenean fermentum risus id tortor. Proin mattis lacinia justo. Integer vulputate sem a nibh rutrum consequat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
</span>
I am attempting to reproduce the sliding image effect seen on this website https://chiwawa.es/en/.
I can see how it works on this website (see changeImages function in 63c2acc.js; however, getting this to work in React is proving difficult for me.
To illustrate what I have managed to do, I've published https://dskdirhhwk.vercel.app/.
Solved - (this link now correctly shows animations thanks to answer below)
The difficulty I'm running into is animating the images. The Sections are getting re-rendered by React upon state update, affecting how I apply the classes to the markup. I used Reacts Profiler to verify these are updates, not remounts.
I initially had the Intersection Observer outside the Section component, but this didn't appear to work. I also had a simple setState mechanism and have since built it into a reducer, so that I could add the active class after the other classes.
I am pulling my hair out here. I want a few hints and a push in the right direction!
This is on Next.js. Here is my code.
import React, {
Fragment,
useState,
forwardRef,
useEffect,
useLayoutEffect,
useCallback,
useContext,
useRef,
useMemo,
} from 'react';
import cx from 'classnames';
// yarn add classnames
const useIntersect = ({root = null, rootMargin, threshold = 0}) => {
const [entry, updateEntry] = useState({});
const [node, setNode] = useState(null);
const observer = useRef(null);
useEffect(() => {
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver(([entry]) => updateEntry(entry), {
root,
rootMargin,
threshold,
});
const {current: currentObserver} = observer;
if (node) currentObserver.observe(node);
return () => currentObserver.disconnect();
}, [node]);
return [setNode, entry];
};
const Home = () => {
const initialState = {active: 'teal', current: 'teal'};
const [state, dispatch] = React.useReducer(reducer, initialState);
function reducer(state, {section, type}) {
switch (type) {
case 'reset':
return initialState;
case 'changeSection':
return {
...state,
previous: state?.current,
current: section,
};
case 'makeActive':
return {
...state,
active: section,
};
default:
return state;
}
}
const activeSection = (section) => {
dispatch({section: section, type: 'changeSection'});
setTimeout(() => {
dispatch({type: 'makeActive', section: section});
}, 1000);
};
const Section = ({sectionID, className, children}) => {
const [ref, entry] = useIntersect({
threshold: '0.7',
});
useEffect(() => {
if (state?.current == sectionID) return;
if (entry.isIntersecting) {
activeSection(sectionID);
}
}, [entry]);
const childrenWithProps = React.Children.map(children, (child, index) => {
if (React.isValidElement(child)) {
if (index == 0)
return React.cloneElement(child, {
className: cx(
'fixed top-0 w-1/2 h-screen transition-all duration-[1000ms] place-items-center place-content-center transform-gpu',
{
'translate-y-[-100vh]': sectionID != state?.active,
'z-40 translate-y-0': sectionID == state?.current && sectionID == state?.active,
}
),
data: 'observable',
id: sectionID,
});
}
return child;
});
return (
<section className={className} ref={ref}>
{childrenWithProps}
</section>
);
};
return (
<>
<div className="fixed bottom-0 z-50 w-1/2 opacity-50">
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
<Section sectionID="teal" className="bg-teal-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=1" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="blue" className="bg-blue-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=2" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="orange" className="bg-orange-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=3" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
<Section sectionID="pink" className="bg-pink-200">
<div>
<img className="block object-cover w-full h-full" src="http://placekitten.com/800/1600?image=4" />
</div>
<div className="flex flex-col justify-center w-1/2 min-h-screen px-8 py-64 ml-auto section_content">
<p className="mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis molestie eros eget
ultricies. Mauris tempus odio fermentum, elementum odio a, molestie metus. Nullam id dolor
viverra, scelerisque mi nec, volutpat sapien. Aenean ac nibh gravida, congue velit sit amet,
ultricies mi. Ut posuere ullamcorper elit, eget faucibus turpis fermentum mattis. Nulla
facilisi. Aliquam volutpat maximus vehicula. Nulla commodo dolor vitae euismod condimentum.
Maecenas et justo rutrum, varius velit at, facilisis mauris. Maecenas eget eros in dui mollis
tempor iaculis eu massa. Nulla ullamcorper finibus cursus.
</p>
</div>
</Section>
</>
);
};
export default Home;
You should (almost) never ever ever declare a component inside of another functional component. Doing so essentially creates an entirely new React component class every render, which means it is impossible for React to reconcile which component is which between renders. Try moving your <Section> functional component definition out of the scope of <Home>.
I am new to React and I am learning the basics, but right now I need to rewrite a Class component in order to use React Hooks. So I guess I need to rewrite it to a functional component.
I already tried changing some of the things but in the end everything breaks and I will get a 'props not defined' error.
This is the code:
class Main extends React.Component {
render() {
let close = (
<div
className="close"
onClick={() => {
this.props.onCloseArticle()
}}
></div>
)
return (
<div
ref={this.props.setWrapperRef}
id="main"
style={this.props.timeout ? { display: 'flex' } : { display: 'none' }}
>
<article
id="vision"
className={`${this.props.article === 'vision' ? 'active' : ''} ${
this.props.articleTimeout ? 'timeout' : ''
}`}
style={{ display: 'none' }}
>
<h2 className="major">Vision</h2>
<span className="image main">
<img src={pic01} alt="" />
</span>
<p>
Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu,
at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent
urna nisi, fringila lorem et vehicula lacinia quam. Integer
sollicitudin mauris nec lorem luctus ultrices.
</p>
<p>
Nullam et orci eu lorem consequat tincidunt vivamus et sagittis
libero. Mauris aliquet magna magna sed nunc rhoncus pharetra.
Pellentesque condimentum sem. In efficitur ligula tate urna.
Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor.
Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis
libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat
tempus.
</p>
{close}
</article>
</div>
)
}
}
Main.propTypes = {
route: PropTypes.object,
article: PropTypes.string,
articleTimeout: PropTypes.bool,
onCloseArticle: PropTypes.func,
timeout: PropTypes.bool,
setWrapperRef: PropTypes.func.isRequired,
}
export default Main
What I did is changing class main to const Main = () => {, remove the render() but after that I am confused..
This should do the work
Replace class by const
Remove the render lifecycle method used in class components
Add the props in the parameter of the function
Remove all the this
const Main = (props) => {
let close = (
<div
className="close"
onClick={() => {
props.onCloseArticle()
}}
></div>
)
return (
<div
ref={props.setWrapperRef}
id="main"
style={props.timeout ? { display: 'flex' } : { display: 'none' }}
>
<article
id="vision"
className={`${props.article === 'vision' ? 'active' : ''} ${
props.articleTimeout ? 'timeout' : ''
}`}
style={{ display: 'none' }}
>
<h2 className="major">Vision</h2>
<span className="image main">
<img src={pic01} alt="" />
</span>
<p>
Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu,
at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent
urna nisi, fringila lorem et vehicula lacinia quam. Integer
sollicitudin mauris nec lorem luctus ultrices.
</p>
<p>
Nullam et orci eu lorem consequat tincidunt vivamus et sagittis
libero. Mauris aliquet magna magna sed nunc rhoncus pharetra.
Pellentesque condimentum sem. In efficitur ligula tate urna.
Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor.
Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis
libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat
tempus.
</p>
{close}
</article>
</div>
)
}
I need some help. I'm designing a website. In home page, there are several links. With the help of jquery, I want to hide and show content (on the same page) depending on the links which the user clicks.
I have achieved it, but I feel; its not the right approach. Is there anyway to achieve this with minimal code? may be using arrays or loops? Please have a look at the example that I have created.
Thanks in advance.
$('.para2').hide();
$('.para3').hide();
<!--One-->
$('.one').click(function(){
$('.para1').show();
$('.para2').hide();
$('.para3').hide();
})
<!--Two-->
$('.two').click(function(){
$('.para2').show();
$('.para1').hide();
$('.para3').hide();
})
<!--three-->
$('.three').click(function(){
$('.para3').show();
$('.para1').hide();
$('.para2').hide();
})
<ul>
<li><a href="#" class="one" >Para -1</a></li>
<li><a href="#" class="two" >Para -2</a></li>
<li><a href="#" class="three" >Para -3</a></li>
</ul>
<div class="para1" style="width:500px; padding:10px; border:1px solid red; background:#009966">
<h1>Para -1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para2" style="width:500px; padding:10px; border:1px solid red; background:#333333">
<h1>Para -2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para3" style="width:500px; padding:10px; border:1px solid red;">
<h1>Para -3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
You may change like below:
Html:
<ul>
<li><a href="#" class="paraLink" data-para="one" >Para -1</a></li>
<li><a href="#" class="paraLink" data-para="two" >Para -2</a></li>
<li><a href="#" class="paraLink" data-para="three" >Para -3</a></li>
</ul>
<div class="para one" ...
<div class="para two" ...
<div class="para three" ...
JS:
$(function() {
$('.paraLink').click(function(e) {
e.preventDefault();
$('.para').hide();
$('.'+$(this).data('para')).show();
});
});
THE WORKING DEMO.