Ozzo Posts - Answer Overflow

Ozzo

•Created by Ozzo on 5/1/2024 in #ui-ux

Feedback on my portfolio design

Hello, I have redesign my portfolio to offer my services as a freelancer in web development. My target market are directors of small/medium business in France, so I went for something more professional. I have a homepage (hero, value proposition, services, projects, qualities, contact form), a about us type page, a detail page per project and a detail page per services. Here is the figma link : https://www.figma.com/file/46UIjqaAgLcvYYsteJtiGK/Portfolio-v3?type=design&node-id=0-1&mode=design I would really appreciate your feedback about design (UI/UX)

38 replies

KPCKevin Powell - Community

•Created by Ozzo on 2/3/2024 in #front-end

How can I reproduce this design (frontendmentor.io)

16 replies

KPCKevin Powell - Community

•Created by Ozzo on 1/27/2024 in #front-end

How to handle responsiveness of an image ?

8 replies

KPCKevin Powell - Community

•Created by Ozzo on 1/7/2024 in #front-end

How use Google Calendar API to insert an event in end-user's calendar with Next.js

Hello, I'm trying to setup a call to Google Calendar API to insert an event in end-user with Next.js but I'm drowning in the documentation. I'm stuck on the authentication of the end-user. Here what I've done till now : - I created a OAuth 2.0 ID Client from Google Cloud Console - Imported the .json file in my Next.js application - I used NextAuth and googleapis (Node.js google library for authentification) - Used the googleapis to try to authenticate the end-user and get an access-token. Here the error message I got : "key must be a string, a buffer or an object" Here the code creating the error :

export async function authenticate() {
    const keyFilePath = path.join(process.cwd(), 'credentials.json');
    console.log(keyFilePath)
    const auth = new google.auth.GoogleAuth({
        keyFile: keyFilePath,
        scopes: ['https://www.googleapis.com/auth/calendar.events', 'https://www.googleapis.com/auth/calendar'],
    });
    return await auth.getClient();
}

export async function authenticate() {
    const keyFilePath = path.join(process.cwd(), 'credentials.json');
    console.log(keyFilePath)
    const auth = new google.auth.GoogleAuth({
        keyFile: keyFilePath,
        scopes: ['https://www.googleapis.com/auth/calendar.events', 'https://www.googleapis.com/auth/calendar'],
    });
    return await auth.getClient();
}

I don't understand because keyFilePath is a string.. I've tried to replace it with the content of the file directly, as an object, but then I got the error message : The "paths[0]" argument must be of type string. Received an instance of Object .. Does anyone has experience with Google APIs, OAuth 2.0 or Next.js ? Or can direct me towards great resources ? I'm a bit lost with all the google documentation. Thanks !

3 replies

KPCKevin Powell - Community

•Created by Ozzo on 1/2/2024 in #front-end

How to use Google Calendar API to fetch events without final user authentication

14 replies

KPCKevin Powell - Community

•Created by Ozzo on 12/31/2023 in #front-end

How to create a responsive card with an image ?

Hello, I would like to create cards to display projects I have worked on for my portfolio. I would like to create something like that. My problem is mainly with the images, I don't really know how to display them properly on different screen sizes. I have tried to give them a certain height in % but it messes the height of the card. I have tried to give them a fixed height in rem but it's not really responsive even with media queries. If I set a height of 100%, the image become too big in big smartphone/tablets Do you guys have any ideas how I can implement that ? Here is my code :

<div className={classes.card}>
                    <Image src={newsHomepageImg} alt="page d'accueil du site d'information" className={classes.mainImg} />
                    <div className='d-flex gap-05 align-items-center'>
                        <Image src={frontendmentorLogo} className={classes.logo} alt="logo de l'entreprise frontendmentor.io" />
                        <div className={classes.text}>
                            <p className={classes.title}>Page d'accueil d'informations</p>
                            <p className={classes.description}>Frontend mentor</p>
                        </div>
                    </div>
                    <div className='d-flex w-100'>
                        <a className={classes.button} href="https://lordyner.github.io/news-homepage/" target="blank">
                            Visitez le site
                        </a>
                    </div>
                </div>

<div className={classes.card}>
                    <Image src={newsHomepageImg} alt="page d'accueil du site d'information" className={classes.mainImg} />
                    <div className='d-flex gap-05 align-items-center'>
                        <Image src={frontendmentorLogo} className={classes.logo} alt="logo de l'entreprise frontendmentor.io" />
                        <div className={classes.text}>
                            <p className={classes.title}>Page d'accueil d'informations</p>
                            <p className={classes.description}>Frontend mentor</p>
                        </div>
                    </div>
                    <div className='d-flex w-100'>
                        <a className={classes.button} href="https://lordyner.github.io/news-homepage/" target="blank">
                            Visitez le site
                        </a>
                    </div>
                </div>

.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) -6px -1px 1px -17px;
    transition: .2s ease-in-out;
    color: #fff;
    border: 1px solid #fff;

}

.mainImg {
    object-fit: cover;
    width: 100%;
    height: 10rem;
    aspect-ratio: 2.5;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) -6px -1px 1px -17px;
    transition: .2s ease-in-out;
    color: #fff;
    border: 1px solid #fff;

}

.mainImg {
    object-fit: cover;
    width: 100%;
    height: 10rem;
    aspect-ratio: 2.5;
}

20 replies

Gaming

Programming