add work section
This commit is contained in:
parent
f6645e57d1
commit
c8640cc9d9
52
components/PortfolioEntry.jsx
Normal file
52
components/PortfolioEntry.jsx
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
* Imports
|
||||
* ------------------------------------------------------------------------------
|
||||
*
|
||||
*/
|
||||
/** ********************* React/Next Imports */
|
||||
import React from "react";
|
||||
import TextShuffler from "./actions/TextShuffler";
|
||||
/** ~ End React/Next Imports *************** */
|
||||
|
||||
/** ********************* Functions and Other Page Imports */
|
||||
/** ~ End Functions and Other Page Imports *************** */
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* Main Component { Functional }
|
||||
* ------------------------------------------------------------------------------
|
||||
* @param {Object} props - React component props including { children }
|
||||
*
|
||||
*/
|
||||
/** ********************* Page Main Component */
|
||||
export default function PortfolioEntry({ title, description, url, image }) {
|
||||
// ## Get Contexts
|
||||
// -----------------------
|
||||
|
||||
// ## Javascript Variables
|
||||
// -----------------------
|
||||
|
||||
// ## React Hooks { useState, useEffect, useRef, etc ... }
|
||||
// -----------------------
|
||||
|
||||
// ## Function Return
|
||||
return (
|
||||
<div className="portfolio-entry-block">
|
||||
<h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
|
||||
<img src={ image } alt="" />
|
||||
<span>
|
||||
<TextShuffler textInput={ description } />
|
||||
</span>
|
||||
<div className="hero-ctas-section">
|
||||
<a href={ url } target="_blank">Visit Site</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// -----------------------
|
||||
};
|
||||
/** ~ End Page Main Component *************** */
|
||||
|
||||
// export default Header;
|
8
components/portfolioEntries.json
Normal file
8
components/portfolioEntries.json
Normal file
@ -0,0 +1,8 @@
|
||||
[
|
||||
{
|
||||
"title": "Next 7 Web Engine",
|
||||
"description": "Next 7 is an all-in-one web engine featuring a web page builder and a content management system",
|
||||
"url": "https://next7.io",
|
||||
"image": "/images/next7screenshot.png"
|
||||
}
|
||||
]
|
@ -7,6 +7,7 @@ const GeneralHeader = () => {
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About Me</a>
|
||||
<a href="/work">My Work</a>
|
||||
<a href='/documents/Benjamin_Toby_CV.pdf' target="_blank">My Resume</a>
|
||||
<a href="/contact">Contact Me</a>
|
||||
</nav>
|
||||
|
29
pages/work.jsx
Normal file
29
pages/work.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import Head from 'next/head'
|
||||
import TextShuffler from '../components/actions/TextShuffler'
|
||||
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
|
||||
import PortfolioEntry from '../components/PortfolioEntry'
|
||||
|
||||
const about = () => {
|
||||
const portfolioEntries = require("../components/portfolioEntries.json");
|
||||
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<Head>
|
||||
<title>My Work | Tben</title>
|
||||
<meta name="description" content="Some of my Work" />
|
||||
</Head>
|
||||
<h1><TextShuffler textInput="My Work" /></h1>
|
||||
<span className='hero-sub-text' style={ { marginTop: "-30px", marginBottom: "20px", display: "block" } }>
|
||||
<TextShuffler textInput="Some of my work ..." />
|
||||
</span>
|
||||
|
||||
<div className='portfolio-entries-block'>
|
||||
{ portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
|
||||
|
||||
</div>
|
||||
</GeneralLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default about
|
BIN
public/images/next7screenshot.png
Normal file
BIN
public/images/next7screenshot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 485 KiB |
@ -243,6 +243,26 @@ nav a:hover {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*############################################# -- Portfolio page */
|
||||
.portfolio-entries-block {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.portfolio-entry-block {
|
||||
max-width: 700px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.portfolio-entry-block img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
object-position: left top;
|
||||
}
|
||||
/*############################################# -- Contact Forms */
|
||||
form {
|
||||
margin-top: 40px;
|
||||
|
Loading…
Reference in New Issue
Block a user