En utvecklar-portfolio är en samling arbetsprover och projekt som visar upp dina färdigheter och erfarenheter. En stark portfolio skiljer dig exempelvis från andra kandidater när du söker jobb. Men inte bara det: en portfolio kan dessutom vara ett värdefullt verktyg för att skapa nätverk, hålla reda på vad du har lärt dig och etablera dig som sakkunnig.
I den här handledningen så får du exempelvis lära dig hur du bygger en utvecklar-portfolio med hjälp av Next.js och distribuerar direkt från ditt GitHub-arkiv till Kins’a’s plattform för applikationshosting. Den tillhandahåller dessutom en kostnadsfri .kinsta.app-domän för att snabbt få igång ditt arbete.
Här är en live-demo av den utvecklar-portfolio som du kommer att bygga med Next.js.
Du kan få åtkomst till detta projekts GitHub-kodförråd om du vill ta en närmare titt, eller använda denna portfolio starter project mall genom att välja Använd denna mall > Skapa ett nytt kodförråd — detta kommer att kopiera startkoden till ett nytt arkiv. Startprojektet innehåller grundläggande koder som stilar, en Font Awesome CDN-länk, bilder och grundläggande struktur.
Krav/förutsättningar
Det här är en handledning av typen ”häng med”. Det blir lättare för dig att koda medan du läser om du har:
- Grundläggande kunskaper om HTML, CSS och JavaScript
- Lite kunskap om React och kanske Next.js
- Node.js och npm (Node Package Manager) eller yarn installerade på din dator
Varför Next.js?
Next.js är ett React-baserat JavaScript-biblioteksramverk med öppen källkod. Det kan dessutom användas för ett brett spektrum av webbutvecklings-projekt eftersom det förenklar byggandet av renderade och statiska applikationer på serversidan. Next.js effektiviserar processen genom att utnyttja de bästa funktionerna i React och optimera renderings-prestanda för förbättrad användarupplevelse. Några av de vanligaste användningsområdena för Next.js är följande:
- Byggandet av statiska webbplatser: Next.js kan bygga statiska webbplatser som är snabba, enkla att distribuera och som dessutomn kräver minimalt med underhåll. Detta gäller exempelvis för webbplatsen för utvecklar-portfolion som vi kommer att bygga under den här handledningen.
- Ett byggande av dynamiska webbplatser: Next.js gör det möjligt att skapa dynamiska webbplatser som kan ändra innehållet baserat på användarinteraktioner eller datahämtning på serversidan.
- Konstruktionen av e-handelswebbplatser: Next.js lämpar sig väl för att bygga e-handelswebbplatser som kräver en serverbaserad rendering för att förbättra SEO och prestanda.
- Skapandet av progressiva webbapplikationer (PWA): Next.js stöder skapandet av PWA: er. Det är webb-applikationer som fungerar som inbyggda appar och som kan installeras på en användares enhet.
Så här ställer du in din Next.js-utvecklingsmiljö
För att sätta upp en utvecklingsmiljö för Next.js så ska du först installera Node.js på din dator. Du kommer nämligen att använda kommandot npx för att köra npm-paket utan att behöva installera dem globalt på ditt system. När detta är klart så kan du sedan skapa ett Next.js-projekt genom att därefter köra följande kommando:
npx create-next-app@latest my-portfolioEn prompt kommer sedan att dyka upp och be dig att bekräfta några ytterligare beroenden. Därefter så kan du köra npm run dev för att göra din app tillgänglig på localhost:3000.
När du skapar ett Next.js-projekt med kommandot npx så skapas en mappstruktur automatiskt med följande huvudkataloger:
- pages: Den här mappen innehåller applikationens sidor, som automatiskt dirigeras utifrån deras filnamn.Pages/index.js skulle exempelvis vara hemsidan, medan pages/about.js skulle vara sidan om webbplatsen.
- public: Den här mappen innehåller statiska filer som kan serveras direkt, exempelvis bilder, teckensnitt och andra tillgångar.
- components: Den här mappen är valfri och innehåller återanvändbara gränssnitts-komponenter som kan användas i hela applikationen.
- styles: Den här mappen är också valfri och innehåller globala stilar som kan användas i hela applikationen.
Du kan dessutom generera andra kataloger och filer beroende på den specifika konfigurationen och funktionerna. Detta är dock de centrala katalogerna i ett grundläggande Next.js-projekt.
I den här handledningen så kommer allt som vi bygger att visas på index-sidan (vår webbsida med en sida). Du kommer dessutom att inkludera komponenter för olika sektioner som hjälten, om, projekt och andra.
Hur man bygger en responsiv utvecklar-portfolio med Next.js
En portfolio består vanligtvis av komponenter som dessa:
- Komponent för navigeringsfält
- Hjälte-komponent
- Komponenten ”Om”
- Färdigheter-komponenten
- En komponent för projekt
- kontakt-komponenten
- Komponent för sidfot
Komponenterna Navbar och Footer förväntas visas på alla sidor om portfolion har mer än en sida. Detta kan exempelvis uppnås i Next.js genom att definiera en layout.
Definiera layouter i Next.js
I Next.js så är en layout ett sätt att definiera en konsekvent struktur för de komponenter som visas på varje sida på en webbplats. Layouten inkluderar vanligtvis element som exempelvis en rubrik, en navigeringsmeny och en sidfot som visas på alla sidor på webbplatsen.
Börja med att skapa en komponentmapp i mappen src (source) i ditt Next.js-projekt. Skapa sedan komponenterna Navbar och Footer som kommer att användas i komponenten Layout.
Här är Navbar-komponenten i Navbar.jsx:
// components/Navbar.jsx
import Link from "next/link";
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo">
<Link href="/">
Joe's Portfolio
</Link>
</div>
<a href="" className="cta-btn">Resume</a>
</div>
)
}
export default Navbar;Här är komponenten Footer i Footer.jsx:
// components/Footer.jsx
const Footer = () => {
return (
<>
<hr/>
<div className="footer-container">
<p>
© {new Date().getFullYear()} Joel's Portfolio
</p>
<div className="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</>
)
}
export default Footer;Lägg till CDN-länken
Observera: För att Font Awesome-ikoner ska fungera så måste du antingen installera Font Awesome i ditt projekt eller använda dess CDN. Du kan lägga till CDN-länken i din _document.js-fil så här:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Obs: Om du länkar in en annan version av Font Awesome via CDN så måste du byta in ovanför lämplig integrity-hash för den versionen.
När du har skapat alla nödvändiga komponenter för din layout så kan du sedan skapa själva Layout-komponenten. Lägg därefter till den här komponenten på dina sidor genom att omsluta sidans innehåll i den.
Layoutkomponenten kommer sedan att acceptera en <code>children</code> prop. Som ett resultat så kan du få tillgång till innehållet i dina Next.js-sidor.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;Lägg till Layout-komponenten
Nu har du lyckats att skapa Layout-komponenten som innehåller navigeringsfältet och sidfoten tillsammans med children-propsen som är korrekt placerade. Du kan därefter lägga till Layout-komponenten på dina sidor genom att svepa in sidans innehåll i den. Detta görs i filen _app.js.
// pages/_app.js
import '@/styles/globals.css';
import Layout from '../components/layout';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}Nu har du skapat en layout för din utvecklar-portfolio. För den här portfolion så fokuserar vi mer på Next.js och hur du distribuerar din webbplats till Kinsta. Du kan alltså kopiera stilarna i filen styles/globals.css till ditt eget projekt. Om du startar din portfolio-webbplats i utvecklings-läge så bör du nu se din app-layout.
Nu är det dags att ge din portfolio-webbplats ett lämpligt innehåll.
Att bygga portfolio-komponenter
Du kan nu skapa individuella komponenter för varje avsnitt i din utvecklares portfolio. Alla dessa komponenter kommer sedan att importeras till indexsidan i ditt Next.js-projekt. Som ett resultat så kan de visas när du startar ditt projekt med npm run dev.
Komponenten Hero
Komponenten Hero är den första sektionen under navigeringsfältet. Huvudsyftet är att fånga användarens uppmärksamhet och ge dem en känsla av vad webbplatsen eller applikationen handlar om.
// components/Hero.jsx
import Image from "next/image";
const Hero = () => {
return (
<div className="hero-container">
<Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
<div className="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
exceptional websites, applications, and everything in between.
</p>
<div className="social-icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
)
}
export default Hero;Next.js Image-komponenten används istället för HTML-taggen
I koden ovan så märker du att Next.js Image-komponenten används istället för HTML-taggen img för att lägga till bilden. Den möjliggör nämligen automatisk bildoptimering, storleksändring och mycket annat.
I komponenten About så märker du även att ett enkelt stycke för att säga lite om utvecklaren har lagts till. Det lades dessutom till några sociala ikoner från Font Awesome för att lägga till sociala länkar.
Så här ska Hero-komponenten se ut:
Du kan lägga till mer innehåll till Hero-komponenten, ändra stilarna i filen styles/globals.css och dessutom återskapa det här avsnittet på ditt eget sätt.
Komponenten About
Komponenten About är avsedd att ge läsare eller personer som besöker din portfolio mer information om dig i så många stycken som du vill. Om du vill berätta mer om dig själv så kan du skapa en särskild sida ”Om mig” och lägga till en knapp i denna sektion för att läsa mer om dig själv.
// components/About.jsx
import Image from "next/image";
const About = () => {
return (
<div className="about-container">
<h2>About Me</h2>
<div className="flex-about">
<div className="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to
complex problems. I have a strong foundation in software development, with a focus on web
technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
back-end of applications, and I am always looking for ways to optimize performance, improve user
experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
complex enterprise-level applications. I am experienced in working with a variety of development
tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
to learn and explore new technologies, and I am constantly seeking out opportunities to improve
my skills and knowledge.</p>
</div>
<div className="about-img">
<Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
</div>
</div>
</div>
)
}
export default About;Koden ovan innehåller två stycken text om utvecklaren och en bild på utvecklaren. Så här förväntas avsnittet Om se ut:
Du kan alltid finjustera stilarna för att lägga till fler bilder och mycket mer.
Komponenten Skills
Denna komponent är avsedd att visa några av utvecklarens mest använda tekniker eller tekniker som utvecklaren har använt tidigare.
Du kan göra detta enklare att underhålla genom att skapa en matris i en extern fil och sedan importera den till färdighets-komponenten. Du kan sedan slinga dig igenom i stället för att duplicera en liknande kod.
// components/Skills.jsx
const Skills = () => {
return (
<div className="skills-container">
<h2>Skills</h2>
<div className="grid-skills">
<div className="skill-card html">
<i className="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div className="skill-card css">
<i className="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div className="skill-card js">
<i className="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div className="skill-card react">
<i className="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div className="skill-card node">
<i className="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div className="skill-card python">
<i className="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
)
}
export default Skills;Ett kort för varje färdighet
I koden ovan så skapas ett kort för varje färdighet. Varje kort kommer sedan att innehålla teknik-ikonen från font-awesome och teknik-namnet. Du kan dessutom lägga till fler stilar och finjustera koden för att göra den mer attraktiv och unik.
Projects-komponenten
Projects-komponenten är en av de viktiga sektionerna i en utvecklares portfolio. Projekten ger konkreta bevis på en utvecklares färdigheter och förmågor och visar dessutom hans eller hennes förmåga att tillämpa sina kunskaper på verkliga problem.
Varje projekt kommer att innehålla en kort beskrivning av projektet, en länk till källkoden (vi använder GitHub-länkar här) och andra detaljer som du vill lägga till.
Du kan skapa en matris som inkluderar varje projekts detaljer och sedan importera den till din komponent för att undvika hård-kodning av dem.
Skapa en data.js-fil
Låt oss skapa en data.js-fil för att lagra matrisen med projektdata. Du kan lagra den här filen i komponent-mappen eller i mappen pages/api. För den här demonstrationen så kommer jag att lagra den i komponent-mappen. Den här matrisen kommer att innehålla ett objekt för varje projekt, och objektet kommer att innehålla projektets namn, beskrivning och GitHub-länk.
// components/data.js
export const projectData = [
{
id: 1,
title: 'Todo List App',
description:
'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',
gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
},
{
id: 2,
title: 'Books Library App',
description:
'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',
gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
},
{
id: 3,
title: 'Quotes Generator',
description:
'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
},
{
id: 4,
title: 'Password Generator',
description:
'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
},
{
id: 5,
title: 'Twitter UI Clone',
description:
'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',
gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
},
];Skapa en projekt-komponent
Du kan nu skapa en projekt-komponent för att använda dessa data genom att enkelt slinga dig igenom. Det fungerar med vilken JavaScript-iterationsmetod som helst. För den här handledningen så kan du dock använda JavaScript map() matris-metoden för att slinga dig genom data-matrisen efter att du har importerat den till projekt-komponenten.
// components/Projects.jsx
import { projectData } from './data.js';
const Projects = () => {
return (
<div className="projects-container">
<h2>Projects</h2>
<div className="projects-grid">
{projectData && projectData.map((project) => (
<div className="project-card" key={project.id}>
<div className="project-header">
<i className="fa-regular fa-folder-open folder-icon"></i>
<div className="small-icons">
<a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{project.title}</h3>
<p>{project.description}</p>
</div>
))
}
</div>
</div>
)
}
export default Projects;I koden ovan så har du framgångsrikt undvikit upprepning genom att loopa genom matrisen för att mata ut alla projekt i Projects-komponenten. Som ett resultat så blir det enkelt att underhålla och lägga till fler projekt.
Contact-komponenten
En anledning till att skapa en utvecklar-portfolio är att potentiella kunder ska kunna kontakta dig. Ett sätt är exempelvis att skicka ett e-postmeddelanden till dig, vilket vi kommer att underlätta i komponenten Contact.
// components/Contact.jsx
const Contact = () => {
return (
<div className="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
</div>
)
}
export default Contact;Placera din e-postadress i a-taggen så att knappen startar ett e-postprogram med ett meddelande till dig.
Du har nu skapat alla komponenter för din portfolio-tillämpning. Nästa steg är att lägga till dem på din indexsida. Navigera till filen pages/index.js – som skapas som standard – och ersätt koden med följande.
// pages/index.js
import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';
import Head from 'next/head';
const Home = () => {
return (
<>
<Head>
<title>Joel's Portfolio</title>
<meta name="description" content="Joel's Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Hero />
<About />
<Skills />
<Projects />
<Contact />
</div>
</>
);
};
export default Home;När du nu kör din applikation så kommer du att märka att en fullständig portfolio-webbplats har skapats. Slutligen, innan du distribuerar din applikation, så ska vi installera ett beroende. En fördel med att använda Next.js är de många funktioner som erbjuds. Detta inkluderar exempelvis filbaserad routing, bildoptimering och mycket mer.
Bildoptimering hanteras med Next.js-komponenten Image. Innan du distribuerar en applikation som använder Next.js Image-komponenten så rekommenderas det starkt att du installerar sharp. Du kan göra detta genom att navigera till din terminal, se till att du befinner dig i projekt-katalogen och sedan köra följande kommando:
npm i sharpDu kan nu distribuera din applikation så kommer bilderna att fungera korrekt med den fullständiga optimeringen som Next.js tillhandahåller.
Så här distribuerar du Next.js-applikationen till Kinsta
När du är nöjd med din portfolio som visar upp ditt bästa utvecklingsarbete och viktig information så vill du förmodligen dela den med andra, eller hur? Låt oss se hur du gör detta med GitHub och Kinsta’s plattform för applikationshosting.
Skicka din kod till GitHub
Det finns olika sätt att pusha koder till GitHub. Låt oss dock använda Git för den här handledningen. Git används ofta inom programvaruutveckling eftersom det är ett pålitligt och effektivt sätt att hantera kodändringar, samarbeta i projekt och upprätthålla versionshistorik.
Du kan ladda upp din kod till GitHub med hjälp av följande steg:
Först så skapar du ett nytt arkiv (precis som en lokal mapp för att lagra din kod). Du gör detta genom att logga in på ditt GitHub-konto, klicka på +-knappen i det övre högra hörnet av skärmen och välja Nytt arkiv från rullgardinsmenyn, som du ser i bilden nedan.
Nästa steg är att ge ditt arkiv ett namn, lägga till en beskrivning (valfritt) och välja om du vill att ditt arkiv ska vara offentligt eller privat. Klicka sedan på Skapa ett arkiv. Du kan nu skicka din kod till det nya GitHub-arkivet.
Allt som krävs för att pusha din kod med Git är webbadressen till arkivet, som du hittar på arkivets huvudsida, under knappen Klona eller ladda ner. De visas dessutom i de steg som visas efter att du skapat ett arkiv.
Du kan förbereda dig för att pusha din kod genom att öppna din terminal eller kommando-tolk och navigera till katalogen som innehåller ditt projekt. Använd följande kommando för att initiera ett lokalt Git-arkiv:
git initLägg nu till din kod i det lokala Git-arkivet med följande kommando:
git add .Ovanstående kommando lägger till alla filer i den aktuella katalogen och dess underkataloger till det nya Git-arkivet. Du kan sedan bekräfta dina ändringar med följande kommando:
git commit -m "my first commit"Obs: Du kan ersätta ”my first commit” med ditt eget korta meddelande som beskriver de ändringar som du har gjort.
Slutligen så kan du skicka din kod till GitHub med följande kommandon:
git remote add origin [repository URL]
git push -u origin masterObservera: Se till att du ersätter ”[repository URL]” med webbadressen för ditt eget GitHub-arkiv.
När du har slutfört dessa steg så kommer din kod att skickas till GitHub och bli tillgänglig via webbadressen för ditt arkiv. Du kan nu distribuera ditt arkiv till Kinsta.
Distribuera din portfolio till Kinsta
Distribueringen till Kinsta sker på endast några minuter. Börja med att logga in eller skapa ditt konto på instrumentpanelen MyKinsta.
Därefter så godkänner du Kinsta på GitHub i dessa snabba steg:
- Klicka på Applikationer i den vänstra sidofältet
- Klicka på Lägg till tjänst
- I rullgardinsmenyn så klickar du på Applikation eftersom du vill distribuera en Next.js-applikation till Kinsta.
En modal visas där du kan välja det arkiv som du vill distribuera.
Om du har flera grenar i ditt arkiv så kan du välja den gren som du vill distribuera. Du kan dessutom ge applikationen ett namn. Se till att du väljer en datacenterplats bland de tillgängliga 25. Därefter så kommer Kinsta automatiskt att upptäcka ett startkommando.
Vid den här tidpunkten så kommer din applikation att börja distribueras. Inom några minuter så kommer en länk att tillhandahållas för att komma åt den distribuerade versionen av din applikation. I det här fallet så är länken: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Obs: Automatisk distribuering var aktiverad, så Kinsta distribuerar automatiskt om din applikation när du gör ändringar i din kodbas och skickar den till GitHub.
Sammanfattning
Det finns flera skäl till varför utvecklare bör överväga att använda Next.js för sina webbprojekt. Det skapar exempelvis en optimerad prestanda direkt från start, med funktioner som pre-fetching och koduppdelning som bidrar till att minska sidladdningstiderna. Utöver detta så skapas dessutom en välbekant utvecklingsupplevelse för React-utvecklare, med stöd för populära verktyg som stiliserade komponenter och de senaste React-funktionerna.
Kinsta erbjuder stöd för olika distribuerings-alternativ för Next.js, inklusive traditionell serverbaserad hosting och moderna serverlösa plattformar. Som ett resultat så blir det möjligt för utvecklare att välja det distribuerings-alternativ som passar bäst för deras behov och samtidigt dra nytta av ramverkets prestandaoptimeringar och andra fördelar.
I den här handledningen så har du steg för steg lärt dig hur du bygger en responsiv portfolio-sida med Next.js och hur du distribuerar den till Kinsta.
Du kan prova Kinsta’s Applikationshosting kostnadsfritt. Om du gillar den så kan du välja vår Hobby Nivå-plan som börjar på 7 dollar/månad.
Nu är det din tur att utmana dig själv: lägg till fler funktioner på din nyutvecklade portfolio-webbplats! Här är några idéer för att få din kreativa juice att flöda: lägg till fler sidor med detaljerad information, integrera en blogg med MDX, implementera lite animation. Dela med dig av dina projekt och erfarenheter i kommentarerna nedan!
Lämna ett svar